Flutter——最详细(Table)网格、表格组件使用教程
import 'package:flutter/material.dart';
class CustomTable extends StatelessWidget {
const CustomTable({Key? key}) : super(key: key);
Widget build(BuildContext context) {
_ItemBean title = _ItemBean("姓名", "年龄", "性别", "单位名称", "单位地点");
_ItemBean m = _ItemBean("周", "20", "男", "得意", "武汉");
_ItemBean kg = _ItemBean("王", "18", "男", "中科", "武汉");
_ItemBean s = _ItemBean("李", "18", "男", "互动", "武汉");
_ItemBean a = _ItemBean("菜", "18", "男", "阿里", "武汉");
_ItemBean k = _ItemBean("热", "18", "男", "字节", "武汉");
_ItemBean mol = _ItemBean("赵", "18", "女", "腾讯", "武汉");
_ItemBean cd = _ItemBean("曹", "18", "男", "盛天", "武汉");
List<_ItemBean> data = [title, m, kg, s, a, k, mol, cd];
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Table(
columnWidths: const <int, TableColumnWidth>{
0: IntrinsicColumnWidth(),//可以根据内部组件大小自适应宽度
1: FixedColumnWidth(80.0),
2: FixedColumnWidth(80.0),
3: FixedColumnWidth(80.0),
4: FixedColumnWidth(80.0),
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border: TableBorder.all(
color: Colors.red, width: 1.0, style: BorderStyle.solid),
children: data
.map((item) => TableRow(children: <Widget>[
Center(
child: Text(
item.name,
style: const TextStyle(color: Colors.black, fontSize: 18),
)),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(
item.symbol,
style: const TextStyle(color: Colors.red, fontSize: 18),
)),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(
item.unitSymbol,
style: const TextStyle(color: Colors.green, fontSize: 18),
)),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(
item.unitName,
style:
const TextStyle(color: Colors.yellow, fontSize: 18),
)),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(
item.unit,
style:
const TextStyle(color: Colors.deepPurpleAccent, fontSize: 18),
)),
),
]))
.toList(),
),
);
}
}
class _ItemBean {
String name;
String symbol;
String unit;
String unitName;
String unitSymbol;
_ItemBean(this.name, this.symbol, this.unit, this.unitName, this.unitSymbol);
}