鸿蒙flutter第三方库适配 - 看板应用

2401_839633912026-04-14 19:49

看板应用

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

一、项目概述

运行效果图

1.1 应用简介

看板应用是一款高效的任务管理工具，采用经典的看板视图设计，帮助用户直观地管理任务流程。通过拖拽任务卡片在不同列之间移动，用户可以轻松追踪任务的进度状态。应用支持自定义看板列、任务优先级、标签管理等功能，满足个人和团队的多样化需求。

应用以清新的青色为主色调，象征高效与专注。涵盖看板视图、统计分析、设置管理三大模块。用户可以创建任务、设置优先级、添加标签、设置截止日期，通过拖拽操作实现任务流转，实现高效的任务管理。

1.2 核心功能

功能模块 功能描述 实现方式
看板视图 横向滚动的多列看板 ListView
任务卡片 可拖拽的任务卡片 Draggable
拖拽排序 任务在列间拖拽移动 DragTarget
看板管理 添加、编辑、删除列 弹窗表单
任务管理 创建、编辑、删除任务 底部抽屉
优先级设置 四级任务优先级 枚举定义
标签管理 任务标签分类 Chip组件
截止日期 任务截止日期设置 DatePicker
统计分析 任务分布统计 图表展示
数据持久化 本地数据存储 SharedPreferences

1.3 看板列定义

序号 列名称 Emoji 颜色 描述
1 待办 📋 蓝色 等待处理的任务
2 进行中 🔄 橙色 正在执行的任务
3 审核中 👀 紫色 等待审核的任务
4 已完成 ✅ 绿色 已完成的任务

1.4 任务优先级定义

序号 优先级名称 Emoji 颜色 描述
1 低 🟢 绿色 优先级较低的任务
2 中 🟠 橙色 普通优先级任务
3 高 🔴 红色 高优先级任务
4 紧急 🟣 紫色 紧急处理的任务

1.5 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
数据存储 SharedPreferences >= 2.0.0
状态管理 StatefulWidget -
目标平台 鸿蒙OS / Web API 21+

1.6 项目结构

复制代码 
lib/
└── main_kanban.dart
    ├── KanbanApp                        # 应用入口
    ├── TaskPriority                     # 任务优先级枚举
    ├── Task                             # 任务模型
    ├── KanbanColumn                     # 看板列模型
    ├── KanbanData                       # 看板数据模型
    ├── KanbanStorage                    # 数据存储服务
    ├── HomePage                         # 主页面（底部导航）
    ├── _buildKanbanPage                 # 看板页面
    ├── _buildStatsPage                  # 统计页面
    ├── _buildSettingsPage               # 设置页面
    ├── _AddTaskForm                     # 添加任务表单
    └── _TaskDetailSheet                 # 任务详情抽屉

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

HomePage
看板页面
统计页面
设置页面
看板列组件
任务卡片组件
拖拽组件
任务总览
分布统计
看板管理
数据管理
任务管理器

TaskManager
看板管理器

ColumnManager
拖拽处理器

DragHandler
Task

任务模型
KanbanColumn

列模型
KanbanStorage

存储服务

2.2 类图设计

has
contains
contains
manages
uses
KanbanApp
+Widget build()
<<enumeration>>
TaskPriority
+String label
+Color color
+low()
+medium()
+high()
+urgent()
Task
+String id
+String title
+String? description
+TaskPriority priority
+DateTime createdAt
+DateTime? dueDate
+List<String> tags
+String columnId
+toMap()
+fromMap()
+copyWith()
KanbanColumn
+String id
+String title
+Color color
+int order
+toMap()
+fromMap()
+copyWith()
KanbanData
+List<KanbanColumn> columns
+List<Task> tasks
+toMap()
+fromMap()
KanbanStorage
+getDefaultData()
+save(KanbanData)
+load() : Future<KanbanData>
+clear()
HomePage
+List<KanbanColumn> _columns
+List<Task> _tasks
+int _currentIndex
+_loadData()
+_saveData()
+_addTask()
+_updateTask()
+_deleteTask()
+_moveTask()

