Flutter新手如何使用Row实现带30边距的类矩阵3*3容器布局

要实现基于Row+Column的3*3容器布局，逻辑很简单：

• 外层用1个Row承载3个Column，对应矩阵的3列
• 每个Column内部放置3个Container，对应矩阵的3行
• 给所有Container统一设置margin: EdgeInsets.all(30)即可满足边距要求

你当前的代码有两处可修正的点：

1. 每个Column内仅第一个元素是Container，后两个为Text组件，不符合3*3全容器的要求
2. 第二个Column内的Container的BoxDecoration缺少闭合括号，存在语法错误

以下是可直接运行的完整示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("3*3矩阵布局"),
        ),
        // 外层Row承载3列
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 第一列
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                buildContainer('1'),
                buildContainer('2'),
                buildContainer('3'),
              ],
            ),
            // 第二列
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                buildContainer('4'),
                buildContainer('5'),
                buildContainer('6'),
              ],
            ),
            // 第三列
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                buildContainer('7'),
                buildContainer('8'),
                buildContainer('9'),
              ],
            ),
          ],
        ),
      ),
    );
  }

  // 封装公共的Container方法，避免重复代码
  Container buildContainer(String text) {
    return Container(
      padding: const EdgeInsets.all(30),
      margin: const EdgeInsets.all(30), // 要求的30margin
      width: 50,
      height: 50,
      decoration: const BoxDecoration(color: Colors.blue),
      child: Center(
        child: Text(
          text,
          style: const TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }
}

如果运行时出现布局溢出提示，可在Row外层套一层SingleChildScrollView组件增加滚动能力，或适当缩小Container的宽高和margin值适配屏幕尺寸。

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