Flutter 上下左右滚动Table

最新推荐文章于 2023-10-19 16:24:53 发布
最新推荐文章于 2023-10-19 16:24:53 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： Flutter 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45583281/article/details/113534309
版权

Flutter 上下左右滚动Table

Flutter 上下左右滚动Table

在这里插入图片描述

实现功能

  1. 可以上下左右滚动
  2. 可修改多个参数配置
  3. 实现单独选中某个格子

适用性

参数：

  double rowWidth; //单个表宽
  double rowHeight; //表格高

  List<String> titleList = List(); //标题  ["职责", "工作内容", "年度目标", "关联部门", "备注", "1"];
  List<List<String>> contentList = List(); //内容列表
  List<String> selectList = List(); //选中列表  ["0,1","1,2"]

  Color titleBackgroundColor; //标题背景颜色
  Color titleTextColor; //标题字体颜色
  Color contentBackgroundColor; //列表背景颜色
  Color contentTextColor; //列表字体颜色
  Color leftFirstTextColor; //左边第一列字体颜色
  Color leftFirstBackgroundColor; //左边第一列背景颜色
  Color borderColor; //边框颜色
  Color allSelectColor; //所有选中颜色
  Color selectTextColor; //选中字体颜色

  double titleFontSize; //标题字体大小
  double contentFontSize; //列表字体大小
  double leftFirstFontSize; //左边第一列字体大小
  double selectFontSize; //选中字体大小

使用

import 'package:flutter_sams/config/export/export.dart';
import 'package:flutter_sams/view/table_widget.dart';

class TablePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TablePageState();
  }

}

class _TablePageState extends State<TablePage>{

  List<String> titleList = ['日期','项目','日期','项目'];

  //列表所有数据
  List<List<String>> allList = List();
  List<String> contentList = List();
  List<List<String>> _getContentList() {
    for (int i = 1; i < 20; i++) {
      contentList = List();
      contentList.add("202$i");
      contentList.add("学习2222222255555555555555553333333332$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");
    return selectList;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Table'),
      ),
      body: Container(
        child: TableWidget(titleList,_getContentList(),selectList: _getSelectList(),
        onTap: (x,y){
          print("外部  x=$x y=$y");
        }),
      ),
    );
  }
}

Widget全部代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_sams/config/export/export.dart';

class TableWidget extends StatelessWidget {
  double rowWidth; //单个表宽
  double rowHeight; //表格高

  List<String> titleList = List(); //标题  ["职责", "工作内容", "年度目标", "关联部门", "备注", "1"];
  List<List<String>> contentList = List(); //内容列表
  List<String> selectList = List(); //选中列表  ["0,1","1,2"]

  Color titleBackgroundColor; //标题背景颜色
  Color titleTextColor; //标题字体颜色
  Color contentBackgroundColor; //列表背景颜色
  Color contentTextColor; //列表字体颜色
  Color leftFirstTextColor; //左边第一列字体颜色
  Color leftFirstBackgroundColor; //左边第一列背景颜色
  Color borderColor; //边框颜色
  Color allSelectColor; //所有选中颜色
  Color selectTextColor; //选中字体颜色

  double titleFontSize; //标题字体大小
  double contentFontSize; //列表字体大小
  double leftFirstFontSize; //左边第一列字体大小
  double selectFontSize; //选中字体大小

  Function onTap;

  TableWidget(this.titleList, this.contentList,
      {this.rowWidth = 100.0,
      this.rowHeight = 48.0,
      this.titleBackgroundColor = Colors.greenAccent,
      this.titleTextColor = Colors.blueAccent,
      this.contentBackgroundColor = Colors.white,
      this.contentTextColor = Colors.black87,
      this.titleFontSize = 12,
      this.contentFontSize = 12,
      this.leftFirstBackgroundColor = Colors.white,
      this.leftFirstTextColor = Colors.black87,
      this.leftFirstFontSize = 12,
      this.selectList,
      this.borderColor = Colors.black54,
      this.allSelectColor = Colors.redAccent,
      this.selectTextColor = Colors.black87,
      this.selectFontSize = 12,
      this.onTap});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: _Table(
          this.rowWidth,
          this.rowHeight,
          this.titleList,
          this.contentList,
          this.titleBackgroundColor,
          this.titleTextColor,
          this.contentBackgroundColor,
          this.contentTextColor,
          this.titleFontSize,
          this.contentFontSize,
          this.leftFirstBackgroundColor,
          this.leftFirstTextColor,
          this.leftFirstFontSize,
          this.selectList,
          this.borderColor,
          this.allSelectColor,
          this.selectTextColor,
          this.selectFontSize,
          this.onTap),
    );
  }
}

class _Table extends StatefulWidget {
  double rowWidth; //单个表宽
  double rowHeight; //表格高

  List<String> titleList; //标题
  List<List<String>> contentList;
  List<String> selectList; //选中列表  ["0,1","1,2"]

  Color titleBackgroundColor;
  Color titleTextColor;
  Color contentBackgroundColor; //列表背景颜色
  Color contentTextColor;
  Color leftFirstTextColor; //左边第一列字体颜色
  Color leftFirstBackgroundColor; //左边第一列背景颜色
  Color borderColor; //边框颜色
  Color allSelectColor; //所有选中颜色
  Color selectTextColor; //选中字体颜色

  double titleFontSize; //标题字体大小
  double contentFontSize; //列表字体大小
  double leftFirstFontSize; //左边第一列字体大小
  double selectFontSize; //选中字体大小

  Function onTap;

  _Table(
      this.rowWidth,
      this.rowHeight,
      this.titleList,
      this.contentList,
      this.titleBackgroundColor,
      this.titleTextColor,
      this.contentBackgroundColor,
      this.contentTextColor,
      this.titleFontSize,
      this.contentFontSize,
      this.leftFirstBackgroundColor,
      this.leftFirstTextColor,
      this.leftFirstFontSize,
      this.selectList,
      this.borderColor,
      this.allSelectColor,
      this.selectTextColor,
      this.selectFontSize,
      this.onTap);

  @override
  _TableState createState() => _TableState();
}

class _TableState extends State<_Table> {
  //定义可控制滚动组件
  ScrollController firstColumnController = ScrollController();
  ScrollController thirdColumnController = ScrollController();

  ScrollController firstRowController = ScrollController();
  ScrollController secondedRowController = ScrollController();

  //创建第一列行
  // double numRowWidth = 100.0; //单个表宽
  // double numRowHeight = 48.0; //表格高

  // Color titleBackgroundColor = Color(0xFF88DFE4);
  // Color titleTextColor = Colors.blueAccent;

  //顶部标题
  // List<String> titleList = ["职责", "工作内容", "年度目标", "关联部门", "备注", "1"];

  //列表所有数据
  List<List<String>> allList = List();
  List<String> contentList = List();

  //左边第一列数据--不包含顶部标题
  List<String> leftList = List();

  //右边所有数据--不包含顶部标题和第一列数据
  List<List<String>> rightList = List();
  List<String> rightContentList = List();

  // List<String> selectList = List();

  List<List<String>> _getContentList() {
    for (int i = 0; i < 20; i++) {
      contentList = List();
      contentList.add("软件质量管理$i");
      contentList.add("学习$i");
      contentList.add("成为顶尖开发$i");
      contentList.add("信息技术事业部$i");
      contentList.add("加油$i");
      contentList.add("随意添加$i");
      allList.add(contentList);
    }
    return allList;
  }

  void _getTwoList(List<List<String>> contentList) {
    leftList.clear();
    rightList.clear();
    rightList.clear();
    contentList.forEach((itList) {
      rightContentList = List();
      for (int i = 0; i < itList.length; i++) {
        if (i == 0) {
          leftList.add(itList[i]);
        } else {
          rightContentList.add(itList[i]);
        }
      }
      rightList.add(rightContentList);
    });
  }

  List<int> xList = List();
  List<int> yList = List();

  ///第一列数据
  List<TableRow> _buildTableColumnOne() {
    List<TableRow> returnList = List();
    for (int i = 0; i < leftList.length; i++) {
      returnList.add(_buildSingleColumnOne(i, leftList[i], leftList.length,
          isSelect: widget.selectList.contains("0,$i")));
    }
    return returnList;
  }

  //创建tableRows
  List<TableRow> _buildTableRow() {
    List<TableRow> returnList = new List();
    for (int j = 0; j < rightList.length; j++) {
      returnList.add(_buildSingleRow(j, rightList[j], false)); //添加行
    }
    return returnList;
  }

