寻求Flutter支持跨列的表格组件：替代Android TableLayout的layout_span功能

Flutter原生Table组件其实支持跨列功能，同时能自动处理单元格间的共享边框，无需手动叠加边框。你之前遇到的行长度错误，是因为没正确使用跨列配置，而非组件本身不支持该功能。

原生Table实现跨列的核心要点 #

• 提前规划表格总列数，所有行的单元格逻辑列数总和（含跨列）需与总列数一致，避免出现行长度异常错误
• 给需要跨列的单元格设置TableCell(columnSpan: 跨列数, child: 子组件)，指定该单元格跨越的列数
• 通过Table.border配置统一边框样式，实现单元格间的共享边框

示例代码 #

Table(
  border: TableBorder.all(color: Colors.grey, width: 1), // 配置共享边框
  columnWidths: const {
    0: FixedColumnWidth(100),
    1: FixedColumnWidth(100),
    2: FixedColumnWidth(100),
  },
  children: [
    // 第一行：3个普通单元格
    TableRow(
      children: [
        TableCell(child: Container(padding: EdgeInsets.all(8), child: Text("单元格1"))),
        TableCell(child: Container(padding: EdgeInsets.all(8), child: Text("单元格2"))),
        TableCell(child: Container(padding: EdgeInsets.all(8), child: Text("单元格3"))),
      ],
    ),
    // 第二行：单个单元格跨3列
    TableRow(
      children: [
        TableCell(
          columnSpan: 3,
          child: Container(
            padding: EdgeInsets.all(8),
            alignment: Alignment.centerLeft,
            child: Text("跨3列的单元格"),
          ),
        ),
      ],
    ),
    // 第三行：第二个单元格跨2列
    TableRow(
      children: [
        TableCell(child: Container(padding: EdgeInsets.all(8), child: Text("单元格A"))),
        TableCell(
          columnSpan: 2,
          child: Container(
            padding: EdgeInsets.all(8),
            alignment: Alignment.centerLeft,
            child: Text("跨2列的单元格"),
          ),
        ),
      ],
    ),
  ],
)

注意事项 #

• 如果不需要固定列宽，可以去掉columnWidths参数，让系统根据内容自动分配宽度
• 可通过TableBorder.symmetric等构造函数定制边框样式，比如只显示内部边框或外部边框
• 确保所有行的逻辑列数统一，比如总列数为3时，跨3列的单元格等价于3个普通单元格的宽度占比

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