美文网首页
Flutter快速上手11:高级布局之表格 Table/Tabl

Flutter快速上手11:高级布局之表格 Table/Tabl

作者: 十二栗子 | 来源:发表于2022-04-28 16:15 被阅读0次

表格布局和线性布局比较相似,只是使用起来更简洁一些。

属性名 类型 简介
columnWidths Map<int, TableColumnWidth> 设置每一列的宽度
defaultColumnWidth TableColumnWidth 默认的每一列宽度值,默认情况下均分
textDirection TextDirection 文字方向
border TableBorder 表格边框
defaultVerticalAlignment TableCellVerticalAlignment 每一个cell的垂直方向的alignment
children List<TableRow> 子控件列表
Table(
            columnWidths: const {
              0: FixedColumnWidth(80),
              1: FixedColumnWidth(50),
              2: FixedColumnWidth(50),
              4: FixedColumnWidth(200),
            },
            border: TableBorder.all(
                color: Colors.green, width: 2.0, style: BorderStyle.solid),
            children: const [
              TableRow(
                  decoration: BoxDecoration(
                    color: Colors.grey,
                  ),
                  children: [
                    Text('姓名',),
                    Text('性别',),
                    Text('年龄',),
                    Text('履历',),
                  ]),
              TableRow(children: [
                Text('张三'),
                Text('男'),
                Text('20'),
                Text('喜欢游山玩水晒阳阳'),
              ]),
              TableRow(children: [
                Text('李四'),
                Text('女'),
                Text('28'),
                Text('打游戏追剧看小说'),
              ]),
            ],
          ),

本地Flutter 2.10.1,Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子,初学Flutter ,文章会根据学习进度不定时更新,请多多指教~~

相关文章

网友评论

      本文标题:Flutter快速上手11:高级布局之表格 Table/Tabl

      本文链接:https://www.haomeiwen.com/subject/enasertx.html