Flutter中如何实现整行与ListView.builder滚动并修正UI布局？

核心问题定位 #

1. 重复渲染：外层的for循环会遍历所有分类，每次循环都生成一个完整的ListView.builder（其itemCount是分类总长度），导致每个分类项都对应一个全量的分类列表，造成重复渲染。
2. 滚动异常：多个ListView嵌套且未统一滚动容器，加上Flexible的布局分配，导致滚动事件冲突，无法正常滚动。

修正步骤与代码实现 #

1. 调整布局结构，统一滚动容器

用SingleChildScrollView作为外层容器，实现整体页面滚动，避免内部列表滚动冲突。

2. 移除冗余外层循环

将分类的遍历逻辑合并到单个ListView.builder的itemBuilder中，每个列表项对应一个分类，解决重复渲染问题。

3. 优化内部列表属性

给内部ListView设置shrinkWrap: true（让列表自适应内容高度）和physics: NeverScrollableScrollPhysics()（禁用内部滚动，交给外层容器处理）。

4. 修正索引与数量逻辑

如果每个分类对应独立的选中数量，将全局_qty改为数组存储；若为全局统一数量，保持原变量即可。

完整修正代码 #

状态初始化（若分类独立计数）

class _YourState extends State<YourWidget> {
  List<int> _categoryQty = [];

  @override
  void initState() {
    super.initState();
    // 初始化每个分类的选中数量为0
    _categoryQty = List.filled(widget.menuItem.category.length, 0);
  }

主布局代码

SingleChildScrollView(
  child: Column(
    children: [
      Flexible(
        flex: 6,
        child: ListView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: widget.menuItem.category.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: EdgeInsets.only(left: 16, right: 16, bottom: 4),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    child: Text('Select ' + widget.menuItem.category[index]),
                    padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
                  ),
                  Container(
                    child: Text('Select ' +
                        _categoryQty[index].toString() +
                        ' item (' +
                        _categoryQty[index].toString() +
                        '/' +
                        widget.menuItem.setMenuItems.length.toString() +
                        ')'),
                    padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
                  ),
                ],
              ),
            );
          },
        ),
      ),
      _buildSetMenusView(setMenuItems: widget.menuItem.setMenuItems),
    ],
  ),
)

修正后的_buildSetMenusView函数

_buildSetMenusView({List<MenuItem> setMenuItems}) {
  return Flexible(
    flex: 12,
    child: ListView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: setMenuItems.length,
      itemBuilder: (BuildContext context, int index) {
        final isSelected = _selectedVariants.contains(setMenuItems[index]);
        return Padding(
          padding: EdgeInsets.only(left: 16, right: 16, bottom: 4),
          child: _buildSetMenuItemButton(
              setMenuItem: setMenuItems[index], isSelected: isSelected),
        );
      },
    ),
  );
}

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