Flutter：如何在水平SingleChildScrollView中嵌入垂直ListView.builder实现高效双向滚动

问题原因 #

原嵌套SingleChildScrollView的方案在数据量大时性能下滑，改用ListView.builder优化垂直方向按需构建后布局异常，核心原因是：外层水平滚动的SingleChildScrollView无法正确识别内部ListView.builder的实际宽度，导致每行内容被压缩截断。

解决方案 #

给ListView.builder包裹一个固定宽度的SizedBox（宽度等于每行子项的总宽度），让水平滚动容器能感知到需要滚动的范围，同时ListView.builder负责垂直方向的按需构建，兼顾性能和布局正确性。

修改后的代码 #

Scaffold(
  body: Center(
    child: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        color: Colors.white,
        width: 500,
        height: 500,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          // 包裹ListView.builder，设置宽度为每行的总宽度
          child: SizedBox(
            width: 900, // 与每行子项宽度总和（300*3）一致
            child: ListView.builder(
              itemBuilder: (context, index) {
                return Row(
                  children: [
                    SizedBox(width: 300, child: Text("1")),
                    SizedBox(width: 300, child: Text("2")),
                    SizedBox(width: 300, child: Text("3")),
                  ],
                );
              },
              itemCount: 100,
            ),
          ),
        ),
      ),
    ),
  ),
)

关键说明 #

• SizedBox的宽度必须与每行所有子项的宽度总和一致，确保水平滚动能完整显示每行内容。
• 无需设置shrinkWrap: true，外层容器有固定高度，ListView.builder会自动适配高度并启用垂直滚动。
• ListView.builder仅构建当前可见的行，大量数据下性能远优于Column+SingleChildScrollView的组合。

如果每行宽度不固定，不建议使用IntrinsicWidth（会遍历所有子项计算宽度，抵消ListView.builder的性能优势），最好提前计算或固定每行宽度。

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