如何在颤动中从本地html文件中的链接开始新页面

Question

我想从本地 html 文件中的链接开始新页面。

我想从 webview(Page_one) 转到 Page_two.dart 页面。我加载的 webview 没问题。

 <p style="margin-left: 30px;">Read <a style= "text-decoration: none;" 
 href="Page_two.dart">Prohibited ads</a></p></n>

这是我的 Page_one.dart 文件

 class LoadHTMLFileToWEbView extends StatefulWidget {
 @override
   _LoadHTMLFileToWEbViewState createState() => 
  _LoadHTMLFileToWEbViewState();
 }

 class _LoadHTMLFileToWEbViewState extends State<LoadHTMLFileToWEbView> {
   @override
   Widget build(BuildContext context) {
   return FutureBuilder<String>(
  future: _loadLocalHTML(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return WebviewScaffold(
        appBar: AppBar(title: Text("Load HTM file in WebView")),
        withJavascript: true,

        appCacheEnabled: true,
        url: new Uri.dataFromString(snapshot.data, mimeType: 'text/html' , encoding: utf8)
            .toString(),
      );
    } else if (snapshot.hasError) {
      return Scaffold(
        body: Center(
          child: Text("${snapshot.error}"),
        ),
      );
    }
    return Scaffold(
      body: Center(child: CircularProgressIndicator()),
    );
  },
    );
  }
}

 Future<String> _loadLocalHTML() async {
 return await rootBundle.loadString('assets/test.html');
  }

Answer 1

您可以这样做，但您必须更改代码的某些部分。

首先更改href="navigate:Page_two"，这样您可能会发现您正在应用页面中导航。

然后创建一个bool 变量来处理WebView 的可见性，因为使用WebViewScaffold 导航不会隐藏webview 本身。

然后您需要设置一个侦听器来插入网址更改并确定您是否正在重定向或导航。

按照下面给出的代码进行操作

  bool _showWebView = true;
  var flutterWebviewPlugin;

  String myHtml =
      '<p style="margin-left: 30px;">Read <a style= "text-decoration: none;"  href="navigate:Page_two">Prohibited ads1</a></p>';

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Load WebView"),
      ),
      body: _showWebView ? _getWebView() : Container(),
    );
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

  _getWebView() {
    setupListener();
    return WebviewScaffold(
      withJavascript: true,
      appCacheEnabled: true,
      url: new Uri.dataFromString(myHtml, mimeType: 'text/html', encoding: utf8)
          .toString(),
    );
  }

  setupListener() {
    flutterWebviewPlugin = new FlutterWebviewPlugin();

    flutterWebviewPlugin.onUrlChanged.listen((String url) {
      if (url.startsWith("navigate:")) {
        final page = url.substring(url.indexOf(":") + 1, url.length);
        Widget widget = null;
        setState(() {
          _showWebView = false;
        });
        switch (page) {
          case 'Page_two':
            widget = PageTwo();
            break;
        }
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => widget))
            .then((value) {
          setState(() {
            _showWebView = true;
          });
        });
        flutterWebviewPlugin.close();
      }
    });
  }

当根据你的代码在url中找到navigate:关键字时，该代码将导航到另一个flutter页面。在重定向时，我们隐藏了 webview 并关闭了监听器。 当用户返回此屏幕时，我们正在重新创建正在重新创建侦听器的 webview，并且此流程继续进行。

希望对你有帮助。