Flutter横向滚动ListView如何实现wrap content高度？

在Flutter中，横向滚动的ListView默认会试图占用父组件允许的最大垂直空间，直接放在Column里会触发布局溢出问题，因此必须固定高度才能正常显示。要实现高度自适应内容，可通过以下两种常用方法解决：

方法一：使用IntrinsicHeight包裹ListView #

IntrinsicHeight会强制子组件根据自身内容的高度确定尺寸，刚好适配横向ListView的需求。修改后的代码如下：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(""),
        ),
        body: Column(
          children: [
            Container(
              color: Colors.red,
              child: IntrinsicHeight(
                child: ListView.builder(
                  itemCount: 5,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (BuildContext context, int index) {
                    return Card(
                      color: Colors.amberAccent,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.0),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("$index"),
                      ),
                    );
                  },
                ),
              ),
            ),
            const Expanded(child: Text("Some other views")),
          ],
        ),
      ),
    );
  }
}

方法二：手动指定子项高度并传递给ListView #

如果明确知道子项的固定高度，可直接将该高度设置给ListView的父容器，同时开启shrinkWrap: true（横向滚动时shrinkWrap主要作用于宽度，结合固定子项高度可间接实现高度自适应）：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 子项的固定高度
  final double itemHeight = 60;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(""),
        ),
        body: Column(
          children: [
            Container(
              color: Colors.red,
              height: itemHeight,
              child: ListView.builder(
                itemCount: 5,
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  return SizedBox(
                    height: itemHeight,
                    child: Card(
                      color: Colors.amberAccent,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.0),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("$index"),
                      ),
                    ),
                  );
                },
              ),
            ),
            const Expanded(child: Text("Some other views")),
          ],
        ),
      ),
    );
  }
}

注意事项 #

• IntrinsicHeight会带来一定性能开销，因为它需要两次布局计算子组件高度。如果列表项数量较多或布局复杂，建议优先使用方法二手动指定高度。
• 确保Column中除自适应高度的ListView外，其他组件使用Expanded或Flexible占据剩余空间，避免布局溢出。

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