2.3 页面导航流程

看板
统计
设置
点击任务
拖拽任务
添加任务
应用启动
加载看板数据
主页面
底部导航
看板页面
统计页面
设置页面
查看任务列表
任务操作
任务详情
移动任务
添加任务表单
编辑/删除
更新任务列
保存新任务
查看统计数据
管理看板列
清除数据

2.4 任务拖拽流程

数据层 目标列 拖拽系统 任务卡片 用户 数据层 目标列 拖拽系统 任务卡片 用户 长按开始拖拽 创建Draggable 显示拖拽反馈 拖动到目标列 检测DragTarget 高亮显示目标列 释放任务 onAccept _moveTask 更新任务columnId 保存到SharedPreferences 刷新看板视图

三、核心模块设计

3.1 数据模型设计

3.1.1 任务优先级枚举 (TaskPriority)
dart 复制代码 
enum TaskPriority {
  low(label: '低', color: Color(0xFF4CAF50)),
  medium(label: '中', color: Color(0xFFFF9800)),
  high(label: '高', color: Color(0xFFF44336)),
  urgent(label: '紧急', color: Color(0xFF9C27B0));

  final String label;
  final Color color;
  const TaskPriority({
    required this.label,
    required this.color,
  });
}
3.1.2 任务模型 (Task)
dart 复制代码 
class Task {
  final String id;
  final String title;
  final String? description;
  final TaskPriority priority;
  final DateTime createdAt;
  final DateTime? dueDate;
  final List<String> tags;
  final String columnId;

  const Task({
    required this.id,
    required this.title,
    this.description,
    required this.priority,
    required this.createdAt,
    this.dueDate,
    this.tags = const [],
    required this.columnId,
  });

  Task copyWith({
    String? title,
    String? description,
    TaskPriority? priority,
    DateTime? dueDate,
    List<String>? tags,
    String? columnId,
  }) {
    return Task(
      id: id,
      title: title ?? this.title,
      description: description ?? this.description,
      priority: priority ?? this.priority,
      createdAt: createdAt,
      dueDate: dueDate ?? this.dueDate,
      tags: tags ?? this.tags,
      columnId: columnId ?? this.columnId,
    );
  }
}
3.1.3 看板列模型 (KanbanColumn)
dart 复制代码 
class KanbanColumn {
  final String id;
  final String title;
  final Color color;
  final int order;

  const KanbanColumn({
    required this.id,
    required this.title,
    required this.color,
    required this.order,
  });
}
3.1.4 任务优先级分布

40% 35% 18% 7% 任务优先级分布示例 低优先级 中优先级 高优先级 紧急

3.2 页面结构设计

3.2.1 主页面布局

HomePage
IndexedStack
看板页面
统计页面
设置页面
NavigationBar
看板 Tab
统计 Tab
设置 Tab

3.2.2 看板页面结构

看板页面
SliverAppBar
横向ListView
FloatingActionButton
看板列1
看板列2
看板列N
列标题
任务列表
拖放区域
颜色标识
任务计数
操作菜单

3.2.3 任务卡片结构

任务卡片
Draggable
拖拽反馈
实际内容
优先级标识
任务标题
任务描述
标签列表
截止日期

3.2.4 统计页面结构

统计页面
任务总览卡片
任务分布卡片
优先级分布卡片
总任务数
已完成数
进行中数
各列任务统计
各优先级统计

3.3 拖拽逻辑设计

进入目标
离开目标
在目标列
在原位置
开始拖拽
创建Draggable
设置拖拽数据
显示拖拽反馈
移动到目标区域
检测DragTarget
高亮目标列
取消高亮
释放任务
触发onAccept
取消操作
更新任务columnId
保存数据
刷新UI

3.4 数据存储逻辑

是
否
应用启动
加载SharedPreferences
数据存在?
解析JSON数据
创建默认数据
构建KanbanData
渲染看板
数据变更
序列化为JSON
保存到SharedPreferences
更新UI

