【Flutter实现表格上下左右滚动】9.29

一、需求以及设计效果：

  • 水平滑动时，表格第一列和第二列固定不动；
  • 铅直滑动时，表格第一行固定不动；

一、设计思路

（1）样式绘制：将表格划分为四块；

  • 左下两列，绘制成一个表格，只可上下滑动；
  • 左上两列，绘制成固定表格，不可滑动；
  • 右下多行，绘制为一个表格，可上下滑动，也可左右滑动；
  • 右上一行，绘制为一个表格，只可左右滑动；

（2）动效实现：

  • 关联列表滑动，完成需求。

二、具体实现

（1）绘制页面布局：

 //创建第一列tableRowTableRow _buildSingleColumnOne(int index) {return TableRow(children: [_buildSideBox(index == -1 ? '第一列' : "软件质量管理", index == -1),_buildSideBox(index == -1 ? '第二列' : "软件质量管理", index == -1),]);}//创建单个表格Widget _buildSideBox(String title, isTitle) {return SizedBox(height: numRowHeight,width: numRowWidth,child: Container(alignment: Alignment.center,decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 0.33, color:Colors.black),top: BorderSide(width: 0.33, color:Colors.black),right: BorderSide(width: 0.33, color:Colors.black),left: BorderSide(width: 0.33, color:Colors.black),)),child: Text(title,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: isTitle ? 14 : 12, color: Colors.black),)));}

（二）、滑动控制：上下左右相互关联

三、问题以及解决汇总

1. A RenderFlex overflowed by 357 pixels on the right.

* 原因：子组件的内容超出父组件，但子组件仍然按照真实大小显示。
* 解决：添加弹性组件，如Expanded、ListView
*注意：
①Expanded水平方向（Row）使内容自动适配，不能用于调整垂直Column，若解决参见（https://blog.csdn.net/kaixuan_dashen/article/details/102308861）
②ListView垂直方向，可使内容自动适配
③Expanded、Flexible只在Row、Column等组件内，不在其他组件内使用。
④Expanded、Flexible两个的默认灵活系数是一样的，但是fit参数不同，Expanded是默认要占满分配的空间的，而Flexible则默认不需要
⑤Scafflod必须封装在MaterialApp中

2.滚动控制：

* 问题：①如何使得表格既能上下滚动，又能左右滚动？
* 解决：给控制横向布局和纵向布局的组件上都加上滑动控制
   Expanded(child:ListView(//纵向controller: thirdColumnController,//纵向滑动控制children:[SingleChildScrollView(//横向controller:secondedRowController ,//横向滑动控制scrollDirection: Axis.horizontal,child: Row(children:[Container(child: Table(children: _buildTableRow()),width: numRowWidth*6 ,//设置列的行宽 )
]),),],),),
* 问题：②ScrollController firstColumnController = ScrollController();其中的参数有什么意义？不懂

3.组件使用：

