如何让Flutter的GridView按子组件自身尺寸排列而非填充宽度？

GridView.count会根据crossAxisCount自动计算每列宽度（父容器宽度 ÷ 列数），并强制子组件填充该宽度，所以你设置的width会被覆盖。要让子组件保持自身尺寸排列，有两种常用方案：

方案一：使用Wrap组件（推荐，流式布局更贴合需求） #

Wrap会根据子组件自身尺寸自动换行，完全保留子组件的原始大小，同时可以通过参数控制间距：

Wrap(
  spacing: 16.0, // 子组件水平间距
  runSpacing: 16.0, // 子组件垂直间距
  children: [
    Container(
      width: 10,
      height: 10,
      color: Colors.amber,
    ),
    Container(
      width: 10,
      height: 10,
      color: Colors.blue,
    ),
    // 添加更多子组件
  ],
)

方案二：保留GridView，通过包裹组件限制子尺寸 #

如果你必须使用GridView，可以给每个子组件套一层Center或Align，让子组件在GridView分配的单元格内居中显示，从而保留自身尺寸：

GridView.count(
  controller: controller,
  shrinkWrap: true,
  crossAxisCount: 2,
  children: [
    Center(
      child: Container(
        width: 10,
        height: 10,
        color: Colors.amber,
      ),
    ),
    Center(
      child: Container(
        width: 10,
        height: 10,
        color: Colors.blue,
      ),
    ),
  ],
)

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