Проблема с получением радиуса границы Flutter DataTable на границах таблицы

Question

У меня есть, к которому я хочу добавить радиус границы. Прочитав об этом, я добавилDataTableкContainerвиджет. Это прекрасно работает, когда я не добавляю цвет фона в свои заголовки. При этом меняется цвет всей таблицы.

      Container(
    decoration: BoxDecoration(
        border: Border.all(
        width: 1,
        color: Colors.grey,
    ),
    color: Palette.blueToLight.shade700,
    borderRadius: const BorderRadius.all(
        Radius.circular(15),
    ),
),
child: DataTable(
    border: TableBorder.symmetric(
        inside: const BorderSide(
            width: 1,
            color: Colors.grey,
        ),
    ),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
        Radius.circular(15),
        ),
    ),
    columns: const <DataColumn>[
    ... ],
...

В качестве обходного пути я затем меняю цвет фонаDataRow.

      rows: data
    .map<DataRow>(
        (element) => DataRow(
            color: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
                return Colors.white;
            }
        ),
        cells: [ ... ]
...

Проблема, с которой я столкнулся, заключается в том, что нижние углы таблицы теперь имеют комбинацию закругленных границ и переполнения белого блока прямоугольной формы.

У кого-нибудь есть исправление или обходной путь для этого?

Answer 1

Итак, вот ловушка Flutter рисует радиус границы на основе метода isUnifrom из TableBorder, просто расширьте его и добавьте к нему свою собственную реализацию, и это работает! вот пример

       
    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;
      }
    }