如何在Flutter中实现可自动换行的响应式相册列表？

Row组件本身是单行布局容器，无法自动换行，要实现你需要的响应式换行效果，推荐以下两种方案：

方案一：使用Wrap组件（最贴合需求） #

Wrap会自动根据可用空间调整子组件排列，空间不足时自动换行。只需把代码里的Row替换成Wrap，同时通过spacing（水平间距）和runSpacing（垂直间距）控制相册间距离，给每个相册设置宽度约束避免布局混乱。

修改后的核心代码 #

// 替换原有的Row部分
Wrap(
  spacing: 16, // 相册水平间距
  runSpacing: 16, // 行与行的垂直间距
  crossAxisAlignment: WrapCrossAlignment.start,
  children: _buildAlbumList(10),
)

调整相册布局（_buildAlbumList） #

给每个相册设置自适应宽度，同时优化封面和标题的显示：

List<Widget> _buildAlbumList(int n) {
  List<Widget> list = [];
  // 根据屏幕宽度动态计算相册宽度（每行4个，减去3个间距）
  final albumWidth = (MediaQuery.of(context).size.width - 3*16)/4;
  
  for (int i = 0; i < n; i++) {
    list.add(
      SizedBox(
        width: albumWidth,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.network(
              "cover.png",
              width: double.infinity,
              height: albumWidth, // 保持封面正方形
              fit: BoxFit.cover,
            ),
            const SizedBox(height: 8),
            const Text(
              "Title",
              textAlign: TextAlign.left,
              overflow: TextOverflow.ellipsis, // 标题过长时自动省略
            ),
          ],
        ),
      ),
    );
  }
  return list;
}

方案二：使用GridView组件（适合标准网格场景） #

如果相册是规整的网格样式，GridView可以自动处理行列布局和响应式适配：

GridView.count(
  shrinkWrap: true, // 适配Column父布局，避免滚动冲突
  physics: const NeverScrollableScrollPhysics(), // 禁用自身滚动（外层Column已处理滚动）
  crossAxisCount: 4, // 默认每行4个相册
  crossAxisSpacing: 16,
  mainAxisSpacing: 16,
  childAspectRatio: 1, // 保持封面正方形比例
  children: _buildAlbumList(10),
)

两种方案都能实现「空间不足时自动换行」的效果，可根据实际布局需求选择。

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