如何自定义Flutter数据表行、列、单元格的边框？

Question

我有一个黑色背景的 Flutter 应用程序，当添加 Datatable 小部件时，边框和文本不可见。 我已经为所有标签添加了 TextStyle 颜色，但是如何为边框添加颜色？

DataTable(columns: [
    DataColumn(label: Center(child: Text('DATE', style: TextStyle(color: Colors.grey)))),
    DataColumn(label: Center(child: Text('FANS', style: TextStyle(color: Colors.grey)))),
    DataColumn(
        label: Text('LIKES', style: TextStyle(color: Colors.grey))),
    DataColumn(
        label:
            Text('EST. EARNINGS', style: TextStyle(color: Colors.grey))),
  ],

      rows: [
        DataRow(cells: [
          DataCell(Text('1')),
          DataCell(Text('2')),
          DataCell(Text('3')),
          DataCell(Text('4')),
        ])
      ]),

Answer 1

您可以使用 Theme 小部件并覆盖 dividerColor 就可以了。

这是示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(_title),
          backgroundColor: Colors.grey,
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Theme(
          data: Theme.of(context).copyWith(dividerColor: Colors.grey),
          child: DataTable(columns: [
            DataColumn(
              label: Container(
                width: 35,
                child: Center(
                  child: Text(
                    'DATE',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
            DataColumn(
              label: Container(
                width: 35,
                child: Center(
                  child: Text(
                    'FANS',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
            DataColumn(
              label: Container(
                width: 40,
                child: Center(
                  child: Text(
                    'LIKES',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
            DataColumn(
              label: Container(
                width: 100,
                child: Center(
                  child: Text(
                    'EST. EARNINGS',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
          ], rows: [
            DataRow(cells: [
              DataCell(
                Text(
                  '1',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              DataCell(
                Text(
                  '2',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              DataCell(
                Text(
                  '3',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              DataCell(
                Text(
                  '4',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
            ])
          ]),
        ),
      ),
    );
  }
}

这是实际的输出：