《Flutter 控件大全》第九十三:Table
程序员文章站
2022-03-11 19:16:16
...
- 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
- 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
- Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
Table组件是一个表格组件,适合不滑动的网格控件,尤其是如果拥有不同大小的小控件。嵌套的行和列可能会比较乱,但Table组件组件提供了一致性并为您调整子窗口的大小。
Table
基本用法:
Table(
children: [
TableRow(
children: [
TableCell(child: Text('姓名')),
TableCell(child: Text('性别')),
TableCell(child: Text('年龄')),
]
),
TableRow(
children: [
TableCell(child: Text('老孟')),
TableCell(child: Text('男')),
TableCell(child: Text('18')),
]
),
TableRow(
children: [
TableCell(child: Text('小红')),
TableCell(child: Text('女')),
TableCell(child: Text('18')),
]
),
],
)
效果如下:
给表格添加边框:
Table(
border: TableBorder(
horizontalInside: BorderSide(color: Colors.red),
verticalInside: BorderSide(color: Colors.green),
)
...
)
效果如下:
只有表格内部有边框,给四周也加上边框:
Table(
border: TableBorder(
top: BorderSide(color: Colors.red),
left: BorderSide(color: Colors.red),
right: BorderSide(color: Colors.red),
bottom: BorderSide(color: Colors.red),
horizontalInside: BorderSide(color: Colors.red),
verticalInside: BorderSide(color: Colors.green),
)
...
)
效果如下:
列宽默认是平分的,也可以设置为固定的宽度,代码如下:
Table(
defaultColumnWidth: FixedColumnWidth(100),
...
)
TableRow
TableRow表示表格的行,TableRow有多个TableCell,基本用法如下:
TableRow(children: [
TableCell(child: Text('姓名')),
TableCell(child: Text('性别')),
...
]),
设置TableRow的装饰,用法如下:
TableRow(
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
color: Colors.blue),
children: [
TableCell(child: Text('姓名')),
TableCell(child: Text('性别')),
TableCell(child: Text('年龄')),
]),
效果如下:
TableCell
TableCell表示每一个网格内的控件,用法如下:
TableCell(child: Text('年龄')),
设置其垂直方向的对齐方式:
TableCell(
child: Text('老孟'),
verticalAlignment: TableCellVerticalAlignment.middle,
),
推荐阅读
-
《Flutter 控件大全》第四十六个:Flexible、Expanded、Spacer
-
《Flutter 控件大全》第六十六个:PageView
-
《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
-
《Flutter 控件大全》第三十三个:DecoratedBoxTransition
-
《Flutter 控件大全》第二十六个:ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio
-
《Flutter 控件大全》第六个:AnimatedBuilder
-
《Flutter 控件大全》第五十三个:Icon
-
《Flutter 控件大全》第五十一个:GridView
-
《Flutter 控件大全》第三十九个:DraggableScrollableSheet
-
《Flutter 控件大全》第五十个:GridPaper