美文网首页
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