四、UI设计规范

4.1 配色方案

应用以清新的青色为主色调，象征高效与专注：

颜色类型 色值 用途
主色 #00BCD4 (Cyan) 导航、主题元素
辅助色 #4DD0E1 渐变背景
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 信息卡片
待办列 #2196F3 蓝色
进行中列 #FF9800 橙色
审核中列 #9C27B0 紫色
已完成列 #4CAF50 绿色

4.2 优先级配色

优先级 色值 视觉效果
低 #4CAF50 绿色
中 #FF9800 橙色
高 #F44336 红色
紧急 #9C27B0 紫色

4.3 字体规范

元素 字号 字重 颜色
页面标题 20px Bold 白色
列标题 16px Bold 列颜色
任务标题 14px Medium #000000
任务描述 12px Regular #666666
标签文字 10px Regular #666666
统计数字 28px Bold 白色

4.4 组件规范

4.4.1 看板列组件
复制代码 
┌─────────────────────────────────────┐
│  📋 待办                      5  ⋮  │
│  ─────────────────────────────────  │
│                                     │
│  ┌─────────────────────────────┐   │
│  │  🟠 完成项目报告            │   │
│  │  本周需要完成...            │   │
│  │  工作 | 紧急                │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │  🟢 整理文档                │   │
│  │  整理项目相关文档            │   │
│  └─────────────────────────────┘   │
│                                     │
│  拖拽任务到此处                      │
└─────────────────────────────────────┘
4.4.2 任务卡片组件
复制代码 
┌─────────────────────────────────────┐
│  🟠 完成项目报告                      │
│                                     │
│  本周需要完成项目报告的撰写和审核...    │
│                                     │
│  ┌──────┐ ┌──────┐                  │
│  │ 工作 │ │ 紧急 │                  │
│  └──────┘ └──────┘                  │
│                                     │
│  📅 4/15                            │
└─────────────────────────────────────┘
4.4.3 添加任务表单
复制代码 
┌─────────────────────────────────────┐
│  添加任务                              │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ 任务标题 *                   │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ 描述                         │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  优先级                              │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐      │
│  │ 低 │ │ 中 │ │ 高 │ │紧急│      │
│  └────┘ └────┘ └────┘ └────┘      │
│                                     │
│  所属列                              │
│  ┌─────────────────────────────┐   │
│  │ 待办                      ▼ │   │
│  └─────────────────────────────┘   │
│                                     │
│  📅 截止日期: 未设置                   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │           保存               │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘
4.4.4 统计卡片
复制代码 
┌─────────────────────────────────────┐
│           任务总览                    │
│                                     │
│    📋          ✅          🔄       │
│    25          10          8        │
│   总任务       已完成       进行中    │
└─────────────────────────────────────┘

五、核心功能实现

5.1 拖拽功能实现

dart 复制代码 
Widget _buildTaskCard(Task task, Color columnColor) {
  return Draggable<String>(
    data: task.id,
    feedback: Material(
      elevation: 4,
      borderRadius: BorderRadius.circular(8),
      child: Container(
        width: 260,
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: columnColor, width: 2),
        ),
        child: Text(task.title),
      ),
    ),
    childWhenDragging: Opacity(
      opacity: 0.5,
      child: _buildTaskCardContent(task),
    ),
    child: GestureDetector(
      onTap: () => _showTaskDetail(task),
      child: _buildTaskCardContent(task),
    ),
  );
}

5.2 拖放目标实现

dart 复制代码 
Widget _buildKanbanColumn(KanbanColumn column, List<Task> tasks) {
  return DragTarget<String>(
    onWillAcceptWithDetails: (details) {
      return details.data != column.id;
    },
    onAcceptWithDetails: (details) {
      _moveTask(details.data, column.id);
    },
    builder: (context, candidateData, rejectedData) {
      return Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: candidateData.isNotEmpty
                ? column.color
                : Colors.transparent,
            width: 2,
          ),
        ),
        child: Column(
          children: [
            _buildColumnHeader(column, tasks.length),
            Expanded(
              child: ListView.builder(
                itemCount: tasks.length,
                itemBuilder: (context, index) {
                  return _buildTaskCard(tasks[index], column.color);
                },
              ),
            ),
          ],
        ),
      );
    },
  );
}

