如何实现无需指定高度的Flutter ListView.builder（动态高度适配）

问题根因 #

你当前的写法存在组件用法逻辑错误：

• 水平滚动的ListView.builder本身是单行滚动容器，本身不支持换行，嵌套在Wrap组件中也无法触发Wrap的换行规则
• 水平滚动类组件在无父组件明确尺寸约束的场景下，必然会抛出需要指定宽高的报错，完全不符合你要的自适应换行需求

正确实现方案 #

你要的自动换行标签流效果，不需要嵌套ListView.builder，直接通过Wrap动态生成子项即可，无需指定任何固定宽高，完全自适应内容尺寸换行：

Wrap(
  spacing: 12,
  runSpacing: 10,
  // 直接遍历分类数据生成所有标签项
  children: List.generate(movieDetail['genre'].length, (index) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: Container(
        color: darkGrayColor,
        padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
        child: Text(movieDetail['genre'][index], style: secondaryInfoText),
      ),
    );
  }),
)

补充说明 #

如果你的标签数量超过百级需要懒加载优化性能，可以使用 staggered 类网格布局组件配合滚动容器实现懒加载逻辑，普通数十条标签的业务场景下上述写法性能完全足够。

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