Flutter高级表格展示插件advanced_table的使用

Flutter高级表格展示插件advanced_table的使用

Advanced Table

注意：🚧 正在积极开发中。🚧

AdvancedTable 是一个提供了高级功能且更易于使用的表格组件，它通过允许对象以JSON表示的形式进行通用显示。

目录

• 开始使用
• 展示
• 用法
  • 操作
  • 链接
  • 空值
  • 列表显示文本
• 限制
• 未来更新
• 错误、问题等

开始使用

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

dependencies:
    advanced_table: ^1.1.0

或者，通过终端添加依赖：

flutter pub add advanced_table

使用包时，导入：

import 'package:advanced_table/advanced_table.dart';

展示

用法

由于表格通过提供通用数据来工作，你需要创建一个简单的数据类。确保你提供了 toJson 方法，否则由于反射限制，表格将无法正常工作：

class Person {
  int age;
  String firstName;
  String lastName;
  List<String> favouriteFood;

  Person({
    required this.age,
    required this.firstName,
    required this.lastName,
    required this.favouriteFood,
  });

  Map<String, dynamic> toJson() => {
        'age': age,
        'firstName': firstName,
        'lastName': lastName,
        'favouriteFood': favouriteFood,
      };
}

一旦创建了数据类，你可以继续使用 AdvancedTable。这里的想法是你希望传递一个对象列表。此外，你需要为 Person 类中的每个字段提供一个 ColumnDefinition。确保 valueKey 属性与 Person#toJson 中的一个条目键匹配：

return MaterialApp(
  title: 'Example',
  home: Scaffold(
    body: AdvancedTable<Person>(
      columnDefinitions: [
        ColumnDefinition<int>(valueKey: 'age', title: const Text('Age')),
        ColumnDefinition<String>(
            valueKey: 'firstName', title: const Text('First name')),
        ColumnDefinition<String>(
            valueKey: 'lastName', title: const Text('Last name')),
        ColumnDefinition<List<String>>(
            valueKey: 'favouriteFood', title: const Text('Favourite Food')),
      ],
      data: [
        Person(
            age: 17,
            firstName: 'John',
            lastName: 'Smith',
            favouriteFood: ['Burger', 'Pizza']),
        Person(
            age: 17,
            firstName: 'Helena',
            lastName: 'Morgan',
            favouriteFood: ['Sushi', 'Pizza']),
      ],
    ),
  ),
);

操作

可以在 AdvancedTable 的表头行上方放置实用小部件：

AdvancedTable<Person>(
  columnDefinitions: ...,
  data: ...,
  actions: [
    IconButton(onPressed: () {}, icon: const Icon(Icons.sort)),
  ],
),

链接

可以通过向 ColumnDefinition 传递 isLink 来使单元格值可点击。你可能还想定义一个 linkValueClicked 以响应链接被点击。这是对 Uri 类型的默认行为。

示例：

ColumnDefinition<String>(
  valueKey: 'id',
  title: 'User ID',
  isLink: true,
  linkValueClicked: (value) {
    print('I was clicked');
  },
),

空值

AdvancedTable 可以显示 null 值。只需确保为 ColumnDefinition 的类型添加 ?：

ColumnDefinition<List<String>?>(
  valueKey: 'favouriteFood', title: const Text('Favourite Food')),

你还可以配置 NullValueStrategy 以自定义显示为 null 的值的文本。默认情况下使用 NullValueStrategy.hyphen。

列表显示文本

当定义 ColumnDefinition<List> 时，可以配置单元格中显示文本的方式。目前可以自定义 listSeparator 和 listBrackets。默认情况下使用 ListSeparator.comma 和 ListBrackets.square。

只需在创建 AdvancedTable 时传递所需值：

AdvancedTable<Person>(
  columnDefinitions: ...,
  data: ...,
  listSeparator: ListSeparator.semicolon,
  listBrackets: ListBrackets.curly,
),

限制

目前，ColumnDefinition 只支持 String、num、Enum、DateTime、Uri 和 List 类型。

未来更新

目前计划增加以下功能：

• 数据搜索、过滤和排序
• 数据编辑
• 列顺序移动
• 样式定制

要了解进度，请访问 Advanced Table 项目板。

错误、问题等

如果你发现任何奇怪的行为、错误或问题，请通过打开 问题 来告知我。如果UI表现不同，请附上一张图片或动图。

示例代码

import 'package:advanced_table/src/advanced_table.dart';
import 'package:advanced_table/src/column_definition.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatefulWidget {
  const ExampleApp({super.key});

  [@override](/user/override)
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        body: AdvancedTable<Person>(columnDefinitions: [
          ColumnDefinition<int>(
              valueKey: 'age',
              title: 'Age',
              isLink: true,
              linkValueClicked: (age) {
                debugPrint(age.toString());
              }),
          ColumnDefinition<String>(
            valueKey: 'firstName',
            title: 'First name',
          ),
          ColumnDefinition<String>(
            valueKey: 'lastName',
            title: 'Last name',
          ),
          ColumnDefinition<Gender>(
            valueKey: 'gender',
            title: 'Gender',
          ),
          ColumnDefinition<List<String>?>(
            valueKey: 'food',
            title: 'Favourite Food',
          ),
        ], data: [
          Person(
              age: 17,
              firstName: 'Hallo',
              lastName: 'Welt',
              gender: Gender.male,
              food: null),
          Person(
              age: 17,
              firstName: 'Hallo',
              lastName: 'Welt',
              gender: Gender.male,
              food: List.of(['this', 'that'])),
          Person(
              age: 17,
              firstName: 'Hallo',
              lastName: 'Welt',
              gender: Gender.male,
              food: List.of(['this', 'that'])),
          Person(
              age: 17,
              firstName: 'Hallo',
              lastName: 'Welt',
              gender: Gender.male,
              food: List.of(['this', 'that']))
        ]),
      ),
    );
  }
}

class Person {
  int age;
  String firstName;
  String lastName;
  Gender gender;
  List<String>? food;

  Person({
    required this.age,
    required this.firstName,
    required this.lastName,
    required this.gender,
    required this.food,
  });

  Map<String, dynamic> toJson() => {
        'age': age,
        'firstName': firstName,
        'lastName': lastName,
        'gender': gender,
        'food': food,
      };
}

enum Gender {
  male,
  female,
  diverse,
}