1.概要
有時(shí)候，我們需要規(guī)則的行列來(lái)表示一些內(nèi)容疆虚，比如如下所示：
image.png
當(dāng)然苛败，我們可以使用Row和Column來(lái)實(shí)現(xiàn)，也不是很復(fù)雜装蓬。但是對(duì)于這種需求著拭，F(xiàn)lutter有一個(gè)更簡(jiǎn)單的Widget來(lái)實(shí)現(xiàn)纱扭。那就是Table牍帚。Table是一個(gè)不可以滾動(dòng)的網(wǎng)格Widget，如果想滾動(dòng)乳蛾，請(qǐng)使用GridView暗赶。
2.源碼
Table({
Key key,
// 內(nèi)容數(shù)組，內(nèi)容是TableRow
this.children = const <TableRow>[],
// 每一列寬度肃叶，是一個(gè)map蹂随，{
// 0: FixedColumnWidth(100),
// 1: FixedColumnWidth(40),
// 2: FixedColumnWidth(50),
// }
// 如果不設(shè)置列表寬度，則寬度會(huì)被默認(rèn)擴(kuò)展拉伸
this.columnWidths,
// 默認(rèn)的列寬度
this.defaultColumnWidth = const FlexColumnWidth(1.0),
// 文字方向
this.textDirection,
// 邊框
this.border,
// 默認(rèn)水平布局方式
this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
// 文字基準(zhǔn)線
this.textBaseline = TextBaseline.alphabetic,
})
TableRow源碼：
const TableRow({ t
his.key,
// 背景裝飾
this.decoration,
// 子Widget
this.children });
3.示例
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: Table(
columnWidths: {
0: FixedColumnWidth(100),
1: FixedColumnWidth(40),
2: FixedColumnWidth(50),
},
children: [
TableRow(
children: [
SizedBox(
height: 100,
child: Container(
color: Colors.red,
),
),
Container(
height: 50,
color: Colors.green,
),
Container(
height: 200,
color: Colors.yellow,
),
]
),
TableRow(
children: [
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 200,
color: Colors.orange,
),
]
),
],
),
),
);
}
image.png
