Flutter嵌套ListView.separated问题：绿色Container宽度超出设置值

问题出在内层的ListView.separated上——你没指定它的滚动方向为横向，默认是纵向布局，所以子组件会被强制拉伸填满横向空间，哪怕你给SizedBox设了width:30也无效。

修改方案 #

给内层ListView.separated添加scrollDirection: Axis.horizontal属性，同时如果不需要内层横向滚动的话，可以加上physics: NeverScrollableScrollPhysics()避免嵌套滚动冲突：

Widget PlanDetails(context,index) => Padding(
    padding: const EdgeInsets.all(20),
    child: Align(
      alignment: Alignment.topLeft,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('Week ${index+1} | 0 Days'),
          SizedBox(height: 20,),
          ListView.separated(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal, // 指定横向排列
            physics: NeverScrollableScrollPhysics(), // 可选：禁止内层滚动，避免嵌套冲突
            itemBuilder: (context,index) => DaysDetails(context,index),
            separatorBuilder: (context,index) => SizedBox(width: 10,),
            itemCount: 3
          ),
        ],
      ),
    ),
  );

关键点说明 #

• scrollDirection: Axis.horizontal是核心：让内层列表横向排列，子组件的宽度设置才会生效
• physics: NeverScrollableScrollPhysics()：如果外层已经是可滚动的ListView，加上这个可以防止内层列表触发滚动，提升交互体验

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