  ///第一行标题  创建单行
  List<TableRow> _buildTableOneRow() {
    List<TableRow> returnList = new List();
    for (int j = 0; j < 1; j++) {
      returnList.add(_buildSingleRow(j, widget.titleList, true)); //添加行
    }
    return returnList;
  }

  //创建第一列tableRow
  TableRow _buildSingleColumnOne(int index, String text, int totalLength,
      {bool isSelect = false}) {
    return TableRow(children: [
      _buildSideBox(index, text, false, isLeftFirst: true, isSelect: isSelect),
    ]);
  }

  //创建一行tableRow
  TableRow _buildSingleRow(int index, List<String> textList, bool isTitle) {
    return TableRow(children: [
      for (int i = 0;
          i < (isTitle ? textList.length - 1 : textList.length);
          i++)
        isTitle
            ? _buildSideBox(i, textList[i + 1], true)
            : _buildSideBox(i, textList[i], false,
                xx: index,
                isSelect: widget.selectList.contains("${i + 1},$index")),
    ]);
  }

  //创建单个表格
  Widget _buildSideBox(int index, String title, bool isTitle,
      {bool isLeftFirst = false, int xx, bool isSelect = false}) {
    return Container(
      color: isTitle
          ? widget.titleBackgroundColor
          : (isLeftFirst
              ? isSelect
                  ? widget.allSelectColor
                  : widget.leftFirstBackgroundColor
              : isSelect
                  ? widget.allSelectColor
                  : widget.contentBackgroundColor),
      child: InkWell(
        child: SizedBox(
            height: widget.rowHeight,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  border: Border(
                bottom: BorderSide(width: 0.33, color: widget.borderColor),
                top: BorderSide(width: 0.33, color: widget.borderColor),
                right: BorderSide(width: 0.33, color: widget.borderColor),
                left: BorderSide(width: 0.33, color: widget.borderColor),
              )),
              child: Text(
                title,
                // maxLines: 1,
                // overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    fontSize: isTitle
                        ? widget.titleFontSize
                        : (isLeftFirst
                            ? isSelect
                                ? widget.selectFontSize
                                : widget.leftFirstFontSize
                            : isSelect
                                ? widget.selectFontSize
                                : widget.contentFontSize),
                    color: isTitle
                        ? widget.titleTextColor
                        : (isLeftFirst
                            ? isSelect
                                ? widget.selectTextColor
                                : widget.leftFirstTextColor
                            : isSelect
                                ? widget.selectTextColor
                                : widget.contentTextColor)),
              ),
            )),
        onTap: () {
          if (widget.onTap != null) {
            int x = 0;
            int y = 0;
            if (isLeftFirst) {
              x = 0;
              y = index;
              // print("&&x=0 y=$index");

            } else {
              y = xx;
              x = index + 1;
              // print("&&x=$x y=$y");
            }
            widget.onTap(x, y);
          }
        },
      ),
    );
  }

  @override
  void initState() {
    super.initState();

    // _getTwoList(_getContentList());
    _getTwoList(widget.contentList);

    //监听第一列变动
    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);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: MediaQuery.removePadding(
      removeTop: true,
      context: context,
      child: NotificationListener(
        //表格
        child: Container(
          // padding: EdgeInsets.only(right: 8, left:8, top: 8, bottom: 8),
          // margin: EdgeInsets.only(right: 16,left:16),
          // height: 209,
          // width:375,
          // color:Colors.lightGreen,
          child: Row(
            children: [
              //前两列
              Container(
                width: widget.rowWidth,
                // height:200,
                child: Column(
                  children: [
                    Table(
                      children: [
                        TableRow(
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(
                                      width: 0.33, color: widget.borderColor),
                                  top: BorderSide(
                                      width: 0.33, color: widget.borderColor),
                                  right: BorderSide(
                                      width: 0.33, color: widget.borderColor),
                                  left: BorderSide(
                                      width: 0.33, color: widget.borderColor),
                                ),
                              ),
                              child: Container(
                                height: widget.rowHeight - 0.33,
                                color: widget.titleBackgroundColor,
                                // padding: EdgeInsets.all(10),
                                child: Center(
                                  child: Text(
                                    widget.titleList[0],
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: widget.titleTextColor,
                                        fontSize: widget.titleFontSize),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    //SingleChildScrollView(
                    Expanded(
                      child: ListView(
                        controller: firstColumnController,
                        children: [
                          Table(children: _buildTableColumnOne()),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              //其余列
              Expanded(
                child: Container(
                  // width: 200,
                  child: Column(children: [
                    Container(
                      alignment: Alignment.topLeft,
                      child: SingleChildScrollView(
                          scrollDirection: Axis.horizontal, //horizontal
                          controller: firstRowController,
                          child: Container(
                            child: Table(children: _buildTableOneRow()),
                            width: (widget.rowWidth) *
                                (widget.titleList.length - 1), //设置列的行宽
                          )),
                    ),
                    Expanded(
                      child: ListView(
                        controller: thirdColumnController,
                        children: [
                          SingleChildScrollView(
                            controller: secondedRowController,
                            scrollDirection: Axis.horizontal, //horizontal
                            child: Row(
                              children: [
                                Container(
                                  child: Table(children: _buildTableRow()),
                                  width: (widget.rowWidth) *
                                      (widget.titleList.length - 1), //设置列的行宽
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ]),
                ),
              ),
            ],
          ),
        ),
      ),
    ));
  }

  @override
  void dispose() {
    // TODO: implement dispose
    firstColumnController?.dispose();
    thirdColumnController?.dispose();
    firstRowController?.dispose();
    secondedRowController?.dispose();
    super.dispose();
  }
}

存在缺陷

表格宽度暂时无法自动适配，只能自己传参修改

引用

感谢这位老铁的分享，此组件是在这基础上进行完善。
[https://blog.csdn.net/zzy123zzy123_/article/details/108867596]

结尾

欢迎各位留言

HitaoLin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter开发 - 可以上下左右滚动的表格开发，可下拉刷新，可上拉加载，这样的表格，你爱了么
CodingFire的博客
03-18 1727
近期有一个关于数据报表的需求，需要表格可以上下左右的滑动，且滑动过程中左边和上边的表头固定不动，这不活脱脱的Excel么？尝试了多种办法来处理： 1.自己写，左右滑动时，左边序号表头可固定，但是上下滑动时，顶部的表头无法固定，且很难实现下拉刷新和上拉加载的需求，比较适用于那些固定数据的表格，整体看起来还是很美观的，也是利用了系统提供的一些组件来实现： 下面给大家看下完整的代码实现，并解析下： import 'package:flutter/material.dart'; class TableDemo
flutter页面滚动联动实现
03-25
在Flutter开发中，页面滚动联动是一项重要的功能，尤其在复杂布局和交互设计中。`NestedScrollView`和`CustomScrollView`是Flutter提供给开发者用于实现这一功能的关键组件。本篇文章将详细解析如何使用这两个组件来...
【Flutter实现表格上下左右滚动】
自深深处
09-29 5236
Flutter实现表格上下左右滚动一、需求以及设计效果：一、设计思路（1）样式绘制：将表格划分为四块；（2）动效实现：二、具体实现（1）绘制页面：三、实现汇总四、性能优化五、总结反思六、感谢链接 一、需求以及设计效果： 水平滑动时，表格第一列和第二列固定不动； 铅直滑动时，表格第一行固定不动； 一、设计思路 （1）样式绘制：将表格划分为四块； 左下两列，绘制成一个表格，只可上下滑动； 左上两列，绘制成固定表格，不可滑动； 右下多行，绘制为一个表格，可上下滑动，也可左右滑动； 右上一行，绘制为一个表格，
Flutter 上下左右滚动的表格
weixin_45583281的博客
04-08 1127
flutter_table 一个自定义可以上下左右滚动的表格。 实现 通过四个Table进行滚动监听来实现上下左右滑动。 @override void initState() { super.initState(); //监听第一列变动 firstColumnController.addListener(() { if (firstColumnController.offset != thirdColumnController.offset) {
【flutter 书架形式的格口,可上下左右拖动】
androidhyf的博客
01-12 238
书架形式的布局，可上下左右拖动
flutter 实现可以上下左右滑动的表格
那些年我们一起写的代码
05-31 1813
前言： 好久没写过文章了，最近在使用flutter开发项目，于是乎想简单记录一下开发过程中遇到的一些好玩的东西或者经常会遇到的功能开发。欢迎关注我的flutter项目，里面会记录控件使用及各种常用功能的开发https://github.com/student9128/FlutterStudy开发过程中经常遇到需要做可以上下左右滑动的类型的表格的实现，这里提供一种自己实现的方案鉴于这个功能难度不是很大，仅仅就是布局和联动的实现，所以代码很少废话不多说，先上效果根据表格滑动的结构，可以看到布局结构如下，分别是横
Flutter Table 表格
10-26
Flutter Table 表格。
首页通知上下滚动效果
07-17
在Android应用开发中，"首页通知上下滚动效果"是一种常见的用户界面（UI）设计，用于展示重要的、实时更新的通知信息。这种效果使得用户无需离开主页面就能获取到新消息，提高了用户体验。本篇将深入探讨如何实现...
Flutter CustomScrollView 自定义滚动效果
10-26
Flutter CustomScrollView 自定义滚动效果。
Flutter 滚动悬浮导航栏TabBar
02-11
本文将深入探讨如何在Flutter中实现滚动悬浮的导航栏，即TabBar，结合SliverAppBar、PageView和NestedScrollView等组件，为用户提供流畅的滚动体验。 一、Flutter TabBar基础 TabBar是Flutter中的一个核心组件，它...
listview显示表格左右上下滑动
12-16
listview显示表格左右上下滑动，顶部标题以及最左边一列固定不动，其他部分上下左右滑动
文字的上下左右滚动
03-14
使用HorizontalScrollView横向卷轴视图，和ScrollView纵向卷轴视图实现文字的上下左右滚动
带固定列支持横向滑动的ListView
06-04
带固定列支持横向滑动的ListView详解见http://blog.csdn.net/qiaohonglu/article/details/72571461
flutter web中鼠标拖动，可以实现左右滑动
zx19990507的博客
05-22 1025
这个表，不可以鼠标进行左右滑动。只可以电脑触摸板进行左右滑动。所有我就在琢磨。找到了一个方法，可供大家参考。 就是在main.dart里面加上下面这个东西就好了。 第一步：scrollBehavior: MyCustomScrollBehavior(), 第二步： class MyCustomScrollBehavior extends MaterialScrollBehavior { // Override behavior methods and getters like dragDe...
Flutter 滚动距离来设置TabBar的位置，点击TabBar滚动的到指定的位置
yujunlong3919的专栏
03-25 5239
文章目录效果git定义属性每个组件设置Key获取控件的距离顶部的位置设置监听设置TabBar 点击getY 效果git 定义属性 ScrollController _controller = new ScrollController(); var globalKeyOne = GlobalKey(); var globalKeyTwo = GlobalKey(); var gl...
Flutter两个ListView同步滚动。
C201008的专栏
04-20 1341
这里先添加Google开发团队开发的依赖库。
Flutter 仿探探卡片滑动效果（上下左右）
qq_36425505的博客
10-19 782
【代码】Flutter 放探探卡片滑动效果（上下左右）
Flutter（三）--可滚动布局
aruba的博客
04-12 1678
上面我们使用了Flutter内置的Sliver模型布局，针对大量数据达到复用组件，以提高性能，覆盖了大多数应用场景实际上SliverSliver：复用机制的核心，按需进行构建和布局ViewPort：滚动布局中，用于渲染当前视口中需要显示的SliverScrollable：监听到用户滑动行为后，根据最新的滑动偏移构建Viewport上面的滚动布局这三大角色都是1：1：1的，但对于一些特殊的需要组合滚动布局的情况，Flutter也提供了组件，创建一个公共的Scrollable和Viewport，然后它的。
Flutter 实现完美的双向聊天列表效果，滑动列表的知识点
恋猫de小郭的博客
11-12 2816
本文将通过一个需求场景，介绍一个非常实用的 Flutter 列表滑动知识点，该问题来源于网友的咨询。 如何在 Flutter 上实现一个聊天列表，相信大家都不会觉得有什么困难，不就是一个 ListView ，然后根据类型显示渲染数据吗？这有什么困难的？ 理论上确实没什么问题，但是有一个需求场景，却会出现一个无法修复的问题，那就是：聊天列表需要双向插入数据。 双向插入数据会导致 ListView 什么问题？ 举个例子，首先我们使用常见的 ListView 绘制出一个模拟聊天列表，这里使用了 revers.
flutter 视图上下左右滑动
最新发布
04-26
在Flutter中，可以通过使用GestureDetector或者ListView等widget来实现视图的上下左右滑动。 1. 使用GestureDetector： GestureDetector是Flutter中一个非常重要的手势识别widget，可以识别多种手势，包括拖动手势...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值