Flutter ListViewBuilder内图片超出屏幕宽度时如何实现自动换行

• 组件选型和需求完全错位：使用scrollDirection: Axis.horizontal的横向ListView.builder，这类组件天生沿横向无限排布子项，不具备自动换行能力，是图片超出宽度被截断的核心原因
• Wrap组件使用逻辑错误：将direction: Axis.vertical的Wrap套在单张图片外作为ListView的子项。Wrap的自动换行能力需要自身持有多个子组件、排布时超出自身宽度才会触发，单个子组件的Wrap根本不会触发换行逻辑，这也是之前尝试Wrap调整未生效的根本原因

移除原有横向滚动结构，用Wrap作为图片排布的核心容器实现自动换行，搭配纵向滚动容器解决内容溢出的问题，调整后代码如下：

Expanded(
  child: ReusableCard(
    colour: Colors.green,
    cardChild: ListView(
      children: [
        Wrap(
          direction: Axis.horizontal,
          spacing: 8, // 图片间横向间距
          runSpacing: 8, // 行与行的纵向间距
          children: cardBrain.mycards.map((cardData) {
            return Image(
              height: 40,
              width: 55,
              image: AssetImage(cardData.image),
            );
          }).toList(),
        ),
      ],
    ),
  ),
)

如果卡片图片数量较多（超过50张），直接全量传入Wrap会产生不必要的性能损耗，可替换为支持懒加载的GridView实现完全相同的换行效果，代码示例：

Expanded(
  child: ReusableCard(
    colour: Colors.green,
    child: GridView.builder(
      padding: EdgeInsets.all(8),
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 63, // 匹配图片宽度+间距的尺寸
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        childAspectRatio: 55 / 40, // 匹配图片本身宽高比避免拉伸变形
      ),
      itemCount: cardBrain.mycards.length,
      itemBuilder: (context, i) => Image(
        image: AssetImage(cardBrain.mycards[i].image),
      ),
    ),
  ),
)

实现效果完全匹配预期：图片沿横向排布，排满容器最大宽度后自动换行，无截断问题，图片总高度超出屏幕时可纵向滚动查看全部内容。

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