如何修复Flutter布局时RenderCustomMultiChildLayoutBox获无限尺寸错误？

根因分析 #

报错核心来自两个开发疏漏：

1. 未处理FutureBuilder的异步生命周期状态：数据加载完成前snapshot.data为null，此时直接执行空数据解码、ListView渲染逻辑，会导致ListView尝试计算无限高度，触发尺寸溢出错误。
2. Scaffold的body外层存在冗余无约束容器：无固定宽高的Container嵌套Center，会要求子组件尽可能拉伸占满可用空间，进一步放大了ListView的高度计算异常问题。

修复代码 #

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class BeerListPage extends StatefulWidget {
  BeerListPage({required Key key}) : super(key: key);

  @override
  BeerListPageState createState() => BeerListPageState();
}

class BeerListPageState extends State<BeerListPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 移除冗余的Container和Center包裹，直接使用FutureBuilder作为body
      body: FutureBuilder(
        future: DefaultAssetBundle.of(context).loadString('packages/beers/beers.json'),
        builder: (context, snapshot) {
          // 处理加载中状态，固定尺寸组件避免高度计算异常
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 处理加载失败/空数据状态
          if (snapshot.hasError || !snapshot.hasData) {
            return const Center(child: Text('数据加载失败'));
          }
          // 安全解码数据
          var beers = json.decode(snapshot.data.toString());
          return ListView.builder(
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              var beer = beers[index];
              return Card(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Text("Name: " + beer['name'],
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 24)),
                    Text("Country: " + beer['country'],
                        style: TextStyle(
                            fontWeight: FontWeight.normal, fontSize: 20)),
                    Text("ABV: " + beer['abv'],
                        style: TextStyle(
                            fontWeight: FontWeight.normal, fontSize: 20)),
                    Image.network(beer['image'], height: 200)
                  ],
                ),
              );
            },
            itemCount: beers.length,
          );
        },
      )
    );
  }
}

修复说明 #

• 加载阶段返回居中的加载动画，组件有固定宽高，不会触发无限尺寸计算
• 异常状态返回固定高度的提示文本，避免布局异常
• 移除冗余外层容器后，Scaffold的body会给子组件明确的布局约束，ListView可以正常适配可用空间
• 仅在确认数据存在后才执行解码和列表渲染逻辑，避免空指针导致的布局异常

内容的提问来源于stack exchange，提问作者mmmm