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

目录
  • Table、TabRow、TabCell
  • 小结

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

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这个参数来设置单元格宽度,从源码中我们可以得知,如果宽度无限大的话,需要使用FixedColumnWidthIntrinsicColumnWidth设置单元格大小。

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-06-23

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表格自定义控件使用详解

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

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 RecyclerView布局就这么简单

RecyclerView是什么? 笔者个人看法,RecyclerView只是一个对ListView的升级版,这个升级的主要目的是为了让这个view的效率更高,并且使用更加方便. 我们知道,ListView通过使用ViewHolder来提升性能.ViewHolder通过保存item中使用到的控件的引用来减少findViewById的调用,以此使ListView滑动得更加顺畅.但这种模式在listview中即使不使用也无妨. 换言之,在ListView中你不考虑复用的问题也可以,只是你牺牲了内存来方

Android开发实现的简单计算器功能【附完整demo源码下载】

本文实例讲述了Android开发实现的简单计算器功能.分享给大家供大家参考,具体如下: 这个Android计算器虽然还有点小bug,不过简单的计算功能还是没问题的哦: 先上图看效果 比较简单,所以我就没怎么写注释,应该一看就能明白的 有不明白的可以发信问我 先贴MainActivity.java代码 package com.example.calculator; import android.app.Activity; import android.os.Bundle; import andro

Android studio实现简单计算器

本文实例为大家分享了Android studio实现简单计算器的具体代码,供大家参考,具体内容如下 需求分析 在Android studio中设计并实现一个简单的计算器,实现连续的加减乘除运算. 界面设计 采用网格GridLayout布局,设计了一个6行4列的网格,最上边是一个EditText用来显示用户输入的运算数字和运算符,以及相关的运算结果,其占4列,文本框大小为50dip:依次往下的界面分别设置了数字和运算符以及操作的按钮,各行各列的每个按钮的大小均设为26sp. 编程分析 设计了两个文

Android 游戏开发入门简单示例

在Android系统上开发游戏是Android开发学习者所向往的,有成就感也有乐趣,还能取得经济上的报酬.那怎样开发Android游戏呢?下面介绍一个简单的入门实例.        一.创建新工程 首先,我们在Eclipse中新建一个名为Movement的工程,并且选择合适的Android SDK,在这里,我们选用的API是比较低的1.5版本,这样可以让其适应性更强.接下来,我们新建两个类,一个是UpdateThread类,一个是SurfaceView类,它们在项目中分别是负责处理线程和画面的两

Android开发实现简单的观察者与被观察者示例

本文实例讲述了Android开发实现简单的观察者与被观察者.分享给大家供大家参考,具体如下: 概述: 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己. 观察者模式结构图 Subject:抽象主题(抽象被观察者),抽象主题角色把所有观察者对象保存在一个集合里,每个主题都可以有任意数量的观察者,抽象主题提供一个

Android 开发实例简单涂鸦板

在Android上开发一些小应用既可以积累知识又可以增加乐趣,与任务式开发不同,所以想到在Android系统上实现一个简单的涂鸦板,这是我们练手的一种好的方法.   涂鸦板应用的代码实现 新建工程MyWall,修改/res/layout/main.xml文件,在里面添加一个SurfaceView和两个Button,用到了RelativeLayout布局,完整的main.xml文件如下: XML/HTML代码 <?xml version="1.0" encoding="u

Android开发之简单文件管理器实现方法

本文实例讲述了Android开发之简单文件管理器实现方法.分享给大家供大家参考,具体如下: 这里运用Java I/O.ListActivity.Dialog.Bitmap等实现简单文件管理器,可以查看目录文件,修改文件名,删除文件,打开文件.比较简单,直接看代码: 先看布局文件: layout/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&q

android实现简单计算器功能

本文实例为大家分享了android实现简单计算器的具体代码,供大家参考,具体内容如下 // 日期:2014/9/26 // 首先,人们的输入习惯为中缀表达式.为了便于计算,程序会将中缀表达式会转换为后缀表达式 //////////////////////////////////////////////////////////////////////////////////////// // 目前软件还存在 // 1.输入运算数和运算符不匹配时,崩溃的现象.(如:只输入一个操作数) // 2.一个

Android开发中简单设置启动界面的方法

本文实例讲述了Android开发中简单设置启动界面的方法.分享给大家供大家参考,具体如下: 启动界面的意义是为了让后台处理耗时的复杂工作,当工作处理完成后,即可进入主界面.相比让用户等待布局加载完成,使用一张图片作为启动背景,会带来更好的体验. 首先,需要建立一个简单的布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas