给ListView.builder添加scrollDirection: Axis.horizontal时应用崩溃求助

问题原因 #

外层ListView设置为Axis.horizontal水平滚动后，其子组件（Card）在水平方向缺乏明确的宽度约束；同时内层嵌套的ListView处于Column中，没有高度约束，这两个布局约束缺失会导致Flutter无法正确计算组件尺寸，最终引发应用崩溃。

解决方案 #

• 为水平ListView的子组件指定固定宽度，确保水平方向布局有明确边界
• 为内层垂直ListView设置固定高度，避免无限制扩展破坏布局

修正后的代码 #

return Scaffold(
  appBar: AppBar(),
  body: _users == null || _users!.isEmpty
      ? const Center(
          child: CircularProgressIndicator(),
        )
      : ListView.builder(
          physics: const AlwaysScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          primary: false,
          itemCount: _users.length,
          itemBuilder: (BuildContext ctxt, int i) {
            // 给Card设置固定宽度
            return SizedBox(
              width: 200,
              child: Card(
                child: Column(
                  children: [
                    Text(_users[i].name.toString()),
                    // 给内层ListView设置固定高度
                    SizedBox(
                      height: 150,
                      child: ListView.builder(
                        physics: const AlwaysScrollableScrollPhysics(),
                        shrinkWrap: true,
                        primary: false,
                        itemCount: _users[i].chart.length,
                        itemBuilder: (BuildContext ctx, int j) {
                          return Text(_users[i]
                              .chart[j]
                              .ch_timestamp); // display username as an example
                        },
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
);

额外说明 #

• 若需要内层ListView自适应高度但不超出父容器，可将固定高度的SizedBox替换为Expanded，但前提是Column的父组件（Card+外层SizedBox）有明确的高度约束。
• 水平滚动列表的子组件必须具备明确宽度，这是Flutter水平滚动布局的核心要求，否则框架无法确定每个列表项的水平占用空间。

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