如何在Flutter中实现多行多列文本及行列网格文本对齐？

一、制作多行多列文本 #

根据场景需求，推荐两种常用实现方式：

1. GridView组件（动态网格） #

如果多行多列文本来自动态数据源（比如数组列表），用GridView.count或GridView.builder可以快速生成自适应网格：

GridView.count(
  crossAxisCount: 3, // 设置列数
  padding: EdgeInsets.all(16),
  mainAxisSpacing: 8, // 行间距
  crossAxisSpacing: 8, // 列间距
  children: [
    Text("第一行第一列"),
    Text("第一行第二列"),
    Text("第一行第三列"),
    Text("第二行第一列"),
    Text("第二行第二列"),
    Text("第二行第三列"),
    // 按需添加更多文本项
  ],
)

2. Table组件（固定表格） #

如果是类似示例的固定行列规整布局，Table能精准控制每一行的结构，适合静态表格场景：

Table(
  border: TableBorder.all(color: Colors.grey.shade300), // 可选：添加表格边框
  children: [
    TableRow(
      children: [Text("表头1"), Text("表头2"), Text("表头3")],
    ),
    TableRow(
      children: [Text("内容1-1"), Text("内容1-2"), Text("内容1-3")],
    ),
    // 按需添加更多行
  ],
)

二、实现行列网格的文本对齐 #

针对不同组件，对齐方式如下：

1. GridView中的文本对齐 #

通过包裹Align组件，或利用Container的alignment属性控制文本位置：

GridView.count(
  crossAxisCount: 3,
  children: [
    Align(
      alignment: Alignment.centerLeft,
      child: Text("左对齐文本"),
    ),
    Align(
      alignment: Alignment.center,
      child: Text("居中文本"),
    ),
    Align(
      alignment: Alignment.centerRight,
      child: Text("右对齐文本"),
    ),
  ],
)

也可直接设置Text的textAlign属性，但需给Text指定宽度才能生效：

Container(
  width: double.infinity,
  child: Text(
    "右对齐文本",
    textAlign: TextAlign.right,
  ),
)

2. Table中的文本对齐 #

使用TableCell的alignment属性，直接控制单元格内文本的对齐方向：

Table(
  border: TableBorder.all(color: Colors.grey.shade300),
  children: [
    TableRow(
      children: [
        TableCell(
          alignment: Alignment.centerLeft,
          child: Text("左对齐表头"),
        ),
        TableCell(
          alignment: Alignment.center,
          child: Text("居中表头"),
        ),
        TableCell(
          alignment: Alignment.centerRight,
          child: Text("右对齐表头"),
        ),
      ],
    ),
    TableRow(
      children: [
        TableCell(
          alignment: Alignment.centerLeft,
          child: Text("左对齐内容"),
        ),
        TableCell(
          alignment: Alignment.center,
          child: Text("居中内容"),
        ),
        TableCell(
          alignment: Alignment.centerRight,
          child: Text("右对齐内容"),
        ),
      ],
    ),
  ],
)

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