5.3 数据存储实现

dart 复制代码 
class KanbanStorage {
  static const String _dataKey = 'kanban_data';

  static KanbanData getDefaultData() {
    return KanbanData(
      columns: [
        const KanbanColumn(
          id: 'todo',
          title: '待办',
          color: Color(0xFF2196F3),
          order: 0,
        ),
        const KanbanColumn(
          id: 'in_progress',
          title: '进行中',
          color: Color(0xFFFF9800),
          order: 1,
        ),
        const KanbanColumn(
          id: 'review',
          title: '审核中',
          color: Color(0xFF9C27B0),
          order: 2,
        ),
        const KanbanColumn(
          id: 'done',
          title: '已完成',
          color: Color(0xFF4CAF50),
          order: 3,
        ),
      ],
      tasks: [],
    );
  }

  static Future<void> save(KanbanData data) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(_dataKey, jsonEncode(data.toMap()));
  }

  static Future<KanbanData> load() async {
    final prefs = await SharedPreferences.getInstance();
    final jsonString = prefs.getString(_dataKey);
    if (jsonString == null) {
      return getDefaultData();
    }
    try {
      return KanbanData.fromMap(jsonDecode(jsonString));
    } catch (e) {
      return getDefaultData();
    }
  }
}

5.4 任务移动实现

dart 复制代码 
void _moveTask(String taskId, String targetColumnId) {
  setState(() {
    final index = _tasks.indexWhere((t) => t.id == taskId);
    if (index != -1) {
      _tasks[index] = _tasks[index].copyWith(columnId: targetColumnId);
    }
  });
  _saveData();
}

5.5 统计功能实现

dart 复制代码 
Widget _buildStatsPage() {
  final totalTasks = _tasks.length;
  final completedTasks = _tasks.where((t) => t.columnId == 'done').length;
  final inProgressTasks = _tasks.where((t) => t.columnId == 'in_progress').length;
  final highPriorityTasks = _tasks.where(
    (t) => t.priority == TaskPriority.high || t.priority == TaskPriority.urgent
  ).length;

  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: [
          _buildOverviewCard(totalTasks, completedTasks, inProgressTasks),
          _buildDistributionCard(),
          _buildPriorityCard(),
        ],
      ),
    ),
  );
}

六、交互设计

6.1 任务创建流程

数据层 添加表单 主页面 用户 数据层 添加表单 主页面 用户 alt [验证通过] [验证失败] 点击添加按钮 显示底部抽屉 输入任务信息 选择优先级 选择所属列 添加标签 设置截止日期 点击保存 验证数据 保存任务 刷新看板 显示新任务 显示错误提示

6.2 任务拖拽流程

长按任务卡片
开始拖拽
显示拖拽反馈
移动到目标列
目标列高亮
释放任务
更新任务状态
保存数据
刷新看板
取消拖拽
恢复原状

6.3 看板列管理流程

点击添加
点击编辑
点击删除
查看列
添加列
输入名称
选择颜色
保存列
编辑列
修改名称
修改颜色
保存修改
删除列
确认删除
删除任务

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 2024-04-07 基础UI框架 拖拽功能开发 数据存储实现 任务搜索功能 任务筛选功能 任务排序功能 团队协作功能 数据同步功能 通知提醒功能 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 看板应用开发计划

7.2 功能扩展建议

7.2.1 任务搜索与筛选

搜索功能：

  • 按标题搜索任务
  • 按标签筛选任务
  • 按优先级筛选
  • 按截止日期筛选
7.2.2 团队协作功能

协作功能：

  • 多人实时协作
  • 任务分配给成员
  • 评论和讨论
  • 活动日志记录
