咨询Flutter中类似CSS Grid的复杂动态网格布局实现方案

Flutter原生并没有提供完全对标CSS Grid的开箱即用组件，但通过以下几种方案可以实现你需要的二维数组式定位布局：

1. 使用第三方包 flutter_layout_grid #

这是专门为Flutter打造的类CSS Grid布局库，完美支持行列定义、网格单元定位、跨行列合并等特性，灵活性完全能匹配你的需求。

核心用法示例：

LayoutGrid(
  // 定义网格列尺寸，类似CSS的grid-template-columns
  columnSizes: [1.fr, 2.fr, 1.fr],
  // 定义网格行尺寸，类似CSS的grid-template-rows
  rowSizes: [1.fr, 1.fr, 2.fr],
  children: [
    // 定位到第1行第1列，跨2行1列
    GridPlacement(
      rowStart: 0,
      rowSpan: 2,
      columnStart: 0,
      child: Container(color: Colors.red),
    ),
    // 定位到第1行第2列，跨1行2列
    GridPlacement(
      rowStart: 0,
      columnStart: 1,
      columnSpan: 2,
      child: Container(color: Colors.blue),
    ),
    // 其他组件按需求定位
  ],
)

你可以把布局数据（每个组件的行列位置、跨度）存在二维数组或列表中，遍历生成对应的GridPlacement组件，实现动态布局。

2. 原生组件 CustomMultiChildLayout #

如果不想依赖第三方包，可以用Flutter原生的CustomMultiChildLayout来手动控制每个子组件的布局逻辑。

步骤大概是：

• 定义LayoutDelegate，在其中计算网格的行列尺寸（比如基于屏幕宽度均分或按比例分配）
• 为每个子组件指定布局ID，在performLayout方法中根据组件的网格索引计算其位置和大小
• 把所有子组件传入CustomMultiChildLayout完成布局

示例简化版：

class GridLayoutDelegate extends MultiChildLayoutDelegate {
  final List<GridItem> items;
  final int columns;
  final double spacing;

  GridLayoutDelegate({required this.items, required this.columns, this.spacing = 8.0});

  @override
  void performLayout(Size size) {
    final double columnWidth = (size.width - spacing * (columns - 1)) / columns;
    for (var item in items) {
      final double x = (item.columnIndex * (columnWidth + spacing));
      final double y = (item.rowIndex * (columnWidth + spacing)); // 可自定义行高逻辑
      final Size childSize = Size(
        columnWidth * item.columnSpan,
        columnWidth * item.rowSpan,
      );
      layoutChild(item.id, BoxConstraints.tight(childSize));
      positionChild(item.id, Offset(x, y));
    }
  }

  @override
  bool shouldRelayout(covariant GridLayoutDelegate oldDelegate) {
    return items != oldDelegate.items || columns != oldDelegate.columns;
  }
}

// 使用时
CustomMultiChildLayout(
  delegate: GridLayoutDelegate(items: gridItems, columns: 3),
  children: gridItems.map((item) {
    return LayoutId(
      id: item.id,
      child: item.widget,
    );
  }).toList(),
)

这种方式完全自定义，能实现任何你需要的网格逻辑，适合高度定制的场景。

3. 备选方案：Stack + Positioned（适合简单场景） #

如果你的网格布局结构相对固定，也可以用Stack结合Positioned组件手动定位每个子元素，但这种方式在动态生成大量组件时维护成本较高，不如前两种方案灵活。

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