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 嗎？

樣本預期輸出：

Answer 1

我認為現在仍然不可能做到這一點。 您可以做的是將 2 個表並排放置以獲得您正在處理的結果，如下所示：

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

結果：

Answer 2

結果您使用行和列。 您必須定義行和列的統一（寬度和高度）。

    double unityWidth = 70;
    double unityHeight = 40;
    // 2 unity = two rows or columns merge
    return Scaffold(
      appBar: AppBar(
        title: Text("Merge Data Table"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                        color: Color(0xFFEEEEEE)
                      ),
                      child: Center(
                          child: Text('Items'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFEEEEEE)
                      ),
                      child: Center(
                        child: Text('Percent'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('Items 1'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('20%'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('Items 2'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('50%'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFEEEEEE)
                      ),
                      child: Center(
                        child: Text('Price'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFEEEEEE)
                      ),
                      child: Center(
                        child: Text('Other'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Container(
                      width: unityWidth*2,
                      margin: EdgeInsets.zero,
                      height: unityHeight*2,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('1888'),
                      ),
                    ),
                    Container(
                      width: unityWidth,
                      margin: EdgeInsets.zero,
                      height: unityHeight*2,
                      padding: const EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          border: Border.all(color: Color(0XFFBCBCBC)),
                          color: Color(0xFFFFFFFF)
                      ),
                      child: Center(
                        child: Text('20%'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ))
    );