Flutter高级表格插件table_advanced的使用

Flutter高级表格插件table_advanced的使用

该软件包包含一个用于Flutter项目的表格。
该表格可以以普通模式或分页模式显示。此外，分页可以通过滚动管理或者通过导航控件来管理。在较小的屏幕上，表格具有响应式行为，可以实现垂直或水平滚动。行是使用ListView构建器构建的，这意味着即使有大量数据也不会出现性能问题。

使用

该表格需要一个控制器来设置项目并管理分页。小部件构建器用于构建列头和行。

要在普通模式下初始化表格，即不使用分页并且所有项目都已经显示出来，可以按如下方式初始化该小部件：

return TableAdvanced<String>(
    columnHeaders: [
        TableAdvancedColumnHeader(
        child: const Text("属性 1"),
        ),
        TableAdvancedColumnHeader(
        child: const Text("属性 2"),
        ),
    ],
    rowBuilder: (item) {
        return TableAdvancedRow(
            data: DataRow(cells: [
                DataCell(
                    Text(item),
                ),
                DataCell(
                    Container(color: Colors.red, child: const Text("测试值"))
                ),
            ],
            ),
        );
    },
    controller: TableAdvancedController(
        items: List.generate(99, (index) => index.toString()),
        mode: TableMode.plain,
    ),
);

对于有关列头和行的具体属性，请查看其类文档。

如果您想为表格行启用复选框，可以在TableAdvancedController中传递onCheckItems参数。您还可以使用控制器的onChangePage回调，在用户更改表格页面或滚动到底部时加载新数据。

如果您设置TableMode.paginationPage模式，分页将通过导航控件进行管理，并且每次页面更改时都会替换表格内容。您可以使用默认的分页样式，也可以使用paginationBuilder参数覆盖它。

相反，如果使用TableMode.paginationScroll，当用户滚动到表格底部时会显示新内容，并在列表末尾追加新项。

控制器可用于编程方式更改页面（goToPage）或更改表格项目（setItems），可以向表格添加项目或将项目完全替换。
记得在需要时释放控制器。

其他信息

此软件包由Mobilesoft Srl的Flutter能力中心维护。

完整示例

以下是完整的示例代码，展示了如何使用table_advanced插件创建一个具有分页功能的表格。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: TableAdvanced<String>(
        columnHeaders: [
          TableAdvancedColumnHeader(
            child: const Text("列头 1"),
          ),
          TableAdvancedColumnHeader(
            child: const Text("列头 2"),
          ),
        ],
        rowBuilder: (item) {
          return TableAdvancedRow(
              data: DataRow(cells: [
            DataCell(
              Text(item),
            ),
            DataCell(
                Container(color: Colors.red, child: const Text("测试值")))
          ]));
        },
        controller: TableAdvancedController(
          items: List.generate(99, (index) => index.toString()),
          mode: TableMode.paginationPage,
          onCheckItems: (items) {},
        ),
      ),
    );
  }
}