Flutter如何创建包含不同宽度Widget的网格视图？

为什么GridView无法满足需求 #

GridView的核心布局代理（SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent）都是基于固定列数或固定最大宽度的均分逻辑，无法让子Widget根据自身内容自适应宽度。

推荐方案一：使用Wrap组件（适配流式可变宽场景，如标签云） #

Wrap会自动根据子Widget的实际宽度换行，完美支持不同宽度的子元素，代码示例：

Wrap(
  spacing: 8.0, // 子元素水平间距
  runSpacing: 8.0, // 行与行的垂直间距
  children: [
    Container(width: 120, height: 80, color: Colors.blue, child: Center(child: Text('宽120'))),
    Container(width: 80, height: 80, color: Colors.red, child: Center(child: Text('宽80'))),
    Container(width: 150, height: 80, color: Colors.green, child: Center(child: Text('宽150'))),
    Container(width: 90, height: 80, color: Colors.yellow, child: Center(child: Text('宽90'))),
  ],
)

推荐方案二：自定义SliverGridDelegate/第三方包（适配不规则网格，类似Pinterest风格） #

如果需要类似参考图的多行不规则宽高网格，可自定义SliverGridDelegate，或直接使用成熟第三方包flutter_staggered_grid_view：

1. 先在pubspec.yaml添加依赖：

dependencies:
  flutter_staggered_grid_view: ^0.6.2

2. 使用示例：

StaggeredGridView.count(
  crossAxisCount: 4, // 布局基准列数
  staggeredTiles: [
    StaggeredTile.count(2, 1), // 占2列宽、1行高
    StaggeredTile.count(1, 2), // 占1列宽、2行高
    StaggeredTile.count(1, 1),
    StaggeredTile.count(2, 2),
  ],
  children: [
    Container(color: Colors.blue, child: Center(child: Text('宽2列'))),
    Container(color: Colors.red, child: Center(child: Text('宽1列'))),
    Container(color: Colors.green, child: Center(child: Text('宽1列'))),
    Container(color: Colors.yellow, child: Center(child: Text('宽2列'))),
  ],
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
)

方案三：Rows + Columns（手动控制固定结构布局） #

如果布局结构固定，可手动用Row嵌套Column，通过Expanded的flex属性分配宽度：

Column(
  children: [
    Row(
      children: [
        Expanded(flex: 2, child: Container(height: 80, color: Colors.blue, child: Center(child: Text('占2份')))),
        Expanded(flex: 1, child: Container(height: 80, color: Colors.red, child: Center(child: Text('占1份')))),
      ],
    ),
    SizedBox(height: 8),
    Row(
      children: [
        Expanded(flex: 1, child: Container(height: 80, color: Colors.green, child: Center(child: Text('占1份')))),
        Expanded(flex: 3, child: Container(height: 80, color: Colors.yellow, child: Center(child: Text('占3份')))),
      ],
    ),
  ],
)

场景总结 #

• 流式可变宽（如标签云、动态内容块）：优先用Wrap
• 不规则网格（多列宽高混合）：用自定义SliverGridDelegate或第三方包flutter_staggered_grid_view
• 固定结构的布局：用Rows + Columns

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