Flutter表格展示插件vit_table的使用

Flutter表格展示插件vit_table的使用

功能介绍

vit_table 插件用于生成一个可以根据可用宽度自适应列宽的表格。该插件提供了以下功能：

• 可以通过自定义小部件来定制每个单元格。
• 根据 priority 列隐藏列。
• 可以设置固定高度或根据内容动态扩展高度。
• 每个列可以接受排序函数。
• 当表格为空时，可以显示指定的小部件。
• 支持水平滚动。

表格高度

如果未设置高度，则表格会根据行数自动扩展。

可以通过在创建样式时设置 height 属性来设定表格的高度：

style: const VitTableStyle(
  height: 150,
),

如果希望表格至少有某个高度，可以使用 minHeight 属性：

style: const VitTableStyle(
  minHeight: 300,
),

列宽

列默认宽度为150像素，可以通过设置 width 属性来自定义列宽：

VitTableColumn(title: 'Actions', width: 100),

可以通过设置 expandable 属性使列可扩展：

VitTableColumn(
  title: 'Profile',
  width: 200,
  expandable: true,
),

这会使列至少具有设定的宽度（例如200像素），但如果有额外的水平空间，带有 expandable: true 的列将会扩展。然而，如果启用了水平滚动 (enableHorizontalScroll)，则 expandable 将不起作用。

优先级

优先级系统使优先级较高的列在空间不足时消失。

例如：

columns: [
  VitTableColumn(title: 'Code', width: 60, priority: 1),
  VitTableColumn(title: 'Name', priority: 2), // 150 width assumed
  VitTableColumn(title: 'Gender', width: 100, priority: 4),
],

在此示例中，如果表格宽度至少为310像素，则所有列都将可见。如果可用宽度为280像素，则 “Gender” 列将不可见。如果可用宽度仅为100像素，则仅显示 “Code” 列。

如果启用水平滚动 (enableHorizontalScroll)，则优先级将不起作用，因为列不会消失。

路线图

未来计划的功能包括：

• 自定义表头：
  • 接受任何小部件显示在表头。
  • 更改表头的文本样式。
  • 更改表头的背景颜色。
• 自定义行背景颜色；
• 自定义行背景小部件；
• 自定义表格边框颜色和圆角。

示例代码

