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

2024-10-02 09:52:51

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嵌套在单元格组件上设置具体单元格垂直对齐方式。

小结

表格用法很简单，主要是单元格大小、对齐方式需要注意下，当然这个表格的行列数量必须是一一对应的，不能像Excel那样合并、分拆单元格。如果表格太复杂那就只能祭出大杀器自定义绘制了~~

到此这篇关于Android Flutter表格组件Table的使用详解的文章就介绍到这了,更多相关Flutter表格组件Table内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Android布局之TableLayout表格布局

Tablelayout类以行和列的形式对控件进行管理,每一行为一个TableRow对象,或一个View控件.当为TableRow对象时,可在TableRow下添加子控件,默认情况下,每个子控件占据一列. 当为View时,该View将独占一行. 三个常用的属性 android:collapseColumns:设置需要被隐藏的列的序号 android:shrinkColumns:设置允许被收缩的列的列序号 android:stretchColumns:设置运行被拉伸的列的列序号学习导图 (1)Ta
Android自定义DataGridView数据表格控件

我是一个.net程序员,但是苦于公司要求开发一个android app,没办法,只能硬着头皮上了. 由于项目里面很多地方需要用到数据显示控件(类似于.net的DataGridView),度娘找了下发现没人公开类似的控件,没办法只好自己写了. 废话不多说,直接贴代码: public class DataGridView extends HorizontalScrollView { private List<DataGridViewColumn> columns; private List<
Android table布局开发实现简单计算器

本文实例为大家分享了Android table布局开发实现简单计算器的具体代码,供大家参考,具体内容如下结果如图: XML文件如下: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android
Android表格自定义控件使用详解

近期公司要做报表功能,在网上搜索下表格的样式后便自己写了一个自定义的表格控件,该表格控件能根据设置的数据中数据的最大值自动设置左侧信息栏显示的值,使得条形图能尽量的充满控件,条形图部分支持左右滑动,数据的长度可能超过控件本身所能容纳的长度,所以在绘制的时候做了判断,当需要绘制的部分不再控件范围内则不进行绘制,具体请阅读代码,目前只支持一个名称对应一条数据,如有不足之处,大家提出帮忙修改使用方法如下: 在xml文件中定义控件属性 <RelativeLayout xmlns:android
Android Flutter表格组件Table的使用详解

目录 Table.TabRow.TabCell 小结之前开发中用到的表格,本篇文章主要介绍如何在页面中使用表格做一个记录. Table组件不同于其它Flex布局,它是直接继承的RenderObjectWidget的.相当于是一个独立的组件,区别与其他系列组件. Table.TabRow.TabCell 惯例,先看下Table相关的构造方法: Table({ Key? key, this.children = const <TableRow>[],//行列表表示多少行 this.column
C/C++表格组件Qt TableWidget应用详解

TableWidget 表格结构组件,该组件可以看作是TreeWidget树形组件的高级版,表格组件相比于树结构组件灵活性更高,不仅提供了输出展示二维表格功能,还可以直接对表格元素直接进行编辑与修改操作,表格结构分为表头,表中数据两部分,表格结构可看作一个二维数组,通过数组行列即可锁定特定元素,如下代码是针对表格结构的基本使用方法,分别实现了表头数据的初始化,元素的插入等基本操作. 在研究Widget组件之前先来熟悉一下View组件,View组件相对Widget组件来说只是不具备编辑功能,其他功
Android Flutter实现3D动画效果示例详解

目录前言 AnimatedWidget 简介 3D 旋转动画的实现总结前言上一篇我们介绍了 Animation 和 AnimationController 的使用,这是最基本的动画构建类.但是,如果我们想构建一个可复用的动画组件,通过外部参数来控制其动画效果的时候,上一篇的方法就不太合适了.在 Flutter 中提供了 AnimatedWidget 组件用于构建可复用的动画组件.本篇我们用 AnimatedWidget 来实现组件的3D 旋转效果,如下图所示. AnimatedWidge
Android Flutter实现精灵图的使用详解

目录前言如何使用精灵图自定义实现加载 Flame加载精灵图前言在日常开发中遇到的图片展示一般是静态图和Gif图两种形式(静态和动态的不同).与此同时当需要对图片做效果时让其动起来,常用方案是Gif图播放或者是帧动画(多种静态图轮询播放).但在游戏开发中还有一种动图表现形式叫做Sprite图(雪碧图),其在前端开发中也是很常见.为什么需要使用精灵图,因为每张图片显示都需要去发起请求获取,若页面图片数量较多(一个页面有几十个小图)并发请求将是一个大数量级,可能会造成页面加载速度降低,精灵图
Android Fragment滑动组件ViewPager的实例详解

Android Fragment滑动组件ViewPager的实例详解 1适配器FragmentPagerAdapter的实现对于FragmentPagerAdapter的派生类,只需要重写getItem(int)和getCount()就可以了. public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private List<Fragment> list; public MyFragmentPagerAdapter
Android开发Jetpack组件WorkManager用例详解

目录一.简介二.导入三.基本使用 3.1 定义后台任务 3.2 配置任务运行条件 3.2.1 只需执行一次的任务 3.2.2 周期性执行的任务 3.3 将任务传给 WorkManager 四.高级配置 4.1 设置任务延迟执行 4.2 给任务添加标签 4.3 取消任务 4.3.1 根据标签取消任务 4.3.2 根据 request 的 id 取消任务 4.3.3 取消所有任务 4.4 任务重试 4.5 监听任务结果 4.6 传递数据 4.7 链式任务一.简介 WorkManager 用于
Android开发Jetpack组件DataBinding用例详解

目录简介使用方式 1. build.gradle 中添加 kapt,并启用dataBinding 2.修改布局文件,添加 layout 和 data 标签 3.使用 DataBindingUtil 绑定布局 4.布局的 data 标签中添加数据变量,并使用其参数 5.BindingAdapter的使用简介 DataBinding 是 Jetpack 组件之一,适用于 MVVM 模式开发,也是Google官方推荐使用的组件之一.使用DataBinding可以很容易的达到视图与逻辑分离,直接在
Flutter绘图组件之CustomPaint使用详解

目录简介 CustomPaint介绍 CustomPainter示例总结简介在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.看在 UI 设计师是一个漂亮小姐姐的份上,又不好意思说这个做不了(那样也很没面子).这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 CuntomPaint 组件.CustomPaint 组件和前端的 Canvas差不多,允许我们在一个画布上绘制各种元
Android Flutter利用CustomPaint绘制基本图形详解

目录绘制矩形绘制圆形绘制椭圆绘制任意形状绘制弧形总结上一篇我们介绍了 CustomPaint 的基本概念和使用,可以看到 CustomPaint 其实和前端的 Canvas基本上是一样的,实际上前端 Canvas 支持的绘制方法 CustomPaint 都支持,毕竟 CustomPaint 其实也是基于 Canvas 实现的.本篇我们来介绍 CustomPaint 基本图形的绘制. 绘制矩形绘制矩形比较简单,方法定义如下: void drawRect(Rect rect, Pa
Android Jetpack导航组件Navigation创建使用详解

目录引言依赖项创建导航图导航宿主导航到目的地传递参数 NavigationUI 多模块导航引言导航是指支持用户导航.进入和退出应用中不同内容片段的交互.Android Jetpack 的导航组件可实现导航,无论是简单的按钮点击,还是应用栏和抽屉式导航栏等更为复杂的模式,该组件均可应对. 依赖项 def nav_version = "2.5.2" implementation "androidx.navigation:navigation-fragment-kt

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

目录

Table、TabRow、TabCell

小结

相关推荐

随机推荐