Flutter水平数据展示插件horizontal_data_table的使用

horizontal_data_table 是一个Flutter插件，它创建了一个带有固定首列的水平表格。以下是关于该插件的安装、配置和使用的详细指南。

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  horizontal_data_table: ^latest_version # 替换为当前最新版本

然后运行以下命令来安装最新版本：

flutter pub add horizontal_data_table

根据不同的Dart SDK和Flutter版本，选择合适的包版本：

使用说明

基本用法

HorizontalDataTable 需要指定固定的左侧（或右侧）列宽度以及可滚动部分的最大宽度。下面是一个简单的例子，展示了如何创建一个水平数据表。

示例代码

import 'package:flutter/material.dart';
import 'package:horizontal_data_table/horizontal_data_table.dart';

class SimpleTablePage extends StatefulWidget {
  const SimpleTablePage({Key? key, required this.user}) : super(key: key);
  final User user;

  @override
  State<SimpleTablePage> createState() => _SimpleTablePageState();
}

class _SimpleTablePageState extends State<SimpleTablePage> {
  @override
  void initState() {
    widget.user.initData(3000); // 初始化数据
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Table')),
      body: HorizontalDataTable(
        leftHandSideColumnWidth: 100, // 固定左侧列宽
        rightHandSideColumnWidth: 600, // 可滚动部分宽度
        isFixedHeader: true, // 是否固定表头
        headerWidgets: _getTitleWidget(), // 表头组件
        isFixedFooter: true, // 是否固定表尾
        footerWidgets: _getTitleWidget(), // 表尾组件
        leftSideItemBuilder: _generateFirstColumnRow, // 左侧列生成器
        rightSideItemBuilder: _generateRightHandSideColumnRow, // 右侧列生成器
        itemCount: widget.user.userInfo.length, // 数据项数量
        rowSeparatorWidget: const Divider(color: Colors.black38, height: 1.0, thickness: 0.0), // 行分隔线
        leftHandSideColBackgroundColor: const Color(0xFFFFFFFF), // 左侧背景色
        rightHandSideColBackgroundColor: const Color(0xFFFFFFFF), // 右侧背景色
        itemExtent: 55, // 每行高度
      ),
    );
  }

  List<Widget> _getTitleWidget() {
    return [
      _getTitleItemWidget('Name', 100),
      _getTitleItemWidget('Status', 100),
      _getTitleItemWidget('Phone', 200),
      _getTitleItemWidget('Register', 100),
      _getTitleItemWidget('Termination', 200),
    ];
  }

  Widget _getTitleItemWidget(String label, double width) {
    return Container(
      width: width,
      height: 56,
      padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
      alignment: Alignment.centerLeft,
      child: Text(label, style: const TextStyle(fontWeight: FontWeight.bold)),
    );
  }

  Widget _generateFirstColumnRow(BuildContext context, int index) {
    return Container(
      width: 100,
      height: 52,
      padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
      alignment: Alignment.centerLeft,
      child: Text(widget.user.userInfo[index].name),
    );
  }

  Widget _generateRightHandSideColumnRow(BuildContext context, int index) {
    return Row(
      children: <Widget>[
        Container(
          width: 100,
          height: 52,
          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
          alignment: Alignment.centerLeft,
          child: Row(
            children: <Widget>[
              Icon(
                widget.user.userInfo[index].status ? Icons.notifications_off : Icons.notifications_active,
                color: widget.user.userInfo[index].status ? Colors.red : Colors.green,
              ),
              Text(widget.user.userInfo[index].status ? 'Disabled' : 'Active')
            ],
          ),
        ),
        Container(
          width: 200,
          height: 52,
          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
          alignment: Alignment.centerLeft,
          child: Text(widget.user.userInfo[index].phone),
        ),
        Container(
          width: 100,
          height: 52,
          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
          alignment: Alignment.centerLeft,
          child: Text(widget.user.userInfo[index].registerDate),
        ),
        Container(
          width: 200,
          height: 52,
          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
          alignment: Alignment.centerLeft,
          child: Text(widget.user.userInfo[index].terminationDate),
        ),
      ],
    );
  }
}

其他功能

下拉刷新和加载更多

通过设置 enablePullToRefresh 和 enablePullToLoadNewData 属性可以启用下拉刷新和加载更多功能。同时需要提供相应的回调函数 onRefresh 和 onLoad 来处理刷新和加载事件。

HorizontalDataTable(
  enablePullToRefresh: true,
  refreshIndicator: const WaterDropHeader(),
  onRefresh: _onRefresh,
  enablePullToLoadNewData: true,
  onLoad: _onLoad,
  ...
)

自定义滚动条样式

可以通过 verticalScrollbarStyle 和 horizontalScrollbarStyle 属性自定义垂直和水平滚动条的样式。

ScrollbarStyle verticalScrollbarStyle = ScrollbarStyle(
  isAlwaysShown: true,
  thumbColor: Colors.grey,
  thickness: 8.0,
  radius: Radius.circular(4.0),
);

ScrollbarStyle horizontalScrollbarStyle = ScrollbarStyle(
  isAlwaysShown: true,
  thumbColor: Colors.grey,
  thickness: 8.0,
  radius: Radius.circular(4.0),
);

注意事项

• 版本更新：从4.xx版本开始，移除了 horizontalScrollController 和 verticalScrollController，改用 onScrollControllerReady 获取 ScrollController。

  onScrollControllerReady: (vertical, horizontal) {
    _verticalScrollController = vertical;
    _horizontalScrollController = horizontal;
  },
  

• 性能优化：对于大数据量的情况，建议使用 itemExtent 来固定每一行的高度，以提高渲染效率。

结论

horizontal_data_table 提供了丰富的配置选项，能够满足大多数水平表格的需求。通过合理配置，你可以轻松地实现复杂的表格布局，并且可以根据业务需求进行扩展。希望这篇文档能帮助你更好地理解和使用这个强大的Flutter插件。