Flutter 简仿Excel表格组件介绍

前言

哈喽，各位 Flutter 开发者们！今天我要给大家介绍一个非常实用的 Flutter 表格组件库 - excel_table_plus！✨

作为一个天天和数据打交道的开发者，你是否也曾经为 Flutter 原生组件无法满足复杂表格需求而苦恼？是否也希望能有一个像 Excel 一样强大的表格组件？那么今天介绍的这个库，绝对能让你眼前一亮！😍

什么？你说你不需要处理复杂表格？那你也应该看看，说不定哪天就用上了呢~

🌟 为什么选择 excel_table_plus？

在 Flutter 生态中，虽然有一些表格组件，但功能都比较基础或者很复杂，满足不了或者定制不了我们特殊的需求。而 excel_table_plus 则是一个功能增强的 Excel 风格表格组件，它提供了更多基础的交互以及可自定义的单元格样式，可以满足各种复杂的业务需求，该库是在flutter_excel_table的参考基础下，经过了大量改动和完善，毕竟取自于开源，当然也要回馈于开源。其实大部分也都是AI辅助完成的，我只是起到一个需求引导作用。不得不说现在AI确实强大，其实连这篇文章主体都是让AI写完，我再做补充的，哈哈哈哈哈哈。

让我来给你展示一下它的核心功能：

✅ 创建自定义行列的表格
✅ 支持单元格合并
✅ 自定义单元格样式（颜色、字体、对齐方式等）
✅ 只读单元格支持
✅ 可配置的单元格尺寸（宽度和高度）
✅ 可调整行列大小
✅ 单元格选择管理
✅ 可滚动的表格视图
✅ 自定义单元格构建器，完全控制
✅ 行列标题（序号）
✅ 可自定义边框和圆角
✅ 支持自定义单元格模型类和 JSON 序列化
✅ 支持导出和导入表格数据为 JSON 格式

是不是感觉功能很全面？别急，还有更高级的功能等着你去发掘呢！

🎯 高级功能一览

基于这些核心功能，开发者可以轻松实现以下高级功能：

🎯 多单元格选择（支持拖拽）
🎯 插入/删除行列
🎯 单元格格式化（文本、数字、日期、下拉框）
🎯 缩放功能
🎯 撤销/重做操作
🎯 复杂单元格类型（下拉框、日期选择器等）

看到这些功能，是不是已经心动了？这不就是你梦寐以求的表格组件吗？

🚀 快速上手

使用 excel_table_plus 非常简单，只需几个步骤即可集成到你的项目中：

1. 添加依赖

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

yaml 复制代码

dependencies:
  flutter:
    sdk: flutter
  excel_table_plus: ^0.0.1

2. 安装依赖

bash 复制代码

flutter pub get

3. 导入库

dart 复制代码

import 'package:excel_table_plus/excel_table_plus.dart';

4. 基本使用

dart 复制代码

// 创建控制器
ExcelController controller = ExcelController(
  excel: ExcelModel(
    x: 10, // 10列
    y: 20, // 20行
    showSn: true, // 显示序号
    backgroundColor: Colors.white,
    rowColor: Colors.blue.withOpacity(.25),
    resizable: true, // 可调整大小
    borderRadius: 8.0, // 圆角
  ),
  items: [
    // 标题行
    ExcelItemModel(
      position: ExcelPosition(0, 0),
      value: '姓名',
      color: Colors.grey.shade200,
      isReadOnly: true,
    ),
    ExcelItemModel(
      position: ExcelPosition(1, 0),
      value: '年龄',
      color: Colors.grey.shade200,
      isReadOnly: true,
    ),
    // 数据单元格
    ExcelItemModel(
      position: ExcelPosition(0, 1),
      value: '张三',
    ),
    ExcelItemModel(
      position: ExcelPosition(1, 1),
      value: '30',
    ),
    // 合并单元格示例
    ExcelItemModel(
      position: ExcelPosition(0, 5),
      value: '合并单元格示例',
      color: Colors.green,
      isReadOnly: true,
      isMergeCell: true,
      positions: [
        ExcelPosition(0, 5),
        ExcelPosition(1, 5),
        ExcelPosition(2, 5),
        ExcelPosition(0, 6),
        ExcelPosition(1, 6),
        ExcelPosition(2, 6),
      ],
    ),
  ],
);

