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"),
      ]),
 ]),

是否有一个支持rowpan和colspan的小部件？

示例预期输出：

Answer 1

我认为现在仍然无法真正做到这一点。但是，您可以做的是将两个表彼此相邻放置，以得到您正在处理的结果，如下所示：

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"),
                      ),
                    ]),
              ],
            ),
          ),
        ],
      ),

是否有一个小部件支持flutter中的rowpan和colspan？

1 个答案: