Flutter数据表格展示插件 mahop_data_table 的使用

mahop_data_table 是一个功能强大的 Flutter 插件，用于展示和操作大型数据表格。它支持虚拟滚动、拖拽排序、列宽调整、过滤等功能，并且可以处理百万级别的数据行。

主要特性

• 虚拟滚动：即使在不同行高情况下也能完美滚动。
• 拖拽与排序：支持内部和跨组件的拖拽操作。
• 列宽调整与排序：保存并恢复布局状态。
• 多选模式：单选、复选框选择以及扩展选择。
• 更多功能：包括跳转到指定行、内联编辑等。

示例代码

下面是一个简单的示例，展示了如何使用 MhItemsView 来显示一个包含100个项目的表格。

import 'package:flutter/material.dart';
import 'package:mahop_data_table/mh_items_view/mh_items_view.dart';
import 'package:mahop_data_table/mh_items_view/mh_items_view_settings.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Data Table Example',
      home: MyHomePage(title: 'MaHop Flutter Data Table Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // 构建示例数据
    final List<ExampleItem> items = [];
    for (var i = 1; i <= 100; i++) {
      items.add(ExampleItem(text: "Example Item $i", index: i));
    }

    // 定义列
    List<MhItemsViewColumnDef<ExampleItem>> columnDefs = [];
    columnDefs.add(MhItemsViewColumnDef<ExampleItem>(
        id: "index",
        header: "Index",
        columnWidth: 50,
        getDisplayValue: (item) => item.index));
    columnDefs.add(MhItemsViewColumnDef<ExampleItem>(
        id: "text",
        header: "Text",
        columnWidth: 250,
        getDisplayValue: (item) => item.text));
    columnDefs.add(MhItemsViewColumnDef<ExampleItem>(
        id: "calculated",
        header: "Calculated",
        columnWidth: 250,
        getDisplayValue: (item) => item.index * item.index));

    // 设置
    final settings = MhItemsViewSettings<ExampleItem>(
      rowHeight: 25,
      headerHeight: 30,
      displayHeader: true,
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: MhItemsView<ExampleItem>(
                itemsSource: items, columnDefs: columnDefs, settings: settings),
          ),
        ],
      ),
    );
  }
}

class ExampleItem {
  String text;
  int index;

  ExampleItem({required this.text, required this.index});

  @override
  String toString() {
    return "Example item $index";
  }
}

更多功能

对于更复杂的应用场景，mahop_data_table 提供了更多的高级功能，如树形视图（TreeView）、层次化数据表（TreeListView）等。你可以访问 官方文档 获取更多信息和示例代码。

希望这个简短的介绍能帮助你快速上手 mahop_data_table 插件！如果有任何问题或需要进一步的帮助，请参考上述链接中的资源。