Flutter开发 - 可以上下左右滚动的表格开发，可下拉刷新，可上拉加载，这样的表格，你爱了么

最新推荐文章于 2024-08-28 09:07:59 发布

CodingFire

最新推荐文章于 2024-08-28 09:07:59 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter实用开发技巧合集文章标签：表格 flutter表格 flutter 上下左右滚动滚动表格

本文链接：https://blog.youkuaiyun.com/CodingFire/article/details/114966811

Flutter实用开发技巧合集专栏收录该内容

34 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Flutter中创建一个可上下左右滚动的表格，同时保持表头固定的挑战。博主分享了自己的尝试，包括自定义表格的缺点以及寻找现有轮子如`syncfusion_flutter_datagrid`和`horizontal_data_table`的过程。虽然`syncfusion_flutter_datagrid`的刷新和加载存在问题，而`horizontal_data_table`仅支持下拉刷新，但通过修改`horizontal_data_table`，博主实现了上拉加载功能。文章提供了完整的代码示例，帮助读者理解和应用。

近期有一个关于数据报表的需求，需要表格可以上下左右的滑动，且滑动过程中左边和上边的表头固定不动，这不活脱脱的Excel么？尝试了多种办法来处理：

1.自己写，左右滑动时，左边序号表头可固定，但是上下滑动时，顶部的表头无法固定，且很难实现下拉刷新和上拉加载的需求，比较适用于那些固定数据的表格，整体看起来还是很美观的，也是利用了系统提供的一些组件来实现：
在这里插入图片描述

下面给大家看下完整的代码实现，并解析下：

import 'package:flutter/material.dart';

class TableDemo extends StatefulWidget {
  @override
  _TableDemoState createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo> with SingleTickerProviderStateMixin {

  List<DataColumn> _dataColumns = [];

  List<DataRow> _dataRows = [];

  List<Widget> _rowTitles = [];
  List<Widget> _columnTitles = [];

  @override

  void initState() {
    super.initS