Flutter-WebView使用h5


webview可以跳轉到h5,可以也可以自定義

#flutter官方webview
webview_flutter: ^0.3.10
 ///初始化webview顯示
  Widget _showWebView(BuildContext context) {
    return WebView(
      initialUrl: widget.url,///初始化url
      javascriptMode: JavascriptMode.unrestricted,///JS執行模式
      onWebViewCreated: (WebViewController webViewController) {///在WebView創建完成后調用,只會被調用一次
        //
        //
        _controller.complete(webViewController);
      },
      javascriptChannels: <JavascriptChannel>[///JS和Flutter通信的Channel;
        _alertJavascriptChannel(context),
      ].toSet(),
      navigationDelegate: (NavigationRequest request) {//路由委托(可以通過在此處攔截url實現JS調用Flutter部分);
        ///通過攔截url來實現js與flutter交互
        if (request.url.startsWith('js://webview')) {
          Fluttertoast.showToast(msg:'JS調用了Flutter By navigationDelegate');
          print('blocking navigation to $request}');
          return NavigationDecision.prevent;///阻止路由替換,不能跳轉,因為這是js交互給我們發送的消息
        }

        return NavigationDecision.navigate;///允許路由替換
      },
      onPageFinished: (String url) {///頁面加載完成回調
        setState(() {
          _loading = false;
        });
        print('Page finished loading: $url');
      },

    );
  }

更詳細的使用方法請訪問pub.dev


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM