Flutter中SimpleDialog内嵌ListView布局断言错误求助

错误原因 #

你遇到的'constraints.hasBoundedHeight'断言错误，本质是横向滚动的ListView需要父容器提供确定的宽度约束：

• 你给包裹ListView的Container设置了width: double.maxFinite，但SimpleDialog的宽度是自适应内容的，这个设置会导致父容器宽度无界；
• 同时primary: true在Dialog上下文里不合适，会干扰滚动布局逻辑。

修复步骤 #

1. 给ListView的父容器设置具体宽度（比如基于屏幕宽度的百分比），确保宽度约束明确；
2. 将ListView的primary属性改为false，避免和Dialog的导航器冲突；
3. 简化冗余的Column嵌套，减少布局层级。

修改后的代码示例 #

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      contentPadding: EdgeInsets.zero,
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('Athletes'),
            FutureBuilder<List<Presence>>(
              future: getPresencesByAthleteId(
                _athlete[i].department!.id,
                widget._team.teamKey!.teamId,
                _athlete[i].id,
                context,
              ),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.hasData) {
                  // 用MediaQuery设置具体宽度，替代double.maxFinite
                  final dialogWidth = MediaQuery.of(context).size.width * 0.8;
                  return Container(
                    height: 300,
                    width: dialogWidth,
                    child: ListView.builder(
                      shrinkWrap: true,
                      primary: false, // 修改为false
                      physics: const ClampingScrollPhysics(),
                      scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          title: Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                children: [
                                  Flexible(child: Text('${(index + 1).toString()}.')),
                                  Flexible(child: Text(snapshot.data[index].date)),
                                  Flexible(
                                    child: Text(
                                      snapshot.data[index].count.toString(),
                                      style: const TextStyle(color: Colors.blue),
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        );
                      },
                    ),
                  );
                } else if (snapshot.hasError) {
                  logger.e('${snapshot.error}');
                }
                return const Center(
                  heightFactor: 20,
                  child: CircularProgressIndicator.adaptive(),
                );
              },
            ),
          ],
        ),
      ],
    );
  },
);

额外说明 #

• 如果需要更灵活的宽度，可以用ConstrainedBox设置最小/最大宽度，比如ConstrainedBox(constraints: BoxConstraints(minWidth: 300, maxWidth: 500))；
• 横向ListView的高度由父容器的height:300确定，这个设置是正确的，保证了高度约束有界。

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