Flutter表格展示插件flutterx_table的使用

Flutter表格展示插件flutterx_table的使用

flutterx_table 是一个高度可定制的Flutter表格插件，支持选择、排序、操作等功能。

导入

首先，你需要导入该库：

import 'package:flutterx_table/flutterx_table.dart';

使用

下面是一个完整的示例，展示了如何在Flutter应用中使用flutterx_table插件。

示例代码

import 'dart:math';

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutterx_live_data/flutterx_live_data.dart';
import 'package:flutterx_table/flutterx_table.dart';
import 'package:flutterx_utils/flutterx_utils.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutterx Table Demo',
        theme: ThemeData(primarySwatch: Colors.blueGrey),
        home: const TableExample(),
      );
}

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

  @override
  State<TableExample> createState() => _TableExampleState();
}

class _TableExampleState extends State<TableExample> with ObserverMixin, StateObserver {
  static const letters = 'ABCDEFGHIKLMNOP'; // QRSTUVWXYZ
  static final columns = letters.split('').map((id) => TableColumn(id: id, label: Text(id))).toList(growable: false);
  final MutableLiveData<SortOptions?> _sortOptions = MutableLiveData();
  final List<int> _allItems = List.generate(189, (index) => index + 1);
  final LiveList<int> _items = LiveList();
  final LiveSet<int> _selection = LiveSet();
  final ScrollController _controllerX = ScrollController();
  final ScrollController _controllerY = ScrollController();
  late final MutableLiveData<PageInfo> _pageInfo = MutableLiveData(value: PageInfo.of(pageSize: 10, itemsCount: _allItems.length));

  @override
  void registerObservers() => observe2<PageInfo, SortOptions?>(_pageInfo, _sortOptions, _computeItems);

  void _computeItems(PageInfo page, SortOptions? sort) => _items.setTo(_allItems
      .sorted((sort?.order ?? SortOrder.desc).comparator)
      .sublist(page.startIndex, min(page.endIndex, _allItems.length)));

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: const Text('Table example')),
      body: SingleChildScrollView(child: Padding(padding: const EdgeInsets.all(32), child: _buildTable())));

  @override
  void dispose() {
    _controllerX.dispose();
    _controllerY.dispose();
    super.dispose();
  }

  Widget _buildTable() => Card(
        child: Column(crossAxisAlignment: CrossAxisAlignment.end, mainAxisSize: MainAxisSize.min, children: [
          IntrinsicHeight(
              child: ScrollableViewScrollbar.both(
                  controllerX: _controllerX,
                  controllerY: _controllerY,
                  child: ScrollableView(
                      controllerX: _controllerX,
                      controllerY: _controllerY,
                      matchContainerX: true,
                      child: XRawTable<int>(
                          border: const TableBorder(
                              horizontalInside: BorderSide(color: Colors.black38, width: .1),
                              bottom: BorderSide(color: Colors.black54, width: .1)),
                          columns: columns,
                          headingCellModifiers: const [
                            CellHeightModifier(height: 50, alignment: AlignmentDirectional.centerStart),
                            CellPaddingModifier(padding: EdgeInsets.symmetric(vertical: 18, horizontal: 18)),
                            SortArrowModifier(canClear: false),
                            HeadingCellTextStyleModifier(),
                          ],
                          defaultColumnWidth: const FixedColumnWidth(kMinInteractiveDimension * 5),
                          actions: TableActions<int>(actions: [
                            TableAction<int>(icon: const Icon(Icons.delete), onAction: _items.remove),
                            TableAction<int>(
                                icon: const Icon(Icons.copy), onAction: (item) => _items.insert(item, item)),
                          ]),
                          sortOptions: _sortOptions,
                          selection: TableSelection<int, int>(
                              primaryKey: (item) => item,
                              removeNonExistingItems: false,
                              selection: _selection),
                          items: _items,
                          rowBuilder: (context, index, item) {
                            final color = Colors.primaries[index % Colors.primaries.length];
                            return List.generate(
                                columns.length,
                                (col) =>
                                    Text('${columns[col].id.toUpperCase()} $item', style: TextStyle(color: color)));
                          })))),
          PagingIndicatorLayout(
              pageInfo: _pageInfo,
              scrollable: true,
              rowsPerPageIndicator: const RowsPerPageIndicator(availableRowsPerPage: {5, 10, 25, 50}),
              pageIndicator: const PagingIndexIndicator()),
        ]),
      );
}

