任务看板是敏捷开发中的重要工具，能够直观地展示任务的流转状态。本文将详细介绍如何在Flutter for OpenHarmony应用中实现一个功能完整的任务看板系统。

看板结构设计

任务看板采用多列布局，每列代表任务的不同状态：

class TaskBoardPage extends StatefulWidget {
  @override
  _TaskBoardPageState createState() => _TaskBoardPageState();
}

class _TaskBoardPageState extends State<TaskBoardPage> {
  final List<String> columns = ['待开始', '进行中', '测试中', '已完成'];
  
  final Map<String, List<Task>> tasks = {
    '待开始': [
      Task(projectId: '1', title: '设计用户界面', description: '完成登录和注册页面设计'),
      Task(projectId: '1', title: '数据库设计', description: '设计用户表和权限表'),
    ],

看板使用四列布局，分别对应任务的不同阶段。任务数据使用Map结构组织，键为列名，值为该列的任务列表。

任务数据模型

每个任务包含完整的信息，便于管理和展示：

'进行中': [
  Task(projectId: '1', title: '实现API接口', description: '用户认证相关接口开发'),
  Task(projectId: '1', title: '前端页面开发', description: '使用React开发管理页面'),
],
'测试中': [
  Task(projectId: '1', title: '单元测试', description: '编写核心功能的单元测试'),
],
'已完成': [
  Task(projectId: '1', title: '项目初始化', description: '搭建项目基础架构'),
  Task(projectId: '1', title: '环境配置', description: '配置开发和生产环境'),
],

任务分布在不同状态列中，每个任务都有标题、描述等详细信息。这种数据结构便于任务的状态管理和流转。

页面布局实现

看板页面使用水平滚动的行布局来容纳所有列：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('任务看板'),
      backgroundColor: Theme.of(context).primaryColor,
      foregroundColor: Colors.white,
      actions: [
        IconButton(
          icon: const Icon(Icons.add),
          onPressed: _addTask,
        ),
      ],
    ),
    body: Padding(
      padding: EdgeInsets.all(16.w),
      child: Row(
        children: columns.map((column) {
          return Expanded(
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 4.w),

页面主体使用Row组件水平排列各列，每列使用Expanded组件平均分配宽度。应用栏包含添加任务按钮。

列标题设计

每列顶部显示状态名称和任务数量：

child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      width: double.infinity,
      padding: EdgeInsets.all(12.w),
      decoration: BoxDecoration(
        color: _getColumnColor(column),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        '$column (${tasks[column]?.length ?? 0})',
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 14.sp,
        ),
        textAlign: TextAlign.center,
      ),
    ),

列标题使用彩色背景区分不同状态，显示状态名称和任务数量。文字使用白色确保在彩色背景上的可读性。

任务卡片列表

每列下方是该状态的任务卡片列表：

SizedBox(height: 8.h),
Expanded(
  child: ListView.builder(
    itemCount: tasks[column]?.length ?? 0,
    itemBuilder: (context, index) {
      final task = tasks[column]![index];
      return Card(
        margin: EdgeInsets.only(bottom: 8.h),
        child: Padding(
          padding: EdgeInsets.all(12.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                task.title,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 14.sp,
                ),
              ),

任务列表使用ListView.builder高效渲染，每个任务都是一个卡片。任务标题使用粗体显示，突出重要信息。

任务描述展示

任务卡片包含详细的描述信息：

SizedBox(height: 4.h),
Text(
  task.description,
  style: TextStyle(
    fontSize: 12.sp,
    color: Colors.grey[600],
  ),
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
),
SizedBox(height: 8.h),

任务描述使用较小字号和灰色显示，限制最大行数避免卡片过高。超出部分使用省略号显示。

任务优先级标签

任务卡片底部显示优先级和负责人信息：

Row(
  children: [
    Container(
      padding: EdgeInsets.symmetric(
        horizontal: 6.w,
        vertical: 2.h,
      ),
      decoration: BoxDecoration(
        color: _getPriorityColor(task.priority).withOpacity(0.2),
        borderRadius: BorderRadius.circular(4),
      ),
      child: Text(
        task.priority,
        style: TextStyle(
          fontSize: 10.sp,
          color: _getPriorityColor(task.priority),
        ),
      ),
    ),
    const Spacer(),
    Icon(
      Icons.person,
      size: 16.sp,
      color: Colors.grey[600],
    ),
  ],
),

优先级标签使用不同颜色区分，右侧显示负责人图标。标签采用圆角矩形设计，视觉效果更加现代。

列颜色映射

不同状态列使用不同颜色进行视觉区分：

Color _getColumnColor(String column) {
  switch (column) {
    case '待开始':
      return Colors.grey;
    case '进行中':
      return Colors.blue;
    case '测试中':
      return Colors.orange;
    case '已完成':
      return Colors.green;
    default:
      return Colors.grey;
  }
}

颜色选择遵循直觉：灰色表示未开始，蓝色表示进行中，橙色表示测试阶段，绿色表示已完成。

优先级颜色映射

任务优先级也使用颜色进行区分：

Color _getPriorityColor(String priority) {
  switch (priority) {
    case 'high':
      return Colors.red;
    case 'medium':
      return Colors.orange;
    case 'low':
      return Colors.green;
    default:
      return Colors.grey;
  }
}

高优先级使用红色，中等优先级使用橙色，低优先级使用绿色。这种颜色编码帮助用户快速识别任务重要性。

添加任务功能

看板提供添加新任务的功能：

void _addTask() {
  // TODO: 实现添加任务功能
}

目前是占位实现，实际应用中可以打开任务创建对话框，允许用户输入任务信息并选择初始状态。

任务拖拽功能扩展

虽然当前实现没有包含拖拽功能，但可以通过以下方式扩展：

// 可以使用Draggable和DragTarget组件实现任务拖拽
Draggable<Task>(
  data: task,
  child: TaskCard(task: task),
  feedback: Material(
    child: TaskCard(task: task),
  ),
  childWhenDragging: Opacity(
    opacity: 0.5,
    child: TaskCard(task: task),
  ),
)

拖拽功能可以让用户通过拖拽任务卡片来改变任务状态，提供更直观的操作体验。

任务筛选功能

看板可以扩展筛选功能，按优先级或负责人筛选任务：

// 筛选功能示例
List<Task> _filterTasks(List<Task> tasks, String filter) {
  if (filter == 'all') return tasks;
  return tasks.where((task) => task.priority == filter).toList();
}

筛选功能帮助用户在任务较多时快速找到关注的任务。

任务搜索功能

可以添加搜索框让用户搜索特定任务：

// 搜索功能示例
List<Task> _searchTasks(List<Task> tasks, String query) {
  if (query.isEmpty) return tasks;
  return tasks.where((task) => 
    task.title.toLowerCase().contains(query.toLowerCase()) ||
    task.description.toLowerCase().contains(query.toLowerCase())
  ).toList();
}

搜索功能支持按任务标题或描述进行模糊匹配。

任务统计信息

看板可以显示各状态的任务统计：

// 统计信息计算
Map<String, int> _getTaskStats() {
  Map<String, int> stats = {};
  tasks.forEach((status, taskList) {
    stats[status] = taskList.length;
  });
  return stats;
}

统计信息帮助项目管理者了解任务分布和项目进度。

响应式设计考虑

在不同屏幕尺寸下，看板布局需要适配：

// 响应式列数
int _getColumnCount(BuildContext context) {
  double screenWidth = MediaQuery.of(context).size.width;
  if (screenWidth > 1200) return 4;
  if (screenWidth > 800) return 3;
  if (screenWidth > 600) return 2;
  return 1;
}

小屏幕设备可能需要减少显示的列数或使用垂直滚动布局。

总结

通过以上实现，我们创建了一个功能完整的任务看板系统，支持多状态任务管理、优先级标识、视觉化状态区分等功能。看板设计注重用户体验，通过颜色编码和直观的布局帮助用户快速理解任务状态。在Flutter for OpenHarmony平台上，这样的任务管理工具能够有效提升开发团队的协作效率。

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