以下是使用 vit_table 插件的完整示例代码：

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:vit_table/data/models/page_navigator_options.dart';
import 'package:vit_table/data/models/page_navigator_theme.dart';
import 'package:vit_table/data/models/vit_table_column.dart';
import 'package:vit_table/data/models/vit_table_row.dart';
import 'package:vit_table/ui/components/organisms/vit_table.dart';
import 'package:vit_table/ui/theme/vit_table_style.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Profile> profiles = [
    Profile('Administrator', DateTime.now()),
    Profile('Manager', DateTime(2020, 1, 18)),
    Profile('Student', DateTime(2024, 3, 5)),
  ];

  bool isAscSort = true;
  int? sortColumnIndex;

  bool enablePageNavigator = false;
  int currentPage = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VitTable demo',
      scrollBehavior: const MaterialScrollBehavior().copyWith(
        dragDevices: PointerDeviceKind.values.toSet(),
      ),
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: PageView(
          children: [
            SingleChildScrollView(
              padding: const EdgeInsets.all(10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('Simple table example:'),
                  const SizedBox(height: 5),
                  _simpleTable(),
                  const SizedBox(height: 30),
                  const Text('Complex table example:'),
                  const SizedBox(height: 5),
                  _complexTable(),
                  const SizedBox(height: 30),
                  const Text('Large table'),
                  const SizedBox(height: 5),
                  _wideTable(),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: _largeTable(),
            ),
          ],
        ),
      ),
    );
  }

  Column _largeTable() {
    var totalRows = 300;
    var desiredPages = 15;
    var pageSize = totalRows ~/ desiredPages;
    return Column(
      children: [
        Row(
          children: [
            const Text('A table with multiple rows'),
            const Spacer(),
            Switch.adaptive(
              value: enablePageNavigator,
              onChanged: (value) {
                setState(() {
                  enablePageNavigator = value;
                });
              },
            ),
          ],
        ),
        const SizedBox(height: 5),
        Expanded(
          child: VitTable(
            enableHorizontalScroll: true,
            columns: [
              VitTableColumn(title: 'Index'),
              VitTableColumn(title: 'Enabled', expandable: true),
              VitTableColumn(title: 'Number')
            ],
            rows: List.generate(pageSize, (index) {
              var random = Random();
              var rowId = (currentPage * pageSize) + index + 1;
              return VitTableRow(
                cells: [
                  Text(rowId.toString()),
                  Text(random.nextBool().toString()),
                  Text(random.nextInt(1000).toString()),
                ],
              );
            }),
            style: const VitTableStyle(
              pageNavigatorThemeData: PageNavigatorThemeData(
                options: PageNavigatorOptions(
                  showEdgePages: true,
                ),
              ),
            ),
            pageCount: desiredPages,
            currentPageIndex: currentPage,
            onPageSelected: enablePageNavigator
                ? (pageIndex) {
                    setState(() {
                      currentPage = pageIndex;
                    });
                  }
                : null,
          ),
        ),
      ],
    );
  }

  VitTable _complexTable() {
    return VitTable(
      style: const VitTableStyle(
        innerBottom: SizedBox(
          height: 40,
          child: Center(
            child: Icon(Icons.add),
          ),
        ),
      ),
      sortColumnIndex: sortColumnIndex,
      isAscSort: isAscSort,
      columns: [
        VitTableColumn(title: 'Select', width: 70),
        VitTableColumn(
          title: 'Profile',
          expandable: true,
          onSort: (asc) {
            _sort(1, (profile) => profile.name);
          },
        ),
        VitTableColumn(
          title: 'Created on',
          onSort: (asc) {
            _sort(2, (profile) => profile.createdAt.toString());
          },
        ),
        VitTableColumn(title: 'Actions', width: 100),
      ],
      rows: [
        for (var profile in profiles)
          VitTableRow(
            cells: [
              Checkbox(
                  value: profile.name.startsWith('A'), onChanged: (value) {}),
              Text(profile.name),
              Text(profile.createdAt.toString()),
              const Icon(Icons.edit),
            ],
          )
      ],
    );
  }

  Widget _wideTable() {
    return VitTable(
      enableHorizontalScroll: true,
      columns: [
        VitTableColumn(title: 'Nº', width: 60),
        VitTableColumn(title: 'Id', width: 350),
        VitTableColumn(
          title: 'Name',
          expandable: true,
        ),
        VitTableColumn(title: 'Email'),
        VitTableColumn(title: 'Date', width: 100),
        VitTableColumn(title: 'Actions', width: 100),
      ],
      rows: const [
        VitTableRow(
          cells: [
            Text('1'),
            Text('e90624df-5d34-5a72-b16f-916a442e8810'),
            Text('Dale Logan'),
            Text('zojpi@huw.ve'),
            Text('10/3/2116'),
            Icon(Icons.edit),
          ],
        ),
        VitTableRow(
          cells: [
            Text('2'),
            Text('7857197a-c9ac-590e-b443-76832759a260'),
            Text('Gavin Nguyen'),
            Text('vapu@ruico.tg'),
            Text('5/3/2024'),
            Icon(Icons.edit),
          ],
        ),
      ],
    );
  }

  void _sort(int index, String Function(Profile) valueGetter) {
    sortColumnIndex = index;
    isAscSort = !isAscSort;
    int Function(Profile, Profile) sortFn;
    if (isAscSort) {
      sortFn = (a, b) => valueGetter(a).compareTo(valueGetter(b));
    } else {
      sortFn = (a, b) => valueGetter(b).compareTo(valueGetter(a));
    }
    profiles.sort(sortFn);
    setState(() {});
  }

  VitTable _simpleTable() {
    return VitTable(
      style: const VitTableStyle(
        height: 150,
      ),
      columns: [
        VitTableColumn(title: 'Code', width: 60, priority: 1),
        VitTableColumn(title: 'Name', priority: 2),
        VitTableColumn(title: 'Gender', width: 100, priority: 4),
        VitTableColumn(title: 'Birth', width: 100, priority: 3),
      ],
      rows: const [
        VitTableRow(
          cells: [
            Text('1'),
            Text('Roy Williamson'),
            Text('Male'),
            Text('6/13/2001'),
          ],
        ),
        VitTableRow(
          cells: [
            Text('2'),
            Text('Thomas Casey'),
            Text('Male'),
            Text('5/27/1988'),
          ],
        ),
        VitTableRow(
          cells: [
            Text('3'),
            Text('Josephine Floyd'),
            Text('Male'),
            Text('12/9/1986'),
          ],
        ),
        VitTableRow(
          cells: [
            Text('4'),
            Text('Susan Harvey'),
            Text('Female'),
            Text('9/24/1999'),
          ],
        ),
      ],
    );
  }
}

class Profile {
  String name;
  DateTime createdAt;

  Profile(this.name, this.createdAt);
}