Flutter如何实现容器内溢出的3×3网格子组件居中对齐

• 黑色背景的Container容器内放置按3×3网格排布的图片组件
• 当前子组件允许溢出容器边界，需要将网格中2行2列位置的中间图片，对齐到容器的正中心位置

单个图片卡片组件：

Widget game() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: Image.network(
        imgUrl,
        fit: BoxFit.cover,
        color: Colors.black.withOpacity(0.3),
        colorBlendMode: BlendMode.darken,
        width: 200,
        height: 170,
      ),
    );
  }

单行图片组件：

Widget games() {
    return Wrap(
      direction: Axis.vertical,
      children: [
        Row(
          children: [
            game(),
            SizedBox(width: margin),
            game(),
            SizedBox(width: margin),
            game(),
          ],
        ),
      ],
    );
  }

外层容器构建代码：

@override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(15)),
      height: 400,
      child: Wrap(
        children: [
          Column(
            children: [
              games(),
              SizedBox(height: margin),
              games(),
              SizedBox(height: margin),
              games(),
              SizedBox(height: margin),
            ],
          ),
        ],
      ),
    );

现有写法的核心问题是嵌套了多余的Wrap组件，同时Row、Column默认会撑满父容器的可用空间，导致整个网格从容器左上角开始排布，无法让中间元素对齐容器中心。按如下修改即可实现需求：

1. 删掉所有冗余的Wrap嵌套，用Center组件包裹整个网格布局，让网格整体在容器内居中
2. 给Row、Column设置mainAxisSize: MainAxisSize.min，让行列只占用内容本身的尺寸，不强行撑满父容器
3. 删掉Column末尾多余的SizedBox，避免底部多出来空白导致网格整体上偏移

修改后的完整代码：

// 替换为你实际使用的margin数值
final double margin = 8;

Widget game() {
  return ClipRRect(
    borderRadius: BorderRadius.circular(15),
    child: Image.network(
      imgUrl,
      fit: BoxFit.cover,
      color: Colors.black.withOpacity(0.3),
      colorBlendMode: BlendMode.darken,
      width: 200,
      height: 170,
    ),
  );
}

Widget games() {
  return Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      game(),
      SizedBox(width: margin),
      game(),
      SizedBox(width: margin),
      game(),
    ],
  );
}

@override
Widget build(BuildContext context) {
  return Container(
    clipBehavior: Clip.hardEdge,
    decoration: BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(15)),
    height: 400,
    child: Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          games(),
          SizedBox(height: margin),
          games(),
          SizedBox(height: margin),
          games(),
        ],
      ),
    ),
  );
}

保留Container上的clipBehavior: Clip.hardEdge属性即可，网格超出容器范围的部分会自动被裁剪，中间的图片会始终固定在容器正中心位置。

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