再谈DataTable Widget


我们在上一章回中介绍了Wrap Widget相关的内容,本章回中将介绍如何使用DataTable Widget.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

概念介绍

我们在本文中将要介绍的DataTable Widget是一种布局类组件,类似Column或者Row组件,它主要用来生成存放数据的表格,有看官说ListView也可以存放数据呀,
为什么还需要DataTable,因为它把数据进行了表格化,和我们常用的excel表格完全相同,而且它还提供了常用的数据操作功能,比如排序。还有一点原因:ListView
只是提供了滚动列表功能,但是列表中的每个条目如何呈现呢?它并有明确的要求,列表中的条目常用ListTitle组件实现,也可以换成的Text组件。而DataTable中
的条目是按照行列进行呈现。在实际项目中经常把DataTable组件当作ListView组件的条目,这样既可以让数据用列表的形式呈现出来,也可以让数据随着列表滚动。

使用方法

和其它组件一样DataTable Widget也提供了相关的属性来操作自己,下面是常用的属性:

  • columns属性:主要用来控制表格的列,类型是List
  • rows属性:主要用来控制表格的行,类型是List
  • columnSpacing属性:主要用来控制列宽,默认值是56;
  • sortColumnIndex属性:主要用来指出使用哪一列的数据进行排序;
  • sortAscending属性:主要用来控制使用升序还是降序进行排序,默认值是true,表示升序;
  • onSelectAll属性:主要用来对表中的数据进行选择操作,这里的选择表示全部选择;注意它是一个方法类型;
    上面介绍的这些属性中,前两个属性是必选属性;也是核心属性,它们把数据以行和列的形式进行管理,从它们的类型中也可以看出来,它们的数量是可变的。其它的属性
    可以不写,不过在实现数据排序和选择功能时需要使用这些属性,我们在后面章回中将会详细介绍它们的用法。

示例代码

DataTable(
//每列的宽度,默认值是56
columnSpacing: 64,
//表格标题,就是每一列的Title
columns:[
  DataColumn( label: Text("Name"),),
  DataColumn( label: Text("Age"),),),
  DataColumn( label: Text("Class"),),
],
 // 可以一行一行的进行赋值,也可以使用List自动赋值
rows: [
  //第一行数据
  DataRow(cells: [
    DataCell(Text("Jam")),
    DataCell(Text("3")),
    DataCell(Text("Sleep")),
  ],),
  //第二行数据
  DataRow(cells: [
    DataCell(Text("Jam")),
    DataCell(Text("3")),
    DataCell(Text("Sleep")),
  ],),
  //第三行数据
  DataRow(cells: [
    DataCell(Text("Jam")),
    DataCell(Text("3")),
    DataCell(Text("Sleep")),
  ],),
],
),

在上面的代码中我们定义了一个三行三列的表格,列名通过columns属性控制,分别显示:Name,Age,Class.这些列名对应DataColumn类中的label属性。接下来给
rows属性赋值,它的类型是DataRow,行中的每一列类型为DataCell,它通过cells属性管理这些cell。注意cell的数量必须与列的数量保持一致。
这里只演示了核心代码,完整的代码在Github上ex029文件中。编译完整的程序就可以看到一个三行三列的表格,我在这里就不演示程序的运行结果了,建议大家自己动
手去实践,这样才能真正体会到DataTable的特点。
看官们,关于DataTable Widget相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

  • 19
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值