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

Posted 2023-02-23

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

【英文标题】：How to start new page from link in local html file in flutter

【发布时间】：2020-01-20 06:24:30

【问题描述】：

我想从本地 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');
  

【参考方案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，并且此流程继续进行。

希望对你有帮助。

【讨论】：

，您的回答很有帮助。但是当我将 page_two 返回到 page_one 时，圆圈指示符是 show.and 我使用 assets/html 文件如何传入 reloadUrl。谢谢

对于assets/html，您可以简单地调用future方法从该位置再次读取html文件。对于 _getWebView 内部的这个，您需要在您之前的代码中执行的 WebView 上实现 FutureBuilder。关于loader，我编辑了setupListener()请用新的试试。