如題,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,);
}