当前位置：首页 > 谈天说地

Android Flutter表格组件Table的使用详解

34资源网2022-06-25602

之前开发中用到的表格，本篇文章主要介绍如何在页面中使用表格做一个记录。

table组件不同于其它flex布局，它是直接继承的renderobjectwidget的。相当于是一个独立的组件，区别与其他系列组件。

table、tabrow、tabcell

惯例，先看下table相关的构造方法：

table({
  key? key,
  this.children = const <tablerow>[],//行列表 表示多少行
  this.columnwidths,// 表格每列分布宽度
  // 默认平分占比 修改每一列占比使用上面的参数
  this.defaultcolumnwidth = const flexcolumnwidth(),
  this.textdirection,//阅读顺序
  this.border,// 边框样式
  this.defaultverticalalignment = tablecellverticalalignment.top,// 单元格垂直对齐方式
  this.textbaseline, //对齐文本的水平线
})

// 表格内容区
const tablerow({
this.key, 
this.decoration,// 行单元装饰
this.children // 每一行内容列表 表示一行多少内容
});

// 单元格垂直对齐方式
const tablecell({
  key? key,
  this.verticalalignment,// 具体单元格垂直对齐方式、上面修改全局，这里可以覆盖全局单独设置
  required widget child,
}

构造参数很少，用起来也比较简单，比如我们要展示三行三列数据，这里以最为常见的成绩表为例，设置了单元格样式，表格的边框色，单元格文本。

如果不设置每列的占比，表格默认将会平分空间。

设置每列占比宽度值，

columnwidths: {
  0:fixedcolumnwidth(100),
  1:fixedcolumnwidth(200),
  2:fixedcolumnwidth(200),
},

这是一个map对象，我们可以固定设置每列的宽度值，如果不设置它将自动填充剩余空间。

这是我们表格数据比较少的时候，当列数比较多的时候，我们希望可以横向滑动来查看，毕竟在移动端屏幕有限，这里我们就必须要用defaultcolumnwidth这个参数来设置单元格宽度，从源码中我们可以得知，如果宽度无限大的话，需要使用fixedcolumnwidth或intrinsiccolumnwidth设置单元格大小。

fixedcolumnwidth:固定宽度。

intrinsiccolumnwidth:动态设置单元格大小，当我们的单元格大小不能确定时使用，但是使用这个计算方式对于内存消耗是非常大的，在源码注释中看到，具体为啥消耗大，暂时留个坑。

如果我们是用了动态计算单元格，那么表格就会变成下方这样，根据内容填充计算单元格大小自适应，宽度就会根据文本大小动态计算单元格。

需要表格滑动记得别忘了加singlechildscrollview组件，如果需要横纵双向滑动，可以这么嵌套加:

singlechildscrollview(
    scrolldirection: axis.vertical,
    child: singlechildscrollview(
        scrolldirection: axis.horizontal,
        child:  table(
          textbaseline: textbaseline.alphabetic,
          defaultverticalalignment: tablecellverticalalignment.middle,
          defaultcolumnwidth: intrinsiccolumnwidth(),
          children: _gettabrows(),
          border: tableborder.all(color: colors.red, width: 1),
        ),)),

tabrow、tabcell使用方式非常简单就不过多介绍了，

需要注意的是tabcell组件一定是tabel下的子组件才能使用，一般配合defaultverticalalignment全局设置垂直对齐方式，将tabcell嵌套在单元格组件上设置具体单元格垂直对齐方式。