Flutter 组件之 Table

Tools_are

已于 2023-02-15 18:25:20 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 组件文章标签： flutter 前端 android ios

于 2023-02-15 15:44:49 首次发布

本文链接：https://blog.youkuaiyun.com/Tools_are/article/details/129043662

Flutter 组件专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Flutter中的Table组件，包括其简介、主要属性如children、columnWidths、textDirection等，以及TableRow和TableCell的相关属性，如verticalAlignment、columnWidths等。同时，详细阐述了各种ColumnWidth类型的用法和TableBorder的设置，帮助开发者理解如何在Flutter应用中创建和定制表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter 组件之 Table

1.简介

表格组件

2.属性

children：子集
columnWidths：列宽 Map<int, TableColumnWidth>
defaultColumnWidth ： const FlexColumnWidth(1.0)：未在columnWidths中指定的列的列宽
textDirection：文本方向
border：Table的边框 TableBorder
defaultVerticalAlignment： TableCellVerticalAlignment.top：TableCell垂直方向对其方式
textBaseline： TextBaseline.alphabetic：文本基线

3.使用

TableRow属性：
decoration：装饰
children：子集
TableCell属性：
verticalAlignment：垂直对齐方式
child：子集
columnWidths属性：
FixedColumnWidth(value)：固定列宽
FlexColumnWidth(value)：使用剩余空间的列宽，如果由多个按照value为权重分配
FractionColumnWidth(value)：百分比列宽 = value*(Table.maxWidth)
IntrinsicColumnWidth(value)：适应内容来分配列宽，value为权重分配额外空间，这个方法比较耗费性能
MaxColumnWidth(TableColumnWidth a,TableColumnWidth b)：取a，b中大的那个为列宽
MinColumnWidth(TableColumnWidth a,TableColumnWidth b)：取a，b中小的那个为列宽
TableBorder属性：
top：BorderSide.none上边框
right：BorderSide.none右边框
bottom：BorderSide.none下边框
left：BorderSide.none左边框
horizontalInside：BorderSide.none内部横向线
verticalInside： BorderSide.none内部纵向线
TableCellVerticalAlignment属性：
top：TableCell位于单元格顶部
middle：TableCell位于单元格中部
bottom：TableCell位于单元格底部
baseline：TableCell位于基线
fill：TableCell铺满单元格，根据官方注释，如果设置这个Table的每行高度都会变为0。