flutter使用webview_flutter组件实现html渲染与动态刷新

最新推荐文章于 2024-05-27 09:56:43 发布

大慧儿吖

最新推荐文章于 2024-05-27 09:56:43 发布

阅读量1.1k

点赞数 1

文章标签： flutter html android

本文链接：https://blog.csdn.net/pingpangpangpang/article/details/127609266

版权

使用webview_flutter根据h5语言渲染出页面十分简单，主要是如何使其显示按照屏幕大小进行适配、图片如何显示出来和如何动态刷新着三个问题

1、适配

从接口拿到数据后，需要做如下的拼接

        final html = """
   <!DOCTYPE html>
        <html>
        <head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
          <body>
           ${info["title"]=="专项预案"?res.data["planContent"]:res.data["diaposalContent"]}
          </body>
        </html>
      
  """;

其中重点，熟悉h5的小伙伴应该知道，这是规定宽度为实际设备的宽度，缩放为1级

其实加上这一行后就已经实现文字大小的适配，毕竟大多的适配都是根据设备宽度的，

如若对渲染出的高度页面进行检测，可以加上如下字段，利用flutter与webView的通到进行检测

  <script>
          const resizeObserver = new ResizeObserver(entries =>
          Resize.postMessage(document.documentElement.scrollHeight.toString()) )
          resizeObserver.observe(document.body)
        </script>

SizedBox(
          height: webViewHeight,
          width: Get.width,
          child: WebView(
            key: ValueKey(state),
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController controller){
                controller.loadHtmlString(state, baseUrl: ServerManager().server.managementHost);
                _webViewController = controller;
              },
              javascriptChannels: {
                JavascriptChannel(name: "Resize", onMessageReceived: (JavascriptMessage message) {
                  double height = double.parse(message.message);
                  setState(() {
                    webViewHeight = height;
                  });
                })
              }
          ),
        )