如何在颤动中设置数据表的样式？

Question

我想知道您是否可以使用 Flutter 中的 DataTable 小部件制作类似我设计的东西？

https://i.stack.imgur.com/SaHBj.png

Answer 1

要实现这一点，您必须使用下面的 Container 和 Table。

1. 在下面的代码中，我只是用 Container 小部件覆盖了表格，并赋予装饰属性以使半径超过表格的边框。
2. 然后只需将表格边框设置为仅内部，这样它就不会显示已被容器覆盖的外部边框。
3. 最后设置第一个 TableRow(Header) 小部件的装饰属性。

您可以从以下位置访问示例代码 here too.

Container(
              decoration: BoxDecoration(
                border: Border.all(
                  width: 1,
                ),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Table(
                // border: TableBorder.all(
                //     color: Colors.black, width: 1.0, style: BorderStyle.solid),
                border: TableBorder.symmetric(
                    inside: BorderSide(width: 2, color: Colors.black)),
                defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                columnWidths: {
                  0: FlexColumnWidth(4),
                  1: FlexColumnWidth(1),
                },
                children: [
                  TableRow(
                      decoration: BoxDecoration(
                        color: Colors.blue[100],
                        border: Border.all(
                          width: 1,
                        ),
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10),
                            topRight: Radius.circular(10)),
                      ),
                      children: [
                    Text("Bowler", textScaleFactor: 1),
                    Text(
                      "OVR",
                      textScaleFactor: 1,
                      textAlign: TextAlign.center,
                    ),
                  ]),
                  TableRow(children: [
                    Text(score.bowler.name, textScaleFactor: 1),
                    Text(
                      score.bowler.overs.toString(),
                      textScaleFactor: 1,
                      textAlign: TextAlign.center,
                    ),
                  ]),
                ],
              ),
            );