如何实现具有动态高度的水平滚动ListView？

嘿，这个场景我太熟悉了！水平滚动的ListView默认会撑满父容器的高度，一旦列表项里的文本换行，固定高度要么截断内容要么留空，确实闹心。给你两个实用的解决方案：

方案1：用IntrinsicHeight让高度自适应子项 #

这是最省心的方法，IntrinsicHeight组件会自动测量子元素的实际高度，让ListView刚好适配最高的那个列表项，完全不用手动设置固定高度。修改你的代码如下：

Widget build(BuildContext context) {
  return SafeArea(
    child: IntrinsicHeight(
      child: Container(
        color: Colors.green,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(8),
          itemCount: itensFilter.length,
          itemBuilder: (BuildContext context, int index) {
            return ItemFilter(
              text: itensFilter[index],
              index: index,
            );
          },
        ),
      ),
    ),
  );
}

注意事项 #

要确保你的ItemFilter组件里的文本是可以自然换行的，比如在ItemFilter的Text组件中设置softWrap: true，或者用Wrap包裹文本，这样文本换行后才能撑开高度，IntrinsicHeight才能准确测量。

方案2：手动计算最大高度（性能敏感场景） #

如果你的列表项特别多，担心IntrinsicHeight的重复测量会影响性能，可以预先计算所有列表项的最大高度，然后用SizedBox给ListView指定高度。比如：

// 先实现一个计算最大高度的方法
double calculateMaxItemHeight(List<String> items) {
  // 这里可以根据文本内容、字体大小、约束宽度等计算高度
  // 示例：假设每个ItemFilter的宽度固定，文本样式已知
  const double itemWidth = 120;
  const TextStyle textStyle = TextStyle(fontSize: 14);
  
  double maxHeight = 0;
  for (var text in items) {
    final textPainter = TextPainter(
      text: TextSpan(text: text, style: textStyle),
      maxLines: null,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: itemWidth);
    final height = textPainter.size.height;
    if (height > maxHeight) maxHeight = height;
  }
  // 加上ItemFilter的内边距、边框等额外高度
  return maxHeight + 16; // 假设上下内边距各8
}

// 然后在build里使用
Widget build(BuildContext context) {
  final maxItemHeight = calculateMaxItemHeight(itensFilter);
  
  return SafeArea(
    child: Container(
      color: Colors.green,
      child: SizedBox(
        height: maxItemHeight,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(8),
          itemCount: itensFilter.length,
          itemBuilder: (BuildContext context, int index) {
            return ItemFilter(
              text: itensFilter[index],
              index: index,
            );
          },
        ),
      ),
    ),
  );
}

这种方法需要自己处理高度计算，虽然麻烦一点，但性能更好，适合大数据量的列表。

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