Flutter 框架跨平台鸿蒙开发 - 商用项目看板应用
项目看板管理工具摘要 本项目是基于Flutter开发的跨平台看板式项目管理应用，采用Material Design 3设计规范。核心功能包括： 三列看板视图（待办/进行中/已完成） 支持任务拖拽移动、优先级标记（低/中/高/紧急） 完整的任务管理功能（创建/编辑/删除） 标签分类和项目统计功能 技术特点： 使用Draggable实现任务拖拽 基于Task模型管理任务数据 包含任务详情、编辑等完整页
·
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
项目看板是一款基于看板方法论的项目管理工具，采用可视化的方式展示任务流转过程。通过待办、进行中、已完成三列看板，团队成员可以直观地了解项目进展，快速识别瓶颈问题。支持任务拖拽移动、优先级标记、标签分类等功能，让项目管理更加高效便捷。
应用采用经典的看板布局，任务卡片清晰展示标题、描述、优先级、截止日期等关键信息。长按任务卡片可快速进行移动、编辑、删除等操作，统计功能帮助管理者掌握项目整体进度和风险点。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 看板视图 | 三列看板展示任务 | SingleChildScrollView |
| 任务卡片 | 展示任务详细信息 | Card + Draggable |
| 拖拽移动 | 拖拽任务到不同列 | Draggable + DragTarget |
| 新建任务 | 创建新的任务卡片 | 表单页面 |
| 编辑任务 | 修改已有任务信息 | 表单预填充 |
| 删除任务 | 删除不需要的任务 | 确认对话框 |
| 详情查看 | 查看任务完整信息 | 详情页面 |
| 优先级标记 | 低/中/高/紧急四级 | 颜色区分 |
| 标签管理 | 任务标签分类 | Chip组件 |
| 项目统计 | 任务数量统计汇总 | 对话框展示 |
1.3 任务字段说明
| 字段 | 类型 | 说明 |
|---|---|---|
| 任务标题 | String | 任务名称，必填 |
| 任务描述 | String | 任务详细说明 |
| 优先级 | TaskPriority | 低/中/高/紧急 |
| 状态 | TaskStatus | 待办/进行中/已完成 |
| 负责人 | String | 任务负责人 |
| 截止日期 | DateTime | 任务截止时间 |
| 标签 | List | 任务标签列表 |
| 创建时间 | DateTime | 任务创建时间 |
| 更新时间 | DateTime | 最后修改时间 |
1.4 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS | API 21+ |
1.5 项目结构
lib/
└── main_project_board.dart
├── ProjectBoardApp # 应用入口
├── TaskPriority # 优先级枚举
├── TaskStatus # 状态枚举
├── Task # 任务模型
├── BoardColumn # 看板列模型
├── ProjectBoardPage # 主看板页面
│ ├── _buildBoard() # 看板构建
│ ├── _buildColumn() # 列构建
│ ├── _buildTaskCard() # 任务卡片
│ └── _showStatistics() # 统计展示
├── TaskEditPage # 任务编辑页面
│ ├── _selectDueDate() # 日期选择
│ ├── _addTag() # 添加标签
│ └── _save() # 保存任务
└── TaskDetailPage # 任务详情页面
└── _buildInfoRow() # 信息行
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 数据流程图
2.4 任务状态流转
三、核心模块设计
3.1 数据模型设计
3.1.1 任务状态枚举 (TaskStatus)
enum TaskStatus {
todo, // 待办
inProgress, // 进行中
done, // 已完成
}
3.1.2 任务优先级枚举 (TaskPriority)
enum TaskPriority {
low, // 低
medium, // 中
high, // 高
urgent, // 紧急
}
3.1.3 任务模型 (Task)
class Task {
final String id; // 唯一标识
String title; // 任务标题
String description; // 任务描述
TaskPriority priority; // 优先级
TaskStatus status; // 状态
String assignee; // 负责人
DateTime dueDate; // 截止日期
List<String> tags; // 标签列表
DateTime createdAt; // 创建时间
DateTime updatedAt; // 更新时间
}
3.1.4 看板列模型 (BoardColumn)
class BoardColumn {
final String id; // 唯一标识
final String title; // 列标题
final TaskStatus status; // 对应状态
final Color color; // 主题颜色
}
3.2 拖拽功能实现
3.2.1 拖拽流程
3.2.2 拖拽实现
// 可拖拽的任务卡片
Widget _buildTaskCard(Task task) {
return Draggable<Task>(
data: task,
feedback: Material(
elevation: 4,
child: Container(/* 拖拽反馈样式 */),
),
childWhenDragging: Opacity(
opacity: 0.5,
child: _buildTaskCardContent(task),
),
child: _buildTaskCardContent(task),
);
}
// 接收拖拽的列
Widget _buildColumn(BoardColumn column) {
return DragTarget<TaskStatus>(
onWillAcceptWithDetails: (details) {
return details.data != column.status;
},
onAcceptWithDetails: (details) {
_moveTask(details.data, column.status);
},
builder: (context, candidateData, rejectedData) {
return Container(/* 列内容 */);
},
);
}
3.3 状态过滤算法
List<Task> _getTasksByStatus(TaskStatus status) {
return _tasks.where((t) => t.status == status).toList();
}
3.4 页面结构设计
3.4.1 看板布局
3.4.2 任务卡片布局
┌─────────────────────────────────────────┐
│ ▌任务标题 │
│ 任务描述内容... │
│ │
│ [需求] [文档] │
│ │
│ 🚩 高 📅 1/15 │
│ │
│ ● 张三 │
└─────────────────────────────────────────┘
3.5 状态管理
3.5.1 核心状态变量
class _ProjectBoardPageState extends State<ProjectBoardPage> {
final List<Task> _tasks = []; // 所有任务
final List<BoardColumn> _columns = []; // 看板列配置
}
class _TaskEditPageState extends State<TaskEditPage> {
final _formKey = GlobalKey<FormState>(); // 表单Key
late TextEditingController _titleController; // 标题控制器
late TextEditingController _descriptionController; // 描述控制器
late TextEditingController _assigneeController; // 负责人控制器
late TaskPriority _selectedPriority; // 选中的优先级
late TaskStatus _selectedStatus; // 选中的状态
late DateTime _dueDate; // 截止日期
late List<String> _tags; // 标签列表
}
3.5.2 状态更新流程
// 移动任务
void _moveTask(Task task, TaskStatus newStatus) {
setState(() {
task.status = newStatus;
task.updatedAt = DateTime.now();
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('任务已移动到${_getStatusText(newStatus)}')),
);
}
四、UI设计规范
4.1 配色方案
应用采用靛蓝色主题风格：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | Indigo | AppBar、按钮、标签 |
| 待办列 | Grey | 待办列标题 |
| 进行中列 | Blue | 进行中列标题 |
| 已完成列 | Green | 已完成列标题 |
| 低优先级 | Green | 低优先级标记 |
| 中优先级 | Blue | 中优先级标记 |
| 高优先级 | Orange | 高优先级标记 |
| 紧急优先级 | Red | 紧急优先级标记 |
4.2 优先级样式
4.2.1 颜色对照表
| 优先级 | 颜色 | 图标 |
|---|---|---|
| 低 | 绿色 | 🟢 |
| 中 | 蓝色 | 🔵 |
| 高 | 橙色 | 🟠 |
| 紧急 | 红色 | 🔴 |
4.3 列样式
| 列 | 颜色 | 说明 |
|---|---|---|
| 待办 | 灰色 | 尚未开始的任务 |
| 进行中 | 蓝色 | 正在处理的任务 |
| 已完成 | 绿色 | 已完成的任务 |
4.4 组件规范
4.4.1 列标题
┌─────────────────────────────────────┐
│ ▌待办 3 │
└─────────────────────────────────────┘
4.4.2 任务卡片
┌─────────────────────────────────────────┐
│ ▌需求分析 │
│ 完成产品需求文档编写 │
│ │
│ [需求] [文档] │
│ │
│ 🚩 高 📅 1/15 │
│ ● 张三 │
└─────────────────────────────────────────┘
4.5 交互设计
4.5.1 操作方式
| 操作 | 手势 | 效果 |
|---|---|---|
| 查看详情 | 点击卡片 | 跳转详情页 |
| 新建任务 | 点击浮动按钮 | 跳转编辑页 |
| 编辑任务 | 长按-编辑 | 跳转编辑页 |
| 删除任务 | 长按-删除 | 确认后删除 |
| 移动任务 | 拖拽卡片 | 移动到目标列 |
| 快捷移动 | 长按-移动 | 选择目标列 |
4.5.2 视觉反馈
五、核心功能实现
5.1 看板构建
Widget _buildBoard() {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: _columns.map((column) {
return _buildColumn(column);
}).toList(),
),
);
}
5.2 列构建
Widget _buildColumn(BoardColumn column) {
final tasks = _getTasksByStatus(column.status);
return Container(
width: 300,
margin: const EdgeInsets.only(right: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildColumnHeader(column, tasks.length),
const SizedBox(height: 12),
Expanded(
child: DragTarget<TaskStatus>(
onAcceptWithDetails: (details) {
_moveTask(details.data, column.status);
},
builder: (context, candidateData, rejectedData) {
return ListView.builder(
itemCount: tasks.length,
itemBuilder: (context, index) {
return _buildTaskCard(tasks[index]);
},
);
},
),
),
],
),
);
}
5.3 任务移动
void _moveTask(Task task, TaskStatus newStatus) {
setState(() {
task.status = newStatus;
task.updatedAt = DateTime.now();
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('任务已移动到${_getStatusText(newStatus)}')),
);
}
5.4 统计功能
void _showStatistics() {
final todoCount = _tasks.where((t) => t.status == TaskStatus.todo).length;
final inProgressCount = _tasks.where((t) => t.status == TaskStatus.inProgress).length;
final doneCount = _tasks.where((t) => t.status == TaskStatus.done).length;
final urgentCount = _tasks.where((t) => t.priority == TaskPriority.urgent).length;
final overdueCount = _tasks.where((t) =>
t.dueDate.isBefore(DateTime.now()) && t.status != TaskStatus.done).length;
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('项目统计'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildStatRow('待办任务', todoCount, Colors.grey),
_buildStatRow('进行中', inProgressCount, Colors.blue),
_buildStatRow('已完成', doneCount, Colors.green),
const Divider(),
_buildStatRow('紧急任务', urgentCount, Colors.red),
_buildStatRow('已逾期', overdueCount, Colors.orange),
],
),
);
},
);
}
5.5 标签管理
void _addTag() {
if (_tagController.text.isNotEmpty && !_tags.contains(_tagController.text)) {
setState(() {
_tags.add(_tagController.text);
_tagController.clear();
});
}
}
void _removeTag(String tag) {
setState(() {
_tags.remove(tag);
});
}
六、看板管理知识
6.1 看板方法论
6.1.1 核心原则
6.1.2 看板列定义
| 列 | 说明 | 任务特征 |
|---|---|---|
| 待办 | 尚未开始的任务 | 已规划，未启动 |
| 进行中 | 正在处理的任务 | 有人负责，正在推进 |
| 已完成 | 已完成的任务 | 达成目标，可归档 |
6.2 优先级管理
6.2.1 优先级矩阵
渲染错误: Mermaid 渲染失败: Lexical error on line 3. Unrecognized text. ... 任务优先级矩阵 x-axis 紧急程度低 --> 紧急程度高 ----------------------^
6.2.2 优先级判断标准
| 优先级 | 标准 | 处理建议 |
|---|---|---|
| 紧急 | 阻塞其他工作 | 立即处理 |
| 高 | 重要且有时间限制 | 优先安排 |
| 中 | 正常业务需求 | 按计划推进 |
| 低 | 可延后处理 | 空闲时处理 |
6.3 任务管理最佳实践
6.3.1 任务拆分原则
| 原则 | 说明 |
|---|---|
| 单一职责 | 一个任务只做一件事 |
| 可完成性 | 任务能在合理时间内完成 |
| 可验证性 | 任务完成标准明确 |
| 可分配性 | 任务可分配给具体人员 |
6.3.2 截止日期设定
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 数据持久化
// 使用SharedPreferences存储
class TaskStorage {
static Future<void> saveTasks(List<Task> tasks) async {
final prefs = await SharedPreferences.getInstance();
final jsonList = tasks.map((t) => t.toJson()).toList();
await prefs.setString('project_tasks', jsonEncode(jsonList));
}
}
| 功能 | 说明 |
|---|---|
| 本地存储 | 使用SharedPreferences |
| 云端同步 | 支持多设备同步 |
| 数据备份 | 导出JSON格式 |
7.2.2 多项目支持
| 功能 | 说明 |
|---|---|
| 项目切换 | 支持多个项目 |
| 项目配置 | 自定义看板列 |
| 项目归档 | 完成项目归档 |
7.2.3 团队协作
| 功能 | 说明 |
|---|---|
| 成员管理 | 添加团队成员 |
| 任务分配 | 分配任务给成员 |
| 评论功能 | 任务讨论交流 |
八、注意事项
8.1 开发注意事项
-
拖拽性能：大量任务时注意性能优化
-
状态同步：移动任务后及时更新状态
-
日期处理：注意截止日期的逾期判断
-
表单验证：必填字段要进行验证
8.2 用户体验优化
💡 用户体验建议 💡
- 拖拽操作流畅自然
- 任务信息一目了然
- 快捷操作方便高效
- 统计数据实时更新
8.3 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 拖拽不生效 | DragTarget配置错误 | 检查onAccept回调 |
| 任务不显示 | 状态过滤错误 | 检查过滤条件 |
| 统计不准确 | 计算逻辑错误 | 检查统计公式 |
| 标签重复 | 未做重复检查 | 添加去重逻辑 |
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_project_board.dart
# 运行到Windows
flutter run -d windows -t lib/main_project_board.dart
# 代码分析
flutter analyze lib/main_project_board.dart
十、总结
项目看板应用通过可视化的看板界面，让团队成员能够直观地了解项目进展。应用支持待办、进行中、已完成三列看板，任务卡片清晰展示标题、描述、优先级、截止日期等关键信息。拖拽移动功能让任务状态变更变得简单直观。
优先级管理功能支持低、中、高、紧急四个级别，通过颜色区分让重要任务一目了然。标签功能帮助对任务进行分类，方便筛选和管理。统计功能汇总待办、进行中、已完成任务数量，同时显示紧急任务和逾期任务，帮助管理者快速识别风险点。
界面设计采用靛蓝色主题风格，看板列使用不同颜色区分，任务卡片边框颜色反映优先级。长按任务卡片可快速进行移动、编辑、删除等操作，交互设计简洁高效。应用采用Material Design 3设计规范，遵循Flutter最佳实践，代码结构清晰，易于维护和扩展。
看板可视，任务清晰，高效协作，项目成功！
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
20
0- 0
已为社区贡献19条内容
所有评论(0)