android - Flutter 中是否有支持 rowspan 和 colspan 的小部件？

Question

我正在尝试使用 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 吗？

样本预期输出：

标签： androidiosflutterdart

Answer 1

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

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: Text("1111111111111111111111111111111111111111111"),
                      ),
                      Container(
                        color: Colors.red,
                        width: 50.0,
                        height: 50.0,
                        child: Text("2"),
                      ),
                    ]),
                TableRow(
                    children: [
                      Container(
                        color: Colors.deepPurple,
                        width: 50.0,
                        height: 50.0,
                        child: Text("5"),
                      ),
                      Container(
                        color: Colors.cyan,
                        width: 50.0,
                        height: 50.0,
                        child: Text("6"),
                      ),
                    ]),
                TableRow(
                    children: [
                      Container(
                        color: Colors.amberAccent,
                        width: 50.0,
                        height: 50.0,
                        child: Text("7"),
                      ),
                      Container(
                        color: Colors.black87,
                        width: 50.0,
                        height: 50.0,
                        child: Text("8"),
                      ),
                    ]),
              ],
            ),
          ),
          Container(
            width: 100.0,
            color: Colors.cyan,
            child: Table(
              columnWidths: {
                1: FractionColumnWidth(.3),
              },
              children: [
                TableRow(
                    children: [
                      Container(
                        color: Colors.green,
                        width: 50.0,
                        height: 50.0,
                        child: Text("1111111111111111111111111111111111111111111"),
                      ),
                      Container(
                        color: Colors.red,
                        width: 50.0,
                        height: 50.0,
                        child: Text("2"),
                      ),
                    ]),
                TableRow(
                    children: [
                      Container(
                        color: Colors.deepPurple,
                        width: 50.0,
                        height: 100.0,
                        child: Text("5"),
                      ),
                      Container(
                        color: Colors.cyan,
                        width: 50.0,
                        height: 100.0,
                        child: Text("6"),
                      ),
                    ]),
              ],
            ),
          ),
        ],
      ),