Flutter交互式表格插件interactive

Flutter交互式表格插件interactive_table的使用

Pub Version

InteractiveDataTable 是一个类似于 DataTable 的表格组件，内置了粘性表头、缩放和滚动功能，旨在轻松替换 Flutter 的 DataTable。

特点

粘性表头
可缩放的内容
可拖拽
可滚动
滚动条
双击缩放
根据内容自动计算列宽（基于 Flutter DataTable 的算法）

使用方法

注意： 类似于 DataTable2，不要将 InteractiveDataTable 放置在无边界父元素内。你不再需要手动添加滚动控件（例如 SingleChildScrollView）。如果需要将 InteractiveDataTable 放置在 Column 中，请用 Expanded 或 Flexible 包裹它。

步骤

按照安装页面上的说明安装包。

导入包：

import 'package:interactive_table/interactive_table.dart';

使用 InteractiveDataTable 组件：

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

  final String title = 'InteractiveDataTable Example';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: InteractiveDataTable(
        transformedDataTableBuilder: TransformedDataTableBuilder(
          columns: const [
            DataColumn(label: Text('Column 1')),
            DataColumn(label: Text('Column 2')),
            DataColumn(label: Text('Column 3')),
            DataColumn(label: Text('Column 4')),
            DataColumn(label: Text('Column 5')),
          ],
          rows: [
            for (int i = 1; i <= 20; i++)
              DataRow(
                cells: [
                  DataCell(Text('Row $i, Cell 1')),
                  DataCell(Text('Row $i, Cell 2')),
                  DataCell(Text('Row $i, Cell 3')),
                  DataCell(Text('Row $i, Cell 4')),
                  DataCell(Text('Row $i, Cell 5')),
                ],
                onSelectChanged: (_) {
                  print('Row $i tapped');
                },
              ),
          ],
        ),
      ),
    );
  }
}

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

itying888 1楼•3 天前

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

当然，下面是一个关于如何在Flutter中使用interactive_table插件的示例代码。interactive_table是一个允许你创建交互式表格的插件，非常适合在Flutter应用中展示和编辑数据。

首先，确保你已经将interactive_table插件添加到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  interactive_table: ^最新版本号 # 请替换为实际的最新版本号

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

接下来是一个简单的示例代码，展示如何使用interactive_table插件来创建一个交互式表格：

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

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

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

class InteractiveTableDemo extends StatefulWidget {
  @override
  _InteractiveTableDemoState createState() => _InteractiveTableDemoState();
}

class _InteractiveTableDemoState extends State<InteractiveTableDemo> {
  // 表格数据
  final List<Map<String, dynamic>> tableData = [
    {"Name": "Alice", "Age": 30, "City": "New York"},
    {"Name": "Bob", "Age": 25, "City": "Los Angeles"},
    {"Name": "Charlie", "Age": 35, "City": "Chicago"},
  ];

  // 列配置
  final List<TableColumn> columns = [
    TableColumn(
      title: "Name",
      dataIndex: "Name",
      editable: true,
    ),
    TableColumn(
      title: "Age",
      dataIndex: "Age",
      editable: true,
      // 自定义编辑器
      editor: (value, onChange) {
        return TextField(
          value: value?.toString() ?? "",
          onSubmitted: (newValue) => onChange(int.tryParse(newValue) ?? value),
          decoration: InputDecoration(border: OutlineInputBorder()),
        );
      },
    ),
    TableColumn(
      title: "City",
      dataIndex: "City",
      editable: true,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Interactive Table Demo"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: InteractiveTable(
          columns: columns,
          data: tableData,
          onSave: (newData) {
            // 保存表格数据后的回调
            setState(() {
              tableData.clear();
              tableData.addAll(newData);
            });
            print("Saved Data: $newData");
          },
        ),
      ),
    );
  }
}

在这个示例中：

我们定义了一个包含一些示例数据的tableData列表。
我们配置了表格的列，包括标题、数据索引和是否可编辑。
对于年龄列，我们提供了一个自定义的编辑器，允许用户输入并解析整数。
InteractiveTable组件接收列配置和数据，并在用户保存更改时调用onSave回调。

运行这个示例，你将会看到一个可编辑的表格，你可以点击单元格进行编辑，并在完成编辑后点击保存按钮（如果插件默认没有提供保存按钮，你可能需要自定义添加）。

请注意，interactive_table插件的API可能会随着版本更新而变化，因此请务必查阅插件的官方文档以获取最新和详细的用法。