（1）table：
* 注意：children:[]子组件必须为单个 ; tableRow;children:XX，XX子组件可以为列表
  Table(//设置边框border: TableBorder.all(color: Colors.black,),columnWidths: const{//列宽0: FixedColumnWidth(100.0),1: FixedColumnWidth(100.0),},//表格具体内容children: [//表格第一行TableRow(children: [SizedBox(//设置行高height: 50.0,child:Text('职责'),),//第一行的第一列Text('重点工作'),//第一行的第二列Text('工作内容'),]),//表格第二行TableRow(）]      ),],
（2）ScrollController
//定义可控制滚动组件ScrollController firstColumnController = ScrollController();//监听滚动
firstColumnController.addListener(() {if (firstColumnController.offset != secondedColumnController.offset) {secondedColumnController.jumpTo(firstColumnController.offset) ;} }//监听滚动效果
NotificationListener(onNotification: (ScrollNotification notification) {print("监听到滚动");if (notification is ScrollStartNotification) {print("开始滚动");}if (notification is ScrollUpdateNotification) {print("正在滚动...  , 当前滚动的位置 ${notification.metrics.pixels}                            ListView总高度${notification.metrics.maxScrollExtent}");}if (notification is ScrollEndNotification) {print("结束滚动");}return true; //返回 true 表示监听到的方法不向上冒泡//监听滚动组件：child: Container()},
(3)table拆分为两部分
思路：将Table-tableRow（将行封装成列表，将行中的每格列再封装成tableRow(单个)）import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() => runApp(MineApp());class MineApp extends StatefulWidget{@override_MineAppState createState() => _MineAppState();
}class _MineAppState extends State<MineApp>{//定义表格行高\宽double table_height = 20;double table_width = 100;//定义单个表格Widget buildTableBox(String info){return Container(height: table_height,width: table_width,alignment: Alignment.center,child: Text(info),);}//创建一行TableRow(可以只包含一列的一行)List<TableRow> buildOneTableRow(int num){//定义行数List<TableRow> TableList = List();for(int i = 0; i < num; i++) {TableList.add(buildTableRow());}return TableList ;}//创建列TableRow buildTableColumn(){return TableRow(children: [buildTableBox("列")],);}//创建行TableRow buildTableRow(){return TableRow(children: [//定义行中的列buildTableBox("1"),buildTableBox("2"),buildTableBox("3"),buildTableBox("4"),],);}@overrideWidget build(BuildContext context){return MaterialApp(home:Scaffold(body: Table(children: buildOneTableRow(5),),),);}
}

4.：

* 问题：②ScrollController firstColumnController = ScrollController();其中的参数有什么意义？不懂

四、性能优化：

1. 将前两列，分别绘制，水平方向需要关联三个滑动控制。

* 解决：优化结构

五、感谢链接:

https://blog.csdn.net/WZAHD/article/details/105582936

六、全部代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zos/widgets/common/status_bar.dart';void main()=>runApp(YearPlanTest());class YearPlanTest extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(title:'表格绘制',home: YearPlan (),);}
}class YearPlan extends StatefulWidget {@override_YearPlanState createState() => _YearPlanState();
}class _YearPlanState extends State<YearPlan>{//定义可控制滚动组件ScrollController firstColumnController = ScrollController();ScrollController thirdColumnController = ScrollController();ScrollController firstRowController = ScrollController();ScrollController secondedRowController = ScrollController();//创建第一列行double numRowWidth = 100.0;//单个表宽double numRowHeight = 48.0;//表格高List<TableRow> _buildTableColumnOne() {List<TableRow> returnList = new List();returnList.add(_buildSingleColumnOne(-1));for (int i = 0; i < 5; i++) {returnList.add(_buildSingleColumnOne(i));}return returnList;}//创建tableRowsList<TableRow> _buildTableRow() {List<TableRow> returnList = new List();for (int j = 0; j < 6; j++) {returnList.add(_buildSingleRow(-1));//添加行}return returnList;}//创建单行List<TableRow> _buildTableOneRow() {List<TableRow> returnList = new List();for (int j = 0; j < 1; j++) {returnList.add(_buildSingleRow(-1));//添加行}return returnList;}//创建第一列tableRowTableRow _buildSingleColumnOne(int index) {return TableRow(children: [_buildSideBox(index == -1 ? '第一列' : "软件质量管理", index == -1),_buildSideBox(index == -1 ? '第二列' : "软件质量管理", index == -1),]);}//创建一行tableRowTableRow _buildSingleRow(int index) {return TableRow(children: [_buildSideBox(index == -1 ? '工作内容' : "学习", index == -1),_buildSideBox(index == -1 ? '年度目标' : "成为顶尖开发", index == -1),_buildSideBox(index == -1 ? '关联部门' : "1信息技术事业部", index == -1),_buildSideBox(index == -1 ? '备注' : "不可能", index == -1),_buildSideBox(index == -1 ? '1' : "随意添加", index == -1),]);}//创建单个表格Widget _buildSideBox(String title, isTitle) {return SizedBox(height: numRowHeight,width: numRowWidth,child: Container(alignment: Alignment.center,decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 0.33, color:Colors.black),top: BorderSide(width: 0.33, color:Colors.black),right: BorderSide(width: 0.33, color:Colors.black),left: BorderSide(width: 0.33, color:Colors.black),)),child: Text(title,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: isTitle ? 14 : 12, color: Colors.black),)));}@overridevoid initState() {super.initState();//监听第一列变动firstColumnController.addListener(() {if (firstColumnController.offset != thirdColumnController.offset) {thirdColumnController.jumpTo(firstColumnController.offset);}});//监听第三列变动thirdColumnController.addListener(() {if (firstColumnController.offset !=thirdColumnController.offset ) {firstColumnController.jumpTo(thirdColumnController.offset);}});//监听第一行变动firstRowController.addListener(() {if(firstRowController.offset !=secondedRowController.offset){secondedRowController.jumpTo(firstRowController.offset);}});//监听第二行变动secondedRowController.addListener(() {if(firstRowController.offset !=secondedRowController.offset){firstRowController.jumpTo(secondedRowController.offset);}});}@overrideWidget build(BuildContext context) {return StatusBar(color: Colors.white,brightness: Brightness.dark,child: Scaffold(appBar: AppBar(primary: false,elevation: 0,leading:Icon(Icons.arrow_back_ios),title: Text('计划审批'),), //SingleChildScrollView(body: NotificationListener(//表格child: Container(padding: EdgeInsets.only(right: 16,left:16,top: 16,bottom:0) ,margin: EdgeInsets.only(right: 16,left:16),height: 209,width:375,color:Colors.lightGreen,child:Row(children: [//前两列Container(width:200,height:200,child:Column(children: [Table(children: [TableRow(children:[Container(decoration: BoxDecoration(border: Border(top: BorderSide(width: 0.33, color:Colors.black),right: BorderSide(width: 0.33, color:Colors.black),left: BorderSide(width: 0.33, color:Colors.black),),),child:SizedBox(height:47,child: Center(child:Text('职责',textAlign: TextAlign.center),),),),Container(// width:100,decoration: BoxDecoration(border: Border(// bottom: BorderSide(width: 0.33, color:Colors.black),top: BorderSide(width: 0.33, color:Colors.black),right: BorderSide(width: 0.33, color:Colors.black),left: BorderSide(width: 0.33, color:Colors.black),),),child:SizedBox(height:47,child: Center(child:Text('重点工作',textAlign: TextAlign.center),),),)],),],),//SingleChildScrollView(Expanded(child:ListView(controller: firstColumnController,children: [Table(children: _buildTableColumnOne()),],),),],),),//其余列Expanded(child: Container(width: 500,child: Column(children:[SingleChildScrollView(scrollDirection: Axis.horizontal,//horizontalcontroller:firstRowController ,child: Container(child: Table(children: _buildTableOneRow()),width: numRowWidth*6 ,//设置列的行宽)),Expanded(child:ListView(controller: thirdColumnController,children:[SingleChildScrollView(controller:secondedRowController ,scrollDirection: Axis.horizontal,//horizontalchild: Row(children:[Container(child: Table(children: _buildTableRow()),width: numRowWidth*6 ,//设置列的行宽)],),),],),),]),),),],),),),),);}
}

【Flutter实现表格上下左右滚动】相关推荐

  1. 小程序:表格上下左右滚动

    小程序:列表上下左右滚动 axml: <view style="height:80%;width:100%;margin-top:10%;" ><scroll-v ...

  2. java表单上下左右滚动_怎么在网页中实现表格上下左右滚动

    最近在做网页的时候碰见一个项目统计,要求表格上下滚动时,表格头尾固定:左右滚动的时候表格,表格第一列最后一列固定. 先上效果图可能会更明了些:左右滚动时,两列固定,头尾中间部分跟着滚动. 上下滚动时, ...

  3. html实现文字在表格上方左侧,html实现固定表格四周并且可以上下左右滚动

    这篇文章主要为大家详细介绍了固定表格四周实现表格上下左右滚动的解决方法,表格上下滚动时,表格头尾固定:左右滚动的时候表格,表格第一列最后一列固定,本文为大家提供了思路,感兴趣的小伙伴们可以参考一下 问 ...

  4. Flutter 上下左右滚动Table

    Flutter 上下左右滚动Table Flutter 上下左右滚动Table 实现功能 适用性 使用 Widget全部代码 存在缺陷 引用 结尾 Flutter 上下左右滚动Table 实现功能 可 ...

  5. iview table 横向拖动表格内容滚动

    当表格纵向滚动比较长的时候,横向滚动是很不方便的,要是横向可以拖动滚动就完美了,解决办法就是给表格添加拖动指令,代码如下: const directive = {inserted (my_el) {l ...

  6. AG表格基础滚动分页-React版本

    AG表格滚动分页文档 AG表格在使用滚动分页时,不可使用rowData属性做为数据源,传入表格.因为AG的滚动分页,使用的是特殊表模型,所有正常模型下的API有可能会失效. 使用AG滚动分页时,需把正 ...

  7. vue列表，table表格 自动滚动效果

    vue列表,表格自动滚动 安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-sea ...

  8. 常用JS图片滚动（无缝、平滑、上下左右滚动）

    常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head> <-----> </head> <body> <!--向下滚动代码开始--&g ...

  9. react表格无缝滚动_js实现表格无缝滚动效果

    table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...

最新文章

  1. mysql error number 1130,[转]mysql error number 1130的解决方法
  2. laravel mysql save 后 查看 受影响行数_swoft2教程系列-mysql模型
  3. input file 文件上传,js控制上传文件的大小和格式
  4. PyCairo 中的透明度
  5. 初识 Oracle 11g
  6. msdn服务器系统,操作系统
  7. TIOBE 2 月编程语言排行榜：Objective-C 的出路在何方？
  8. Accelerated C++ 习题答案
  9. Java个人财务管理小软件
  10. AdventureWorks2008 数据库安装
  11. python 写入文件时编码问题
  12. ansys workbench汉化教程_ARP8.1企业版安装及汉化教程 I 学之乎
  13. codeforces 56E 多米诺骨牌效应
  14. 【转】一生必看的成功学书（转载）
  15. 《通关！游戏设计之道》给游戏编个故事
  16. java 文件目录操作_Java目录文件的操作 -解道Jdon
  17. ATF：Gicv源码文件系列-gic_common.h
  18. python读取读取txt文件与写入txt文件
  19. 7-3 求100以内的素数
  20. linux固态硬盘检测,linux 检查硬盘是 SSD or HDD

热门文章

  1. centos 静态编译MP4box
  2. Redis缓存雪崩与解决方案
  3. 80%学生的困惑，学完C/C++之后学什么？
  4. 用计算机录音并播放教学设计,八年级信息技术《录制声音》说课稿
  5. uestc1135邱老师看电影【概率dp】
  6. Android沙箱自动化安全产品
  7. 《文明6》引言科普 引言出处讲解 【转】
  8. 如何用Scrum做变革管理的落地实施
  9. 硬件工程师成长之路（11）——职业规划
  10. 面试官问你的职业生涯规划是什么，该如何回答？