Flutter中FutureBuilder嵌套ListView.builder水平滚动布局异常

你触发布局异常的核心原因是可滚动组件嵌套时的约束传递错误，和Expanded组件的添加位置没有直接关联，具体出错点：

• 最外层Column的直接子元素是无宽高约束的Container，Column垂直布局的特性会给子元素传递无界垂直约束，和内部滚动组件的尺寸计算逻辑冲突
• 存在两层嵌套的ListView且都开启了shrinkWrap: true，内层列表没有明确禁用自身滚动，Flutter在计算布局时会出现无限高度的计算死循环，直接触发溢出报错
• 你需要实现水平滚动卡片，但当前代码中所有列表的scrollDirection都设置为垂直方向，本身配置和需求不匹配
• 冗余嵌套：FutureBuilder外层额外套了一层无意义的ListView，属于多余的布局层级，会放大约束冲突问题

按以下步骤调整即可解决问题，不需要拆分第二层Container/Column的子元素：

• 给最外层Column下的第一层Container加Expanded包裹，明确它的可用布局范围，让父级正确传递约束
• 删除FutureBuilder外层冗余的ListView容器，减少不必要的滚动嵌套
• 内层分类列表如果不需要独立滚动，添加physics: const NeverScrollableScrollPhysics()禁用自身滚动，把滚动行为统一交给父级处理；如果要做水平滚动的卡片行，把对应列表的scrollDirection改为Axis.horizontal，同时设置列表项的固定宽度
• 移除内层列表多余的AlwaysScrollableScrollPhysics配置，避免和父级滚动逻辑冲突

body: SafeArea(
  child: Column(
    children: [
      // 给这层Container加Expanded，明确约束范围
      Expanded(
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(...),
              Padding(...),
              Padding(...),
              SizedBox(...),
              Padding(...),
              SizedBox(...),
              Padding(...),
              SizedBox(...),
              Container(
                height: 200,
                color: Colors.blue[200],
                // 删掉外层冗余的ListView，直接放FutureBuilder
                child: FutureBuilder(
                  future: getAudioList(),
                  builder: (context, data) {
                    if (data.hasError) {
                      return Center(child: Text("${data.error}"));
                    } else if (data.hasData) {
                      var items = data.data as List<MyOtherFunc>;
                      var categories;
                      if (items != null) {
                        categories = groupBy(
                            items, (MyOtherFunc ma) => ma.category);
                        Map<String, List<MindfulAudio>> catMap =
                            categories;
                        return ListView.builder(
                          padding:
                              const EdgeInsets.fromLTRB(8, 0, 8, 0),
                          itemCount: catMap.length,
                          // 如果要做水平滚动，打开下面这行，注释掉垂直滚动的physics
                          // scrollDirection: Axis.horizontal,
                          // 禁用内层列表独立滚动，避免嵌套冲突
                          physics:
                              const NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          itemBuilder: (context, index) {
                            String key = catMap.keys.elementAt(index);
                            // 水平滚动时给Card加固定宽度，比如SizedBox(width: 160, child: Card(...))
                            return Card(
                              child: ListTile(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) =>
                                          MyFunc(
                                              catMap[key], key),
                                    ),
                                  );
                                },
                                leading: Icon(icons[index],
                                    size: 25, color: colour[index]),
                                title: Text("$key"),
                                trailing: IconButton(
                                    onPressed: () {
                                      Navigator.push(
                                        context,
                                        MaterialPageRoute(
                                          builder: (context) =>
                                              MyFunc(
                                                  catMap[key], key),
                                        ),
                                      );
                                    },
                                    icon: Icon(
                                      FontAwesomeIcons.chevronRight,
                                      color: PINK,
                                    )),
                              ),
                            );
                          },
                        );
                      }
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                    } else {
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
),

注意：如果要实现水平滚动卡片，除了修改scrollDirection，还需要给每个列表项设置固定宽度，否则水平方向无界约束会再次触发布局报错。

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