Flutter 上下左右滚动的表格

Flutter 专栏收录该内容
3 篇文章 0 订阅

flutter_table

一个自定义可以上下左右滚动的表格。
在这里插入图片描述

实现

通过四个Table进行滚动监听来实现上下左右滑动。

 @override
  void 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);
      }
    });
 
 	......
 
 }

使用

使用简单、方便。

直接在TableWidget传入相关参数。

class _TablePageState extends State<TablePage>{
  List<String> titleList = ['日期','项目','预计完成时间','项目','项目'];

  //列表所有数据
  List<List<String>> allList = List();
  List<String> contentList = List();
  // List<double> titleWidthList = [100];
  Map<int, double> titleWidthMap = Map();
  List<List<String>> _getContentList() {
    for (int i = 1; i < 20; i++) {
      contentList = List();
      contentList.add("202$i");
      contentList.add("学习2222222$i");
      contentList.add("202103$i");
      contentList.add("202103$i");
      contentList.add("202103$i");
      allList.add(contentList);
    }
    return allList;
  }


  List<String> _getSelectList(){
    List<String> selectList = List();
    selectList.add("2,5");
    selectList.add("0,1");
    selectList.add("3,0");
    selectList.add("0,4");
    selectList.add("0,6");
    selectList.add("0,0");
    return selectList;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    ScreenAdapter.init(context);
    titleWidthMap = {0:100,1:50,2:200,5:30};

    return Scaffold(
      appBar: AppBar(
        title: Text("Table"),
      ),
      body: Container(
        child: TableWidget(titleList,_getContentList(),selectList: _getSelectList(),
            onTap: (x,y){
              print("外部  x=$x y=$y");
            }),
      ),
    );
  }

}

属性

参数名称参数类型作用备注
titleListList表格标题必传
contentListList<List>内容列表
将每一行的每个表格的内容添加到List,
再将每一行List添加到一个List。
必传
titleBackgroundColorColor标题背景颜色
titleTextColorColor标题字体颜色
contentBackgroundColorColor列表背景颜色
contentTextColorColor列表字体颜色
leftFirstTextColorColor左边第一列字体颜色
leftFirstBackgroundColorColor左边第一列背景颜色
borderColorColor边框颜色
allSelectColorColor所有选中颜色
selectTextColorColor选中字体颜色
titleFontSizedouble标题字体大小
contentFontSizedouble列表字体大小
leftFirstFontSizedouble左边第一列字体大小
selectFontSizedouble选中字体大小
tableTitleLeftRightPaddingdouble标题表格左右内边距(列宽度自适应情况下才起作用)
tableTitleTopBottomPaddingdouble标题表格上下内边距(列宽度自适应情况下才起作用)
tableContentTopBottomPaddingdouble内容表格上下内边距(列宽度自适应情况下才起作用)
titleRowHeightdouble标题表格高度
contentRowHeightdouble内容所有表格高度(不包含标题)
selectListList选中列表 [“0,1”,“1,2”]
“0,1”:第二行第一列
(0代表列,1代表行)
titleWidthMapMap<int, double>设置标题宽度 {0:100,1:50,2:200,5:30};
"0:100"代表第一列宽度为100
titleMaxLinesint标题最大行数
contentMaxLinesint表格内容文字最大行数(不包含标题)
titleTextOverflowTextOverflow标题TextOverflow,结合titleMaxLines一起使用
contentTextOverflowTextOverflow表格内容TextOverflow(不包含标题),结合contentMaxLines一起使用
onTapFunction每个表格的点击事件

注意:

在自适应情况下,每一列的最大宽度是屏幕宽度的1/2。

表格列宽度平分:可通过titleWidthMap使其平分

后续计划:

  • 添加表格宽度平分
  • 表格高度自适应

版本

1.0.1

  • 表格高度自适应
  • 添加一些设置参数

1.0.0+1

问题反馈

Issues

或QQ:1127141134(请备注)

如果有其他更好的写法你可以分享一下。

觉得不错的话请留下你的star,谢谢。

Demo

https://gitee.com/LinHaitao/flutter_table.git

Thanks for

https://blog.csdn.net/zzy123zzy123_/article/details/108867596

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值