看板应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• shared_preferences: https://pub.dev/packages/shared_preferences

一、项目概述

运行效果图

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 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 任务拖拽流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 任务优先级枚举 (TaskPriority)

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)

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)

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 任务优先级分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 看板页面结构

3.2.3 任务卡片结构

3.2.4 统计页面结构

3.3 拖拽逻辑设计

3.4 数据存储逻辑

---

四、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 拖拽功能实现

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 拖放目标实现

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 数据存储实现

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

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

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 任务创建流程

6.2 任务拖拽流程

6.3 看板列管理流程

---

七、扩展功能规划

7.1 后续版本规划

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

# 查看可用设备
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 设计规范，以清新的青色为主色调，象征高效与专注。通过本应用，希望能够帮助用户提升工作效率，实现任务管理的可视化和流程化。

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

---