Flutter 中使用 WebViewWidget 使用js回调高度定义父控件高度 过高直接崩溃是为什么

不会编程的小白... 2025-07-30 17:47:23

渲染的HTML中JS 主要代码

// 用 ResizeObserver 监听 document.body 大小变化,动态上报高度
        setTimeout(function() {
          // 检查 flutter_invoke 是否存在
          if (window.flutter_invoke) {
            const resizeObserver = new ResizeObserver(() => {
              const height = document.body.scrollHeight;
              window.flutter_invoke.postMessage("Height:" + height);
            });
            resizeObserver.observe(document.body);
            
            // 立即发送一次高度
            window.flutter_invoke.postMessage("Height:" + document.body.scrollHeight);
          } else {
            console.warn('flutter_invoke not found, using fallback');
            
            // 更好的兜底方案
            function sendHeight() {
              if (window.flutter_invoke) {
                window.flutter_invoke.postMessage("Height:" + document.body.scrollHeight);
              }
            }
            
            // 监听load和resize事件
            window.addEventListener('load', sendHeight);
            window.addEventListener('resize', sendHeight);
            
            // 尝试在稍后再次检查
            setTimeout(sendHeight, 1000);
          }
        }, 200);

Flutter 中接收回调

if (msg.startsWith('Height:')) {
      final heightStr = msg.substring(7).trim();
      final height = double.tryParse(heightStr);
      if (height != null) {
        widget.onHeightReport?.call(height);
      }
    }

高度设置

if(_controller.currentContent.isNotEmpty)
   SizedBox(
     height: currentWebViewHeight,
     child: (() {
         //存在HTML则进行解析
         if (_controller.currentContent.contains("<html>")) {
             return WebViewHtmlWeight(
             htmlContent: _controller.currentContent,
             onJsMessage: (msg) {
                print("全部 JS 消息:$msg");
             },
             onHeightReport: (height) {
                 double adjustedHeight = min(8000, max(height, 500));
                 setState(() {
                     currentWebViewHeight = adjustedHeight;
                 });
             print("触发回调 页面实际渲染高度:$adjustedHeight px");
         },
  );

遇到5000以上的回调高度渲染就直接闪退了,有没有大佬知道怎么回事


错误日志

D/ImageReader_JNI(25369): ImageReader_close: ctx[0xb400007c000281b0], 1440x200, HalFormat[34]
I/PlatformViewsController(25369): Hosting view in view hierarchy for platform view: 96
I/PlatformViewsController(25369): PlatformView is using SurfaceProducer backend
D/ImageReader_JNI(25369): ImageReader_init: ctx[0xb400007c000281b0], 1x1, HalFormat[34], maxImages[5], ndkUsage[256], consumerUsage[256]
W/libc    (25369): Access denied finding property "vendor.display.enable_optimal_refresh_rate"
D/ImageReader_JNI(25369): ImageReader_init: ctx[0xb400007c00020490], 1440x27588, HalFormat[34], maxImages[5], ndkUsage[256], consumerUsage[256]
W/libc    (25369): Access denied finding property "vendor.display.enable_optimal_refresh_rate"
D/ImageReader_JNI(25369): ImageReader_init: ctx[0xb400007c00031d70], 1440x200, HalFormat[34], maxImages[5], ndkUsage[256], consumerUsage[256]
W/libc    (25369): Access denied finding property "vendor.display.enable_optimal_refresh_rate"
E/chromium(25369): [ERROR:skia_output_surface_impl.cc(1296)] 
E/chromium(25369):   surface_size=1440x27588
E/chromium(25369):   format=4
E/chromium(25369):   color_type=4
E/chromium(25369):   backend_format.isValid()=1
E/chromium(25369):   backend_format.backend()=0
E/chromium(25369):   GrBackendFormats::AsGLFormat(backend_format)=1
E/chromium(25369):   backend_format.asVkFormat()=0
E/chromium(25369):   backend_format.asVkFormat() vk_format=0
E/chromium(25369):   sample_count=1
E/chromium(25369):   surface_origin=1
E/chromium(25369):   willGlFBO0=1
F/crashpad(31006): -----BEGIN CRASHPAD MINIDUMP-----
F/crashpad(31006): -----BEGIN CRASHPAD MINIDUMP-----
F/crashpad(31006): )iyJ**g8,n,x>sKyq5HZa-(vg=kVc=GBw=WBAt/n>:?+U&;Jbex'7THAqD@tG?Bim>8P3T^|I2~Vb/|uy<WRVs#X~'0CMKR}5bDUplyF`I&Rj-`6V6-kplJl6D05Lg:DifP+qc4iWN:"c*MW=m|]c])$K=K.u+Q_>X(!K)MWs/3:("G(7<Xde#-+uKmy1"}E=C+&u+0!{j-ew@GSv$KVU8)Rd2TY'!__o0QIk6+l8<]C]xZ&rGv_ps'!U$-GJ'1I!pF`0#a5_,A+3(g''7QW&XdW.Xp-LNTJ,vUJ]Nc2;6G,qAsFm#MM0xwgb&9Z'LP1q#Jg4Na7?7X9=-zmgDglqaeSZs2x{68MwgZ&(CQhJ-g'bMO,pd_@T&K#jMy7G7n#zm0H]O+B?,%hP1Y}*%eCCB^w01c.={)N/yS1tr-7:<e27$EGEG1?!7FO'C{m3:c&[z-M1p5t)t{M,vM7$Bgl/(={BMkb)Mm.e0H>EBa1s2-;i!E&8,jF~.n6vf[L/Zn,
...

 

...全文
28 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

176

社区成员

发帖
与我相关
我的任务
社区描述
本社区分享Flutter的一效果Demo以及一些问题解决方案
社区管理员
  • 早起的年轻人
  • 阿pin
  • 小鸡仔hana
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