Flutter使用SizedBox嵌套组件时无法设置水平ListView滚动的问题求助

问题原因 #

你遇到的报错核心是两个问题：

1. Slider1LocalPage 内部嵌套了页面级组件 Scaffold，作为嵌入其他页面的子组件不需要Scaffold，会导致约束传递异常。
2. 水平滚动的ListView子项没有指定明确宽度，水平方向滚动场景下父容器没有宽度上限，使用默认自适应宽度的ListTile会触发布局无界报错。

完整修改方案 #

1. 主页面代码无需调整，你现有main.dart的body部分逻辑是正常的

2. 修改Slider1LocalPage的实现代码，修改后如下：

class Slider1LocalPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FutureBuilder<List<Record>>(
    future: List1Api.getList1Locally(context),
    builder: (context, snapshot) {
      final records = snapshot.data;

      switch (snapshot.connectionState) {
        case ConnectionState.waiting:
          return Center(child: CircularProgressIndicator());
        default:
          if (snapshot.hasError) {
            return Center(child: Text('Some error occurred!'));
          } else {
            return buildList1(records);
          }
      }
    },
  );

  Widget buildList1(List<Record> records) => ListView.builder(
    physics: BouncingScrollPhysics(),
    // 新增水平滚动配置
    scrollDirection: Axis.horizontal,
    itemCount: records.length,
    itemBuilder: (context, index) {
      final record = records[index];
      // 替换原有ListTile，给每个滚动项指定明确宽度，自定义布局效果和原有ListTile一致
      return GestureDetector(
        onTap: () => Navigator.of(context).push(MaterialPageRoute(
          builder: (BuildContext context) => ContentPage(record: record),
        )),
        // 自定义每个项的宽度，可根据需求调整
        child: Container(
          width: 280,
          margin: EdgeInsets.symmetric(horizontal: 8, vertical: 12),
          padding: EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            boxShadow: const [
              BoxShadow(color: Colors.black12, blurRadius: 2)
            ]
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(record.urlAvatar),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Text(
                      record.title1,
                      style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  )
                ],
              ),
              const SizedBox(height: 8),
              Expanded(
                child: Text(
                  record.content1,
                  style: TextStyle(fontSize: 14, color: Colors.grey[600]),
                  maxLines: 3,
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          ),
        ),
      );
    },
  );
}

布局逻辑说明 #

• 嵌套滚动规则：父级是垂直滚动的SingleChildScrollView，子级是水平滚动的ListView，只要给子滚动组件明确的宽高约束就不会产生滚动冲突，你外层给的SizedBox(height: 260.0)已经满足高度约束要求。
• 约束传递逻辑：Flutter布局是约束向下传递，尺寸向上返回。水平滚动的ListView在水平方向的父约束是无限大，所以子项必须明确指定宽度，否则无法确定尺寸就会触发无界报错。
• 组件使用边界：Scaffold是用于完整页面的根组件，会自动适配窗口尺寸，嵌套在子组件中会破坏上层传递的约束，导致布局异常，嵌入其他页面的业务子组件不要使用Scaffold包裹。

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