Flutter可扩展表格插件custom_expandable_table的使用

Flutter可扩展表格插件custom_expandable_table的使用

custom_expandable_table 是一个用于 Flutter 的表格插件，它允许你创建具有固定表头和第一列的表格。此外，它还支持嵌套行和列，并且可以通过展开功能来组织数据。

特性

  • 表头和第一列固定
  • 支持垂直和水平滚动
  • 可自定义动画持续时间和曲线效果

使用方法

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_expandable_table: <last-release>

然后运行 flutter pub get 来安装该包。

基本设置

完整的示例代码可以在 GitHub 上找到。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Expandable Table Example')),
        body: ExpandableTableExample(),
      ),
    );
  }
}

class ExpandableTableExample extends StatefulWidget {
  [@override](/user/override)
  _ExpandableTableExampleState createState() => _ExpandableTableExampleState();
}

class _ExpandableTableExampleState extends State<ExpandableTableExample> {
  List<List<String>> rows = [
    ['Row 1', 'Cell 1', 'Cell 2'],
    ['Row 2', 'Cell 3', 'Cell 4'],
    ['Row 3', 'Cell 5', 'Cell 6'],
  ];

  List<String> header = ['Header', 'Column 1', 'Column 2'];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ExpandableTable(
      header: header.map((text) => Text(text)).toList(), // 表头
      rows: rows.map((row) => row.map((text) => Text(text)).toList()).toList(), // 表格内容
      cellWidth: 100, // 默认单元格宽度
      cellHeight: 50, // 默认单元格高度
      headerHeight: 50, // 表头高度
      firstColumnWidth: 150, // 第一列宽度
      scrollShadowColor: Colors.grey[300], // 滚动阴影颜色
    );
  }
}

ExpandableTable 属性说明

以下是 ExpandableTable 的主要属性及其作用：

属性名 描述
header 包含表头的 widget 列表。
rows 包含表格主体行的 widget 列表。
cellWidth 设置默认单元格宽度，可以通过单元格属性覆盖。
cellHeight 设置默认单元格高度，可以通过行属性覆盖。
headerHeight 设置表头行的高度。
firstColumnWidth 设置第一列的宽度。
duration 设置行/列展开动画的持续时间。
curve 设置行/列展开动画的曲线效果。
scrollShadowDuration 设置滚动阴影动画的持续时间。
scrollShadowCurve 设置滚动阴影动画的曲线效果。
scrollShadowColor 设置滚动阴影的颜色。
visibleScrollbar 控制是否显示滚动条。

动态数据示例

如果需要动态加载数据，可以将 rows 和 header 替换为从 API 或其他来源获取的数据。

List<List<String>> rows = [];
List<String> header = [];

[@override](/user/override)
void initState() {
  super.initState();
  // 模拟异步数据加载
  Future.delayed(Duration(seconds: 2), () {
    setState(() {
      rows = [
        ['Row 1', 'Cell 1', 'Cell 2'],
        ['Row 2', 'Cell 3', 'Cell 4'],
      ];
      header = ['Header', 'Column 1', 'Column 2'];
    });
  });
}

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

1 回复

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


custom_expandable_table 是一个用于 Flutter 的可扩展表格插件，允许你创建具有可扩展行的表格。这个插件非常适合展示具有层次结构的数据，例如带有子项的项目列表。

安装

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

dependencies:
  flutter:
    sdk: flutter
  custom_expandable_table: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示如何使用 custom_expandable_table 创建一个可扩展的表格。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expandable Table Example'),
        ),
        body: ExpandableTableExample(),
      ),
    );
  }
}

class ExpandableTableExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: CustomExpandableTable(
        header: const TableRow(
          children: [
            TableCell(child: Text('ID')),
            TableCell(child: Text('Name')),
            TableCell(child: Text('Age')),
          ],
        ),
        rows: [
          ExpandableTableRow(
            isExpanded: false,
            children: [
              TableCell(child: Text('1')),
              TableCell(child: Text('John Doe')),
              TableCell(child: Text('30')),
            ],
            expandedChild: TableRow(
              children: [
                TableCell(child: Text('Details for John Doe')),
                TableCell(child: Text('More info...')),
                TableCell(child: Text('Additional data')),
              ],
            ),
          ),
          ExpandableTableRow(
            isExpanded: false,
            children: [
              TableCell(child: Text('2')),
              TableCell(child: Text('Jane Smith')),
              TableCell(child: Text('25')),
            ],
            expandedChild: TableRow(
              children: [
                TableCell(child: Text('Details for Jane Smith')),
                TableCell(child: Text('More info...')),
                TableCell(child: Text('Additional data')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

解释

  1. CustomExpandableTable: 这是主要的表格组件，它接受 header 和 rows 作为参数。

    • header: 定义表格的标题行。
    • rows: 定义表格的数据行，每个行可以是 ExpandableTableRow。

  2. ExpandableTableRow: 这是表格中的每一行，它包含 children 和 expandedChild。

    • children: 定义行的主要内容。
    • expandedChild: 定义当行展开时显示的内容。

  3. isExpanded: 控制行是否默认展开。

自定义样式

你可以通过 CustomExpandableTable 的 headerStyle 和 rowStyle 参数来自定义表格的样式。

CustomExpandableTable(
  headerStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
  rowStyle: TextStyle(fontSize: 14),
  header: const TableRow(
    children: [
      TableCell(child: Text('ID')),
      TableCell(child: Text('Name')),
      TableCell(child: Text('Age')),
    ],
  ),
  rows: [
    // 行数据
  ],
);

处理行展开/折叠事件

你可以通过 onRowExpanded 和 onRowCollapsed 回调来处理行展开和折叠事件。

CustomExpandableTable(
  onRowExpanded: (index) {
    print('Row $index expanded');
  },
  onRowCollapsed: (index) {
    print('Row $index collapsed');
  },
  header: const TableRow(
    children: [
      TableCell(child: Text('ID')),
      TableCell(child: Text('Name')),
      TableCell(child: Text('Age')),
    ],
  ),
  rows: [
    // 行数据
  ],
);
回到顶部