Flutter使用WebView加载数据不显示且报Bottom Overflowed By Infinity Pixels错误求助

算力阿峰

2026-10-2

问题根源

报错Bottom Overflowed By Infinity Pixels是布局高度约束冲突导致的，核心问题有两个：

外层Container设置了固定height: 100，不足以容纳标题+WebView的总高度
Column的主轴方向为无界高度，WebView默认会尝试占用全部可用高度，在无界容器内无法计算自身尺寸，触发高度无限的溢出问题。

解决方案

按需选择以下任意一种方案即可：

方案1（推荐）：用Expanded包裹WebView，让WebView自动填充Column内除标题外的所有剩余可用空间
方案2：给WebView单独设置固定高度，适合需要固定WebView展示区域大小的场景
方案3：如果需要整个页面可滚动，将Column嵌套在SingleChildScrollView中，同时给WebView指定明确高度。

修正后参考代码（方案1）

body: Container(
  // 建议移除原有的固定height:100配置，让父布局传递正常高度约束；如果需要固定外层高度，请将值调整为足够容纳内容的大小
  child: Padding(
    padding: EdgeInsets.all(8.0),
    child: Column(
      children:[
        Text(widget.title,
          textAlign:TextAlign.start,
          style: TextStyle(fontSize:19,  )
        ),
        // 新增Expanded包裹WebView
        Expanded(
          child: WebView(
            navigationDelegate: (NavigationRequest request) {
              print('allowing navigation to $request');
              return NavigationDecision.navigate;
            },
            javascriptMode: JavascriptMode.unrestricted,
            initialUrl:'data:text/html;base64,$contentBase64',
            onWebResourceError: (error) {
              //EasyLoading.dismiss();
            },
            onPageFinished: (finish) {
              //EasyLoading.dismiss();
            },
          ),
        )
      ],
    )
  )
),