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

roejwanj  于 2023-11-21  发布在  Flutter
关注(0)|答案(1)|浏览(145)

我有一个黑色背景的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')),
        ])
      ]),

字符串

mgdq6dx1

mgdq6dx11#

您可以使用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),
                ),
              ),
            ])
          ]),
        ),
      ),
    );
  }
}

字符串
这是实际的输出:


的数据

相关问题