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

Question

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

Answer 1

要实现此目的，您必须使用下面的容器和表。

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

您可以从以下位置访问示例代码 这里也有。

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

Answer 2

您可以像其他小部件一样使用

ClipRRect

来包裹圆角半径。

ClipRRect(
   borderRadius: BorderRadius.all(Radius.circular(10)),
   child: Table(),
),

Answer 3

所以 border-radius 的问题在于，只有当所有边框都匹配时才必须绘制它，甚至内部和外部也应该匹配 它取决于 TableBorder 类中的 isUniform 方法

这里我提到了一个解决方法

创建自定义表格边框并覆盖 isUniform 方法的解决方法：

 
    class CustomTableBorder extends TableBorder {
      const CustomTableBorder({
        BorderSide top = BorderSide.none,
        BorderSide right = BorderSide.none,
        BorderSide bottom = BorderSide.none,
        BorderSide left = BorderSide.none,
        BorderSide horizontalInside = BorderSide.none,
        BorderSide verticalInside = BorderSide.none,
        BorderRadius borderRadius = BorderRadius.zero,
      }) : super(
              top: top,
              right: right,
              bottom: bottom,
              left: left,
              horizontalInside: horizontalInside,
              verticalInside: verticalInside,
              borderRadius: borderRadius,
            );
      factory CustomTableBorder.symmetric({
        BorderSide? inside,
        BorderSide outside = BorderSide.none,
        BorderRadius borderRadius = BorderRadius.zero,
        BorderSide? horizontalInside,
        BorderSide? verticalInside,
      }) {
        return CustomTableBorder(
          top: outside,
          right: outside,
          bottom: outside,
          left: outside,
          horizontalInside: inside ?? horizontalInside ?? BorderSide.none,
          verticalInside: inside ?? verticalInside ?? BorderSide.none,
          borderRadius: borderRadius,
        );
      }
      bool get isUniform {
        final Color topColor = top.color;
        if (right.color != topColor ||
            bottom.color != topColor ||
            left.color != topColor) {
          return false;
        }
    
        final double topWidth = top.width;
        if (right.width != topWidth ||
            bottom.width != topWidth ||
            left.width != topWidth) {
          return false;
        }
    
        final BorderStyle topStyle = top.style;
        if (right.style != topStyle ||
            bottom.style != topStyle ||
            left.style != topStyle) {
          return false;
        }
    
        return true;
      }
    }