webview_flutter的動態(tài)高度計算

如題,webview_flutter的動態(tài)高度計算,解決方案有二種。

解決方案1,掘金這篇文章講明白了,計算準確,方案是:js和flutter通信,看這位大神的就行了。
地址如下:

https://juejin.cn/post/7056353175900520462

下面的是我自己寫的demo,可看可不看

頂部聲明變量
//WebView 需要的變量屬性如下,缺一不可
 double _webViewHeight = 0;
  String _htmlString = "";
  final String _html1 = """
    <!DOCTYPE html>
        <html>
         <meta content="width=device-width,initial-scale=1.0, maximum-scale=0.5, user-scalable=0" name="viewport"/>
         <meta name="apple-mobile-web-app-capable" content="no" />
         <meta name="format-detection" content="telephone=no,email=no,adress=no"/>
         <body>
  """;
  final String _html2 = """
      </body>
      <script type="text/javascript">
        const resizeObserver = new ResizeObserver(entries =>
        flutterMessage.postMessage(document.body.scrollHeight.toString()));
        resizeObserver.observe(document.body);
      </script>
    </html>
  """;
網(wǎng)絡數(shù)據(jù)拿到html富文本代碼
_htmlString = "網(wǎng)絡請求回來的html代碼";
///商品詳情頁里的 富文本,使用webview進行加載
  Widget _buildGoodsDescribeImgView(){
    if(_detailsModel!.bewrite.isNotEmpty){
      _htmlString = _html1 + _detailsModel!.bewrite + _html2;
      return SizedBox(
        width: WYSizeFit.screenWidth,
        height: _webViewHeight,
        child: WebView(
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController controller) {
            //如果加載的是html情況
            controller.loadHtmlString(_htmlString);
          },
          onPageFinished: (url) async {
          },
            //JavascriptChannel來進行交互
          javascriptChannels: <JavascriptChannel>{
            //參數(shù)為Set,可以傳入多個JavascriptChannel,根據(jù)name作為哈希值
            JavascriptChannel(
            name: 'flutterMessage',
            onMessageReceived: (JavascriptMessage message) {
              _webViewHeight = double.parse(message.message) * 0.5;
              _webViewHeight += 20;
              setState(() {
              });
            },
          ),
          },
        ),
      );
    }
    return const SizedBox(width: 0,height: 0,);
  }
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容