7.2.3 数据同步功能

同步功能：

  • 云端数据备份
  • 多设备同步
  • 数据导入导出
  • 版本历史记录

八、注意事项

8.1 开发注意事项

  1. 拖拽性能：大量任务时注意优化拖拽响应速度

  2. 数据持久化：确保数据正确序列化和反序列化

  3. UI响应：长列表使用ListView.builder优化性能

  4. 状态管理：及时更新UI状态，避免数据不一致

  5. 用户体验：提供清晰的拖拽反馈和操作提示

8.2 常见问题

问题 原因 解决方案
拖拽不响应 Draggable未正确配置 检查data和feedback设置
数据丢失 未正确保存数据 确保每次操作后调用save
UI不更新 setState未调用 在数据变更后调用setState
列显示异常 排序未正确执行 检查order字段设置
任务重复 ID生成问题 使用时间戳生成唯一ID

8.3 使用技巧

📋 看板应用使用技巧 📋

任务管理

  • 合理设置任务优先级
  • 使用标签分类任务
  • 及时更新任务状态
  • 定期清理已完成任务

看板使用

  • 根据工作流自定义列
  • 使用拖拽快速移动任务
  • 利用统计功能分析效率
  • 定期备份重要数据

效率提升

  • 为任务设置截止日期
  • 高优先级任务优先处理
  • 使用标签快速筛选
  • 保持看板整洁有序

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Web浏览器 Chrome 90+

9.2 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_kanban.dart --web-port 8204

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_kanban.dart

# 代码分析
flutter analyze lib/main_kanban.dart

十、总结

看板应用是一款高效的任务管理工具，采用经典的看板视图设计，帮助用户直观地管理任务流程。应用支持待办、进行中、审核中、已完成四种默认看板列，以及低、中、高、紧急四级任务优先级，满足不同场景的任务管理需求。

核心功能涵盖看板视图、任务卡片、拖拽排序、看板管理、任务管理、优先级设置、标签管理、截止日期、统计分析、数据持久化十大模块。用户可以通过拖拽操作实现任务流转，通过统计分析了解任务分布，实现高效的任务管理。

应用采用 Material Design 3 设计规范，以清新的青色为主色调，象征高效与专注。通过本应用，希望能够帮助用户提升工作效率，实现任务管理的可视化和流程化。

看板应用------让任务管理更高效

相关推荐
空中海5 小时前
5.1 HTTP 与网络请求
网络·网络协议·flutter·http
轻口味6 小时前
HarmonyOS 6 自定义人脸识别模型10：基于MindSpore Lite框架的自定义人脸识别功能实现
华为·harmonyos
提子拌饭1336 小时前
生命组学架构下的细胞分化与基因突变生存模拟器：基于鸿蒙Flutter的情景树渲染与状态溢出防御
flutter·华为·架构·开源·harmonyos
HarmonyOS_SDK7 小时前
【FAQ】HarmonyOS SDK 闭源开放能力 —Media Library Kit
harmonyos
空中海7 小时前
6.1 主题与暗色模式
运维·服务器·前端·flutter
你听得到118 小时前
周下载60w，但是作者删库！我从本地 pub 缓存里把它救出来，顺手备份到了自己的 GitHub
前端·flutter
SY.ZHOU8 小时前
移动端架构体系（五）：终篇总结
flutter·ios·系统架构·安卓·鸿蒙
SoraLuna9 小时前
「鸿蒙智能体实战记录 14」项目复盘：岁时春信智能体完整实现与能力体系总结
华为·harmonyos
HwJack209 小时前
HarmonyOS开发中 `onKeyEvent` 事件总线：从“瞎按”到“指哪打哪”的终极掌控
华为·harmonyos
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点03一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05GPT-6核心能力解析及与现有主流大模型对比06免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手07零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）08从限购到畅通：GLM-5.1 Coding Plan接入攻略09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10LLM Wiki：让大模型替你打理知识库的完整指南