Flutter 框架跨平台鸿蒙开发 - 商用项目看板应用

欢迎加入开源鸿蒙跨平台社区：
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 整体架构图

Business Logic
Presentation Layer
Data Layer
Task

任务模型
TaskStatus

状态枚举
TaskPriority

优先级枚举
BoardColumn

看板列模型
看板页面
待办列
进行中列
已完成列
任务卡片
拖拽功能
长按菜单
编辑页面
表单输入
标签管理
详情页面
信息展示
任务管理

增删改查
状态流转

移动任务
拖拽处理

Draggable/DragTarget
统计计算

任务数量汇总

2.2 类图设计

contains
manages
uses
has
has
navigates
navigates
ProjectBoardApp
+Widget build()
<<enumeration>>
TaskPriority
low
medium
high
urgent
<<enumeration>>
TaskStatus
todo
inProgress
done
Task
+String id
+String title
+String description
+TaskPriority priority
+TaskStatus status
+String assignee
+DateTime dueDate
+List<String> tags
+String priorityText
+Color priorityColor
BoardColumn
+String id
+String title
+TaskStatus status
+Color color
ProjectBoardPage
-List<Task> _tasks
-List<BoardColumn> _columns
+Widget build()
-void _addTask()
-void _editTask()
-void _deleteTask()
-void _moveTask()
-List<Task> _getTasksByStatus()
TaskEditPage
-Task? task
-TextEditingController _titleController
-TaskPriority _selectedPriority
-List<String> _tags
+Widget build()
-void _save()
-void _addTag()
TaskDetailPage

2.3 数据流程图

新建
编辑
删除
查看
拖拽
长按
用户操作
操作类型
打开编辑页面
打开编辑页面-预填充
确认对话框
打开详情页面
移动到目标列
显示操作菜单
填写表单
保存任务
更新看板
更新任务状态
选择操作

2.4 任务状态流转

创建任务
开始处理
退回
完成任务
重新打开
删除
删除
删除
待办
进行中
已完成

三、核心模块设计

3.1 数据模型设计

3.1.1 任务状态枚举 (TaskStatus)

dart 复制代码

enum TaskStatus {
  todo,        // 待办
  inProgress,  // 进行中
  done,        // 已完成
}

3.1.2 任务优先级枚举 (TaskPriority)

dart 复制代码

enum TaskPriority {
  low,     // 低
  medium,  // 中
  high,    // 高
  urgent,  // 紧急
}

3.1.3 任务模型 (Task)

dart 复制代码

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)

dart 复制代码

class BoardColumn {
  final String id;      // 唯一标识
  final String title;   // 列标题
  final TaskStatus status;  // 对应状态
  final Color color;    // 主题颜色
}

3.2 拖拽功能实现

3.2.1 拖拽流程

目标列源列任务卡片用户目标列源列任务卡片用户长按开始拖拽显示拖拽反馈移动到目标列高亮显示释放触发onAccept 更新任务状态

3.2.2 拖拽实现

dart 复制代码

// 可拖拽的任务卡片
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 状态过滤算法

dart 复制代码

List<Task> _getTasksByStatus(TaskStatus status) {
  return _tasks.where((t) => t.status == status).toList();
}

3.4 页面结构设计

3.4.1 看板布局

看板页面
水平滚动容器
待办列
进行中列
已完成列
列标题
任务列表
空状态提示
任务卡片1
任务卡片2
...

3.4.2 任务卡片布局

复制代码

┌─────────────────────────────────────────┐
│ ▌任务标题                               │
│   任务描述内容...                        │
│                                         │
│  [需求] [文档]                          │
│                                         │
│  🚩 高        📅 1/15                   │
│                                         │
│  ● 张三                                  │
└─────────────────────────────────────────┘

3.5 状态管理

3.5.1 核心状态变量

dart 复制代码

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 状态更新流程

dart 复制代码

// 移动任务
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 看板构建

dart 复制代码

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 列构建

dart 复制代码

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 任务移动

dart 复制代码

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 统计功能

dart 复制代码

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 标签管理

dart 复制代码

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 截止日期设定

简单
中等
复杂
设定截止日期
任务复杂度
1-2天
3-5天
1-2周
预留缓冲时间
确定最终日期

七、扩展功能规划

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 核心看板功能拖拽移动功能统计分析功能数据持久化多项目支持团队协作功能甘特图视图时间线视图报表导出功能 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本项目看板应用开发计划

7.2 功能扩展建议

7.2.1 数据持久化

dart 复制代码

// 使用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 运行命令

bash 复制代码

# 查看可用设备
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最佳实践，代码结构清晰，易于维护和扩展。

看板可视，任务清晰，高效协作，项目成功！