flutter - Flutter Datatable Row, Column, Cell如何自定义边框?
问题描述
我有一个黑色背景的 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')),
])
]),
解决方案
您可以使用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),
),
),
])
]),
),
),
);
}
}
这是实际的输出:
推荐阅读
- python - 确定对象的类型是否与通过类型模块定义的嵌套类型匹配
- python - 报纸python缓存问题,每次调用相同的输出
- javascript - ReferenceError onclick JavaScript
- asp.net-core - Kubernetes 上的 SignalR,让我们加密入口服务
- angular - 带有条件(?)句子的Angular 2模板不起作用
- angular - 如何使用 Angular 6 配置 Firebase?
- azure-active-directory - Azure Active Directory 将服务主体添加到组 - 无需分配目录权限
- jquery - 单击数据行时尝试打开模式窗口
- r - 有没有办法使用 dplyr 用 0 填充缺失的日期?
- angular - 单击 onSubmit 时更新 ngIf