flutter 中是否有支持 rowspan 和 colspan 的小部件？

Question

我正在尝试使用小部件在 flutter 中创建一个Table表格，但我找不到合并其单元格的方法。

Table(
  border: TableBorder.all(color: Colors.red),
  children: [
    TableRow(
      children: [
        Text("item 1"),
        Text("item 2"),
      ],
    ),
    TableRow(
      children: [
        Text("item 3"),
        Text("item 4"),
      ],
    ),
  ],
),

是否有支持 rowspan 和 colspan 的 Widget？

预期输出：

Answer 1

我认为现在还不太可能做到这一点。不过，您可以做的是将两个表并排放置以获得您正在处理的结果，如下所示：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Scaffold(body: Example())));
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          width: 100.0,
          color: Colors.cyan,
          child: Table(
            children: [
              TableRow(children: [
                Container(
                  color: Colors.green,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("1111111111111111111111111111111111111111111"),
                ),
                Container(
                  color: Colors.red,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("2"),
                ),
              ]),
              TableRow(children: [
                Container(
                  color: Colors.deepPurple,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("5"),
                ),
                Container(
                  color: Colors.cyan,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("6"),
                ),
              ]),
              TableRow(children: [
                Container(
                  color: Colors.amberAccent,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("7"),
                ),
                Container(
                  color: Colors.black87,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("8"),
                ),
              ]),
            ],
          ),
        ),
        Container(
          width: 100.0,
          color: Colors.cyan,
          child: Table(
            columnWidths: const {
              1: FractionColumnWidth(.3),
            },
            children: [
              TableRow(children: [
                Container(
                  color: Colors.green,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("1111111111111111111111111111111111111111111"),
                ),
                Container(
                  color: Colors.red,
                  width: 50.0,
                  height: 50.0,
                  child: const Text("2"),
                ),
              ]),
              TableRow(children: [
                Container(
                  color: Colors.deepPurple,
                  width: 50.0,
                  height: 100.0,
                  child: const Text("5"),
                ),
                Container(
                  color: Colors.cyan,
                  width: 50.0,
                  height: 100.0,
                  child: const Text("6"),
                ),
              ]),
            ],
          ),
        ),
      ],
    );
  }
}

结果：