创建横向ListView遇渲染库报错：BoxConstraints强制无限宽度

我想创建一个scrollDirection为Axis.horizontal的ListView，但遇到了以下错误：

ListView - Exception caught by rendering library. The following assertion was thrown during performLayout(): BoxConstraints forces an infinite width

我的代码如下：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Categories'),
      ),
      body: FutureBuilder<List>(
        future: categories,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data![index].name),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => PostListScreen(
                            categoryId: snapshot.data![index].id,
                            categoryName: snapshot.data![index].name),
                      ),
                    );
                  },
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('${snapshot.error}'));
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }

问题原因及修复方案 #

• 问题根源：当ListView设置为水平滚动时，水平方向属于可滚动的无限空间，而ListTile是自适应宽度的组件，没有明确的宽度限制，渲染引擎无法确定它的宽度，因此抛出无限宽度的约束错误。

• 修复方法：给每个子项（这里是ListTile）设置明确的宽度约束，最简单的方式是用SizedBox包裹ListTile并指定宽度。

修改后的代码示例：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Categories'),
    ),
    body: FutureBuilder<List>(
      future: categories,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              // 用SizedBox给子项设置固定宽度，可根据需求调整数值
              return SizedBox(
                width: 150,
                child: ListTile(
                  title: Text(snapshot.data![index].name),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => PostListScreen(
                            categoryId: snapshot.data![index].id,
                            categoryName: snapshot.data![index].name),
                      ),
                    );
                  },
                ),
              );
            },
          );
        } else if (snapshot.hasError) {
          return Center(child: Text('${snapshot.error}'));
        }
        return const Center(child: CircularProgressIndicator());
      },
    ),
  );
}

另外，也可以选择不用ListTile，而是自定义一个带宽度的容器组件来承载内容，这样更适配水平列表的布局场景。

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