代码解释

  1. 导入必要的包：

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

  2. 定义主应用类 MyApp：

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutterx Table Demo',
        theme: ThemeData(primarySwatch: Colors.blueGrey),
        home: const TableExample(),
      );
}

  3. 定义表格示例类 TableExample：

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

  @override
  State<TableExample> createState() => _TableExampleState();
}

  4. 定义状态类 _TableExampleState：

    class _TableExampleState extends State<TableExample> with ObserverMixin, StateObserver {
  // 定义表格列
  static const letters = 'ABCDEFGHIKLMNOP';
  static final columns = letters.split('').map((id) => TableColumn(id: id, label: Text(id))).toList(growable: false);

  // 定义LiveData变量
  final MutableLiveData<SortOptions?> _sortOptions = MutableLiveData();
  final List<int> _allItems = List.generate(189, (index) => index + 1);
  final LiveList<int> _items = LiveList();
  final LiveSet<int> _selection = LiveSet();

  // 滚动控制器
  final ScrollController _controllerX = ScrollController();
  final ScrollController _controllerY = ScrollController();

  // 分页信息
  late final MutableLiveData<PageInfo> _pageInfo = MutableLiveData(value: PageInfo.of(pageSize: 10, itemsCount: _allItems.length));

  // 注册观察者
  @override
  void registerObservers() => observe2<PageInfo, SortOptions?>(_pageInfo, _sortOptions, _computeItems);

  // 计算分页数据
  void _computeItems(PageInfo page, SortOptions? sort) => _items.setTo(_allItems
      .sorted((sort?.order ?? SortOrder.desc).comparator)
      .sublist(page.startIndex, min(page.endIndex, _allItems.length)));

  // 构建UI
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: const Text('Table example')),
        body: SingleChildScrollView(child: Padding(padding: const EdgeInsets.all(32), child: _buildTable())),
      );

  // 处理滚动控制器的释放
  @override
  void dispose() {
    _controllerX.dispose();
    _controllerY.dispose();
    super.dispose();
  }

  // 构建表格
  Widget _buildTable() => Card(
        child: Column(crossAxisAlignment: CrossAxisAlignment.end, mainAxisSize: MainAxisSize.min, children: [
          IntrinsicHeight(
              child: ScrollableViewScrollbar.both(
                  controllerX: _controllerX,
                  controllerY: _controllerY,
                  child: ScrollableView(
                      controllerX: _controllerX,
                      controllerY: _controllerY,
                      matchContainerX: true,
                      child: XRawTable<int>(
                          border: const TableBorder(
                              horizontalInside: BorderSide(color: Colors.black38, width: .1),
                              bottom: BorderSide(color: Colors.black54, width: .1)),
                          columns: columns,
                          headingCellModifiers: const [
                            CellHeightModifier(height: 50, alignment: AlignmentDirectional.centerStart),
                            CellPaddingModifier(padding: EdgeInsets.symmetric(vertical: 18, horizontal: 18)),
                            SortArrowModifier(canClear: false),
                            HeadingCellTextStyleModifier(),
                          ],
                          defaultColumnWidth: const FixedColumnWidth(kMinInteractiveDimension * 5),
                          actions: TableActions<int>(actions: [
                            TableAction<int>(icon: const Icon(Icons.delete), onAction: _items.remove),
                            TableAction<int>(
                                icon: const Icon(Icons.copy), onAction: (item) => _items.insert(item, item)),
                          ]),
                          sortOptions: _sortOptions,
                          selection: TableSelection<int, int>(
                              primaryKey: (item) => item,
                              removeNonExistingItems: false,
                              selection: _selection),
                          items: _items,
                          rowBuilder: (context, index, item) {
                            final color = Colors.primaries[index % Colors.primaries.length];
                            return List.generate(
                                columns.length,
                                (col) =>
                                    Text('${columns[col].id.toUpperCase()} $item', style: TextStyle(color: color)));
                          }))),
          ),
          PagingIndicatorLayout(
              pageInfo: _pageInfo,
              scrollable: true,
              rowsPerPageIndicator: const RowsPerPageIndicator(availableRowsPerPage: {5, 10, 25, 50}),
              pageIndicator: const PagingIndexIndicator()),
        ]),
      );
}

更多关于Flutter表格展示插件flutterx_table的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter表格展示插件flutterx_table的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 flutterx_table 插件在 Flutter 中展示表格的示例代码。flutterx_table 是一个用于在 Flutter 中创建和展示表格的流行插件。

首先，你需要在你的 pubspec.yaml 文件中添加 flutterx_table 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutterx_table: ^0.0.2  # 请检查最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中使用 flutterx_table 插件来创建一个表格。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Table Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<List<String>> data = [
    ['Name', 'Age', 'Email'],
    ['Alice', '24', 'alice@example.com'],
    ['Bob', '30', 'bob@example.com'],
    ['Charlie', '22', 'charlie@example.com'],
  ];

  final List<TableColumn> columns = [
    TableColumn(title: 'Name', width: 0.3),
    TableColumn(title: 'Age', width: 0.2),
    TableColumn(title: 'Email', width: 0.5),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Table Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TableView(
          columns: columns,
          rows: data,
          border: TableBorder.all(color: Colors.black, width: 1.0),
          cellPadding: EdgeInsets.all(8.0),
          headerDecoration: BoxDecoration(
            color: Colors.grey[300],
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了必要的包：flutter/material.dart 和 flutterx_table/flutterx_table.dart。
  2. 创建一个包含表格数据的 List<List<String>>，其中每一行代表表格中的一行数据。
  3. 定义一个 List<TableColumn> 来描述每一列的标题和宽度。width 参数是一个介于 0 和 1 之间的浮点数，表示该列相对于表格总宽度的比例。
  4. 使用 TableView 小部件来渲染表格。我们传递了列定义、行数据、边框样式、单元格内边距和表头装饰等参数。

这个示例展示了如何使用 flutterx_table 插件在 Flutter 应用中创建一个简单的表格。你可以根据需要进一步自定义表格的样式和功能。

回到顶部