// 使用组件
FlutterExcelWidget(
  controller: controller,
  itemBuilder: (x, y, item) {
    // 自定义单元格部件构建器
    if (item != null) {
      return TextField(
        controller: TextEditingController()..text = item.value?.toString() ?? '',
        readOnly: item.isReadOnly,
        decoration: const InputDecoration(
          border: InputBorder.none,
          contentPadding: EdgeInsets.all(8),
        ),
        onChanged: (value) {
          item.value = value;
        },
      );
    }
    return const SizedBox();
  },
)

是不是很简单？几行代码就能创建一个功能强大的表格组件！

🎥 效果预览

说了这么多，不如直接看效果！下面是几个示例的运行效果：

简单示例

高级示例

JSON 导入/导出示例

看到这些效果，是不是已经开始跃跃欲试了？😎

🧠 自定义单元格模型

excel_table_plus 还支持带有 JSON 序列化的自定义单元格模型类。为了正确地将单元格数据导出和导入为 JSON，自定义单元格值类必须实现 toJson() 和 fromJson() 方法：

dart 复制代码

// 带 JSON 支持的自定义单元格值类
class CustomCellValue {
  String? value;
  final String cellType = 'custom_text';
  final TextEditingController controller;
  final TextAlign textAlign;
  final TextStyle? style;
  
  CustomCellValue({
    this.value,
    TextEditingController? controller,
    this.textAlign = TextAlign.start,
    this.style,
  }) : controller = controller ?? TextEditingController();
  
  // JSON 序列化
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> json = <String, dynamic>{};
    json['value'] = value;
    json['cellType'] = cellType;
    json['textAlign'] = textAlign.toString();
    // 如需要，序列化样式
    if (style != null) {
      json['style'] = {
        'fontSize': style!.fontSize,
        'color': style!.color?.value,
        // 根据需要添加其他样式属性
      };
    }
    return json;
  }
  
  // JSON 反序列化
  factory CustomCellValue.fromJson(Map<String, dynamic> json) {
    // 实现反序列化逻辑
    // ...
  }
}

📦 数据导入/导出

库支持将整个表格数据导出为 JSON 格式并重新导入：

dart 复制代码

// 将表格数据导出为 JSON
Map<String, dynamic> exportTableData() {
  return {
    'excel': controller.excel.toJson(),
    'items': controller.items.map((item) => item.toJson()).toList(),
  };
}

// 从 JSON 导入表格数据
void importTableData(Map<String, dynamic> json) {
  ExcelModel excel = ExcelModel.fromJson(json['excel'] as Map<String, dynamic>);
  List<ExcelItemModel> items = (json['items'] as List<dynamic>)
      .map((itemJson) => ExcelItemModel.fromJson(
            itemJson as Map<String, dynamic>,
            customValueFactory: (cellType, valueJson) {
              // 根据类型创建自定义单元格值
              switch (cellType) {
                case 'custom_text':
                  return CustomCellValue.fromJson(valueJson);
                // 为其他自定义单元格类型添加更多情况
                default:
                  return valueJson;
              }
            },
          ))
      .toList();
  
  controller = ExcelController(
    excel: excel,
    items: items,
  );
}

📚 总结

excel_table_plus 是一个功能强大且灵活的 Flutter 表格组件库，它提供了丰富的功能和良好的扩展性，能够满足各种复杂的表格需求。无论你是需要一个简单的数据展示表格，还是一个功能复杂的 Excel 风格编辑器，它都能胜任。

哎呀，这么好的库，你还在等什么？赶紧去试试吧！（这句也是AI写的，其实我想说的是，我能力有限，希望大佬们多多指导完善）✨

项目信息

📦 包名：excel_table_plus
🧪 支持平台：Android、iOS、Web、Windows、macOS、Linux
🌐 项目地址：github.com/bg-1998/exc...

安装方式

bash 复制代码

flutter pub add excel_table_plus

P.S. 如果你觉得这个库还不错，别忘了去 GitHub 上给个 Star 哦！你的支持是我继续创作的动力！💪（这句也是AI写的，star不star都无所谓的，主打一个分享的喜悦，或许能帮到跟我一样遇到相同需求并且为之所困的有缘人。）