如何让水平滚动ListView的子组件占满父组件全部宽度？

要实现横向滚动的ListView中每个子组件占满ListView的全部宽度，同时ListView宽度基于其他组件动态确定，核心是先获取ListView的实际可用宽度，再将这个宽度同步给每个子项，具体实现如下：

关键实现思路 #

用LayoutBuilder获取父容器给ListView分配的动态宽度，然后通过ListView的itemExtent属性强制每个子项的宽度等于ListView的宽度，这样既能让子组件完全拉伸，又能实现横向切换时的整项滚动。

代码示例 #

LayoutBuilder(
  builder: (context, constraints) {
    // 提取ListView的实际可用宽度
    final listWidth = constraints.maxWidth;

    return ListView.builder(
      scrollDirection: Axis.horizontal,
      // 设置每个子项的宽度等于ListView的宽度
      itemExtent: listWidth,
      itemCount: 4,
      itemBuilder: (context, index) {
        return Container(
          width: double.infinity, // 或者直接用listWidth，效果一致
          color: index.isEven ? Colors.lightBlue : Colors.lightGreen,
          alignment: Alignment.center,
          child: Text('子项 ${index + 1}'),
        );
      },
    );
  },
)

额外优化建议 #

如果需要更流畅的页面切换体验，也可以用PageView替代ListView——PageView默认每个页面就会占满父组件宽度，同样可以用LayoutBuilder来约束它的动态宽度，代码逻辑更简洁：

LayoutBuilder(
  builder: (context, constraints) {
    return PageView.builder(
      itemCount: 4,
      itemBuilder: (context, index) {
        return Container(
          width: constraints.maxWidth,
          color: index.isEven ? Colors.orange : Colors.purple,
          alignment: Alignment.center,
          child: Text('页面 ${index + 1}'),
        );
      },
    );
  },
)

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