flutter 实现可以上下左右滑动的表格

前言： 好久没写过文章了，最近在使用flutter开发项目，于是乎想简单记录一下开发过程中遇到的一些好玩的东西或者经常会遇到的功能开发。

欢迎关注我的flutter项目，里面会记录控件使用及各种常用功能的开发https://github.com/student9128/FlutterStudy

开发过程中经常遇到需要做可以上下左右滑动的类型的表格的实现，这里提供一种自己实现的方案

鉴于这个功能难度不是很大，仅仅就是布局和联动的实现，所以代码很少

效果

废话不多说，先上效果

布局

根据表格滑动的结构，可以看到布局结构如下，分别是横向滑动的标题，横向滑动的内容和上下滑动的标题+内容。

联动代码

@override
void initState() {
  super.initState();
  _titleController.addListener(_updateContent);
  _contentController.addListener(_updateTitle);
}

void _updateTitle() {
  if (_titleController.offset != _contentController.offset) {
    _titleController.jumpTo(_contentController.offset);
  }
}

void _updateContent() {
  if (_contentController.offset != _titleController.offset) {
    _contentController.jumpTo(_titleController.offset);
  }
}

源代码查看
https://github.com/student9128/FlutterStudy/blob/main/lib/advanced/vh_scrollable_table_page.dart

本篇文章已同时发布到个人公众号,掘进社区
爱学习的同学欢迎关注我的个人公众号，一起学习