Flutter电子表格UI插件flutter_spreadsheet_ui的使用

Flutter电子表格UI插件flutter_spreadsheet_ui的使用

简介

FlutterSpreadsheetUI 是一个Flutter插件，允许开发者在Flutter应用程序中轻松创建和嵌入类似电子表格的表格。通过这个插件，开发者可以创建具有各种功能（如列宽调整、行高调整等）的交互式和可自定义的表格。该插件提供了丰富的配置选项，例如列宽、行高、网格线颜色和粗细、字体样式和大小等，使开发者能够完全自定义表格的外观。此外，插件还提供了多种回调函数，用于处理列宽和行高的调整等操作。

开始使用

1. 添加依赖

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

dependencies:
  flutter_spreadsheet_ui: '^0.0.5'

2. 安装依赖

在命令行或终端中运行以下命令来安装插件：

$ flutter pub get

或者，如果你的编辑器支持 flutter pub get，可以直接在编辑器中执行此操作。

3. 导入插件

在Dart代码中导入 flutter_spreadsheet_ui：

import 'package:flutter_spreadsheet_ui/flutter_spreadsheet_ui.dart';

使用示例

1. 创建表格数据

首先，生成 FlutterSpreadsheetUIColumn 和 FlutterSpreadsheetUIRow 的数据，这些数据将用于构建表格。

final List<FlutterSpreadsheetUIColumn> _columns = [
  FlutterSpreadsheetUIColumn(
    contentAlignment: Alignment.center,
    cellBuilder: (context, cellId) => const Text("任务"),
  ),
  FlutterSpreadsheetUIColumn(
    width: 200,
    contentAlignment: Alignment.center,
    cellBuilder: (context, cellId) => const Text("分配日期"),
  ),
  FlutterSpreadsheetUIColumn(
    width: 110,
    cellBuilder: (context, cellId) => const Text("权限"),
  ),
];

final List<FlutterSpreadsheetUIRow> _rows = [
  FlutterSpreadsheetUIRow(
    cells: [
      FlutterSpreadsheetUICell(
        cellBuilder: (context, cellId) => const Text('任务 1'),
      ),
      FlutterSpreadsheetUICell(
        cellBuilder: (context, cellId) => Text(DateTime.now().toString()),
      ),
      FlutterSpreadsheetUICell(
        cellBuilder: (context, cellId) => const Text('无'),
      ),
    ],
  ),
];

2. 配置表格

使用 FlutterSpreadsheetUIConfig 来自定义表格的默认配置：

FlutterSpreadsheetUIConfig _tableConfig = const FlutterSpreadsheetUIConfig(
  enableColumnWidthDrag: true,  // 允许拖动调整列宽
  enableRowHeightDrag: true,    // 允许拖动调整行高
  firstColumnWidth: 150,        // 第一列的宽度
  freezeFirstColumn: true,      // 冻结第一列
  freezeFirstRow: true,         // 冻结第一行
);

3. 添加回调函数

为了处理列宽和行高的调整，可以添加 columnWidthResizeCallback 和 rowHeightResizeCallback 回调函数：

void _columnWidthResizeCallback(int columnIndex, double updatedWidth) {
  log("列: $columnIndex 的新宽度: $updatedWidth");
}

void _rowHeightResizeCallback(int rowIndex, double updatedHeight) {
  log("行: $rowIndex 的新高度: $updatedHeight");
}

4. 构建表格

将上述配置和数据传递给 FlutterSpreadsheetUI 小部件，并将其添加到 widget 树中：

FlutterSpreadsheetUI(
  config: _tableConfig,
  columnWidthResizeCallback: _columnWidthResizeCallback,
  rowHeightResizeCallback: _rowHeightResizeCallback,
  columns: _columns,
  rows: _rows,
),

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用程序中使用 FlutterSpreadsheetUI 插件：

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_spreadsheet_ui/flutter_spreadsheet_ui.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(
        primarySwatch: Colors.blue,
      ),
      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(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(6.0),
        child: FlutterSpreadsheetUI(
          config: const FlutterSpreadsheetUIConfig(
            enableColumnWidthDrag: true,  // 允许拖动调整列宽
            enableRowHeightDrag: true,    // 允许拖动调整行高
            firstColumnWidth: 150,        // 第一列的宽度
            freezeFirstColumn: true,      // 冻结第一列
            freezeFirstRow: true,         // 冻结第一行
          ),
          columnWidthResizeCallback: (int columnIndex, double updatedWidth) {
            log("列: $columnIndex 的新宽度: $updatedWidth");
          },
          rowHeightResizeCallback: (int rowIndex, double updatedHeight) {
            log("行: $rowIndex 的新高度: $updatedHeight");
          },
          columns: [
            FlutterSpreadsheetUIColumn(
              contentAlignment: Alignment.center,
              cellBuilder: (context, cellId) => const Text("任务"),
            ),
            FlutterSpreadsheetUIColumn(
              width: 200,
              contentAlignment: Alignment.center,
              cellBuilder: (context, cellId) => const Text("分配日期"),
            ),
            FlutterSpreadsheetUIColumn(
              width: 110,
              cellBuilder: (context, cellId) => const Text("权限"),
            ),
          ],
          rows: [
            FlutterSpreadsheetUIRow(
              cells: [
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => const Text('任务 1'),
                ),
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => Text(DateTime.now().toString()),
                ),
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => const Text('无'),
                ),
              ],
            ),
            FlutterSpreadsheetUIRow(
              cells: [
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => const Text('任务 2'),
                ),
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => Text(DateTime.now().toString()),
                ),
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => const Text('读取'),
                ),
              ],
            ),
            FlutterSpreadsheetUIRow(
              cells: [
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => const Text('任务 3'),
                ),
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => Text(DateTime.now().toString()),
                ),
                FlutterSpreadsheetUICell(
                  cellBuilder: (context, cellId) => const Text('编辑'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}