Flutter如何实现类似Windows资源管理器的固定单元格自适应网格视图？

在Flutter中可以通过两种方式实现类似Windows资源管理器的网格视图——既保持单元格固定尺寸，又能随容器宽度自动调整每行容纳的项数：

方案一：用Wrap组件快速实现 #

Wrap本身就具备自动换行、根据子项尺寸适配每行数量的特性，只需给子项设置固定宽高即可：

class FixedSizeGrid extends StatelessWidget {
  // 固定单元格尺寸
  final double itemSize = 120;
  // 单元格间距
  final double spacing = 8;

  final List<String> items = List.generate(20, (index) => 'Item $index');

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(spacing),
      child: Wrap(
        spacing: spacing, // 水平间距
        runSpacing: spacing, // 垂直间距
        children: items.map((item) {
          return Container(
            width: itemSize,
            height: itemSize,
            color: Colors.grey[200],
            alignment: Alignment.center,
            child: Text(item),
          );
        }).toList(),
      ),
    );
  }
}

• 容器宽度变化时，Wrap会自动重新计算每行可容纳的单元格数量，自动换行
• 单元格尺寸始终固定，不会随容器缩放
• 外层包裹SingleChildScrollView可实现垂直滚动

方案二：用GridView动态计算列数（强制列对齐） #

如果需要确保每行单元格数量严格一致（避免出现半列的情况），可以通过LayoutBuilder获取容器宽度，动态计算GridView的列数：

class AlignedFixedSizeGrid extends StatelessWidget {
  final double itemSize = 120;
  final double spacing = 8;
  final List<String> items = List.generate(20, (index) => 'Item $index');

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 计算每行最大可容纳的单元格数
        int crossAxisCount = ((constraints.maxWidth + spacing) / (itemSize + spacing)).floor();
        // 确保至少显示1列
        crossAxisCount = crossAxisCount < 1 ? 1 : crossAxisCount;

        return GridView.count(
          padding: EdgeInsets.all(spacing),
          crossAxisCount: crossAxisCount,
          crossAxisSpacing: spacing,
          mainAxisSpacing: spacing,
          children: items.map((item) {
            return Container(
              width: itemSize,
              height: itemSize,
              color: Colors.grey[200],
              alignment: Alignment.center,
              child: Text(item),
            );
          }).toList(),
        );
      },
    );
  }
}

• 结合了GridView的列对齐特性，每行单元格数量完全一致
• 容器宽度变化时自动更新列数，单元格尺寸保持固定

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