flutter - 如何在 Flutter 中定位 DataTable 列?
问题描述
我正在努力将这些列定位在我的数据表上,但我无法弄清楚。这是当前工作代码的样子:
Container(
color: Color(0xffF5F5F5),
child: DataTable(
headingRowHeight: 40,
columns: [
DataColumn(label: IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
icon: Icon(Icons.remove_circle, color: Color(0xffB93E3E),),
onPressed: () {
// setState(() {
// // _volume += 10;
// });
},
)),
DataColumn(label: Text('Text')),
DataColumn(label: IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
icon: Icon(Icons.menu, color: Color(0xff979797),),
tooltip: 'Hold and move up and down to sort.',
onPressed: () {
// setState(() {
// // _volume += 10;
// });
},
)),
],
rows: [
],
),
),
Container(
color: Color(0xffF5F5F5),
child: DataTable(
headingRowHeight: 40,
columns: [
DataColumn(
label: IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
icon: Icon(Icons.add_circle, color: Color(0xff58B93E),),
onPressed: () {
// setState(() {
// // _volume += 10;
// });
},
)),
DataColumn(label: Text('Text')),
],
rows: [
],
),
),
这是我希望列的位置。如您所见,IconButton 位于左侧,然后文本紧随其后,Menu 图标位于减号按钮行的末尾:
解决方案
使用简单的列和行。
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("your app")),
body: Column(children: [
Container(
child: Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 10, 15),
child: Icon(
Icons.remove_circle,
color: Colors.red,
),
),
Expanded(
child: Text("your first text"),
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: Icon(Icons.menu),
),
],
),
),
Container(
height: 1,
color: Colors.grey,
),
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 10, 15),
child: Icon(
Icons.add_circle,
color: Colors.green,
),
),
Expanded(
child: Text("your second text"),
),
],
),
Container(
height: 1,
color: Colors.grey,
),
]),
);
}
}
使用数据表。我不知道您的需要,但要使用数据表,有必要制定解决方法并将项目放在标题中。不强烈推荐
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("your app")),
body: SizedBox(
width: double.infinity,
child: DataTable(
columns: const <DataColumn>[
DataColumn(
label: Icon(
Icons.remove_circle,
color: Colors.red,
),
),
DataColumn(
label: Text(
'Your first text',
),
),
DataColumn(
label: Icon(Icons.menu),
),
],
headingRowHeight: 40,
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Icon(
Icons.add_circle,
color: Colors.green,
)),
DataCell(Text('your second text')),
DataCell(Text(
"")), // you need 3 datacell because yopur have 3 headers
],
),
]),
),
);
}
}
推荐阅读
- reactjs - 有条件地渲染 DataSearch 组件
- c# - 如何在VS2017的dot Net Core 2中使用通过连接服务创建的ASMX WebService接口
- r - 将 geom_text 与 geom_jitter 点对齐
- c - telnet 在发送数据时会添加任何额外的字节吗?
- r - 两个数据框之间的 R 中的 Google 距离
- django - Django - 向继承自父模型表单的模型表单添加字段?
- c - 来自 C 中 sendto() 套接字程序的无效参数
- c# - 我可以更改 iMacros 上的默认浏览器吗?
- r - 不允许使用日期滚动?
- javascript - 添加连续的字母作为对象键