当前位置：首页 > news >正文

Flutter for OpenHarmony 跨平台开发：日历打卡功能实战指南

news 2026/5/2 0:53:42

Flutter for OpenHarmony 跨平台开发：日历打卡功能实战指南

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

一、引言

嘿，亲爱的开发者们～有没有想过，用一套代码就能让你的创意在鸿蒙设备上绽放？今天要和大家分享的，是一个超级实用又可爱的小功能——日历打卡！无论是想养成早起的好习惯，还是坚持每天运动，这个小小的打卡助手都能成为你最好的伙伴呢～

在这个快节奏的时代，养成一个好习惯真的不容易。而日历打卡应用，就像是一个贴心的小伙伴，每天提醒你、鼓励你、陪伴你。当你看到日历上一个个绿色的小圆圈时，那种成就感简直太棒啦！

本文将带领大家使用 Flutter for OpenHarmony 跨平台技术，从零开始实现一个功能完善的日历打卡应用。让我们一起开启这段美妙的开发之旅吧～

二、技术背景

2.1 Flutter for OpenHarmony 简介

Flutter 就像是一个神奇的魔法棒，轻轻一挥，你的应用就能在鸿蒙、Android、iOS 上自由奔跑啦！Flutter 是 Google 推出的开源 UI 框架，以其"一次编写，多处运行"的理念深受开发者喜爱。而 Flutter for OpenHarmony 则是为我们打开了一扇通往鸿蒙生态的大门。

开源鸿蒙（OpenHarmony）是由开放原子开源基金会孵化的开源项目，旨在构建万物智联的操作系统生态。Flutter for OpenHarmony 的出现，让 Flutter 开发者能够无缝地将应用部署到鸿蒙设备上，极大地降低了跨平台开发的门槛。

2.2 跨平台开发的优势

相比传统的原生开发，Flutter 跨平台开发有着独特的魅力：

开发效率提升：一套代码，多端运行，再也不用为不同平台分别开发啦！

热重载体验：修改代码后立即看到效果，开发体验超级流畅～

精美的 UI：Flutter 提供丰富的 Material Design 和 Cupertino 组件，让你的应用颜值在线！

性能优异：Flutter 直接编译为原生代码，运行流畅不卡顿。

2.3 与原生鸿蒙开发的对比

特性	Flutter for OpenHarmony	原生鸿蒙开发
学习曲线	较平缓，Dart语言简洁	ArkTS/ArkUI需要学习
开发效率	一套代码多端运行	仅限鸿蒙平台
UI组件	丰富的跨平台组件	鸿蒙特有组件
性能	接近原生	原生性能
生态	Flutter庞大生态	鸿蒙生态

三、功能设计

3.1 功能概述

我们要实现的日历打卡功能，可不是简单的"点一下就完事"哦！它包含以下贴心的小功能：

多习惯追踪：支持早起、运动、阅读、学习、冥想、喝水等多种习惯，想追踪哪个就选哪个～

日历视图展示：清晰的月历视图，一目了然地看到自己的打卡记录。

打卡统计：本月打卡次数、连续打卡天数、总打卡天数，让成就感看得见！

视觉反馈：已打卡的日期显示绿色圆圈，今天有蓝色边框提示，未来日期则显示为灰色不可点击。

3.2 界面设计

界面从上到下依次为：

习惯选择器：横向滚动的 FilterChip 列表，选择要追踪的习惯
统计面板：渐变背景的统计卡片，显示打卡数据
月份切换：左右箭头切换月份，中间显示年月
星期标题：日一二三四五六
日历网格：7列的日期网格，点击即可打卡

四、核心实现

4.1 数据结构设计

首先，我们需要设计数据结构来存储打卡记录：

// 当前显示的月份DateTime_currentMonth=DateTime.now();// 当前选中的习惯String_selectedHabit='早起';// 支持的习惯列表finalList<String>_habits=['早起','运动','阅读','学习','冥想','喝水'];// 打卡记录存储，key为习惯名称，value为打卡日期集合finalMap<String,Set<String>>_habitRecords={};

这里使用Map<String, Set<String>>来存储打卡记录，每个习惯对应一个日期字符串集合。日期字符串格式为年-月-日，例如2026-04-29。

4.2 打卡状态判断

判断某一天是否已打卡：

bool_isChecked(DateTimedate){finalkey='${date.year}-${date.month}-${date.day}';return(_habitRecords[_selectedHabit]??{}).contains(key);}

4.3 打卡/取消打卡

点击日期时的处理逻辑：

void_toggleCheck(DateTimedate){finalkey='${date.year}-${date.month}-${date.day}';setState((){_habitRecords[_selectedHabit]??={};if(_habitRecords[_selectedHabit]!.contains(key)){_habitRecords[_selectedHabit]!.remove(key);}else{_habitRecords[_selectedHabit]!.add(key);}});}

4.4 统计数据计算

本月打卡次数：

int_getMonthCheckCount(){return(_habitRecords[_selectedHabit]??{}).where((d)=>d.startsWith('${_currentMonth.year}-${_currentMonth.month}')).length;}

连续打卡天数：

int_getStreak(){int streak=0;DateTimecheckDate=DateTime.now();while(true){finalkey='${checkDate.year}-${checkDate.month}-${checkDate.day}';if((_habitRecords[_selectedHabit]??{}).contains(key)){streak++;checkDate=checkDate.subtract(constDuration(days:1));}else{break;}}returnstreak;}

五、完整代码实现

5.1 日历打卡功能完整代码

import'package:flutter/material.dart';classCalendarFeatureextendsStatefulWidget{constCalendarFeature({super.key});@overrideState<CalendarFeature>createState()=>_CalendarFeatureState();}class_CalendarFeatureStateextendsState<CalendarFeature>{DateTime_currentMonth=DateTime.now();String_selectedHabit='早起';finalList<String>_habits=['早起','运动','阅读','学习','冥想','喝水'];finalMap<String,Set<String>>_habitRecords={};bool_isChecked(DateTimedate){finalkey='${date.year}-${date.month}-${date.day}';return(_habitRecords[_selectedHabit]??{}).contains(key);}void_toggleCheck(DateTimedate){finalkey='${date.year}-${date.month}-${date.day}';setState((){_habitRecords[_selectedHabit]??={};if(_habitRecords[_selectedHabit]!.contains(key)){_habitRecords[_selectedHabit]!.remove(key);}else{_habitRecords[_selectedHabit]!.add(key);}});}int_getMonthCheckCount(){return(_habitRecords[_selectedHabit]??{}).where((d)=>d.startsWith('${_currentMonth.year}-${_currentMonth.month}')).length;}int_getStreak(){int streak=0;DateTimecheckDate=DateTime.now();while(true){finalkey='${checkDate.year}-${checkDate.month}-${checkDate.day}';if((_habitRecords[_selectedHabit]??{}).contains(key)){streak++;checkDate=checkDate.subtract(constDuration(days:1));}else{break;}}returnstreak;}@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[_buildHabitSelector(),_buildStats(),_buildMonthHeader(),_buildWeekDays(),Expanded(child:_buildCalendarGrid()),],);}Widget_buildHabitSelector(){returnContainer(padding:constEdgeInsets.all(12),child:SingleChildScrollView(scrollDirection:Axis.horizontal,child:Row(children:_habits.map((habit)=>Padding(padding:constEdgeInsets.only(right:8),child:FilterChip(label:Text(habit),selected:_selectedHabit==habit,onSelected:(selected){setState(()=>_selectedHabit=habit);},selectedColor:Colors.green.shade200,),)).toList(),),),);}Widget_buildStats(){returnContainer(margin:constEdgeInsets.symmetric(horizontal:12),padding:constEdgeInsets.all(16),decoration:BoxDecoration(gradient:LinearGradient(colors:[Colors.green.shade400,Colors.green.shade600],begin:Alignment.centerLeft,end:Alignment.centerRight,),borderRadius:BorderRadius.circular(12),),child:Row(mainAxisAlignment:MainAxisAlignment.spaceAround,children:[_buildStatItem('本月打卡',_getMonthCheckCount(),Icons.calendar_today),_buildStatItem('连续天数',_getStreak(),Icons.local_fire_department),_buildStatItem('总天数',(_habitRecords[_selectedHabit]??{}).length,Icons.star),],),);}Widget_buildStatItem(Stringlabel,int value,IconDataicon){returnColumn(children:[Icon(icon,color:Colors.white,size:24),constSizedBox(height:4),Text('$value',style:constTextStyle(fontSize:24,fontWeight:FontWeight.bold,color:Colors.white)),Text(label,style:constTextStyle(fontSize:12,color:Colors.white70)),],);}Widget_buildMonthHeader(){returnContainer(padding:constEdgeInsets.symmetric(horizontal:16,vertical:12),child:Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:[IconButton(icon:constIcon(Icons.chevron_left,size:28),onPressed:()=>setState(()=>_currentMonth=DateTime(_currentMonth.year,_currentMonth.month-1)),),Text('${_currentMonth.year}年${_currentMonth.month}月',style:constTextStyle(fontSize:20,fontWeight:FontWeight.bold),),IconButton(icon:constIcon(Icons.chevron_right,size:28),onPressed:()=>setState(()=>_currentMonth=DateTime(_currentMonth.year,_currentMonth.month+1)),),],),);}Widget_buildWeekDays(){constweekDays=['日','一','二','三','四','五','六'];returnContainer(padding:constEdgeInsets.symmetric(vertical:8),child:Row(children:weekDays.map((d)=>Expanded(child:Center(child:Text(d,style:constTextStyle(fontWeight:FontWeight.bold,color:Colors.grey)),),)).toList(),),);}Widget_buildCalendarGrid(){finalfirstDay=DateTime(_currentMonth.year,_currentMonth.month,1);finallastDay=DateTime(_currentMonth.year,_currentMonth.month+1,0);finalstartWeekday=firstDay.weekday%7;finaltotalDays=lastDay.day+startWeekday;returnGridView.builder(padding:constEdgeInsets.symmetric(horizontal:8),gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:7,childAspectRatio:1,),itemCount:totalDays,itemBuilder:(context,index){if(index<startWeekday)returnconstSizedBox();finalday=index-startWeekday+1;finaldate=DateTime(_currentMonth.year,_currentMonth.month,day);finalchecked=_isChecked(date);finalisToday=_isToday(date);finalisFuture=date.isAfter(DateTime.now());returnGestureDetector(onTap:isFuture?null:()=>_toggleCheck(date),child:Container(margin:constEdgeInsets.all(4),decoration:BoxDecoration(color:checked?Colors.green:(isToday?Colors.blue.shade50:null),shape:BoxShape.circle,border:isToday&&!checked?Border.all(color:Colors.blue,width:2):null,),child:Stack(alignment:Alignment.center,children:[Text('$day',style:TextStyle(color:checked?Colors.white:(isFuture?Colors.grey.shade300:null),fontWeight:isToday?FontWeight.bold:null,),),if(checked)constPositioned(bottom:2,child:Icon(Icons.check,size:12,color:Colors.white),),],),),);},);}bool_isToday(DateTimedate){finalnow=DateTime.now();returndate.year==now.year&&date.month==now.month&&date.day==now.day;}}

六、运行效果

运行效果展示：

习惯选择器可以横向滚动选择不同习惯
统计面板显示渐变绿色背景，数据清晰
日历网格中已打卡日期显示绿色圆圈
今天有蓝色边框高亮提示
点击日期即可完成打卡/取消打卡

七、关键技术点解析

7.1 GridView 构建日历网格

使用GridView.builder构建日历网格，关键点在于计算起始位置：

finalfirstDay=DateTime(_currentMonth.year,_currentMonth.month,1);finalstartWeekday=firstDay.weekday%7;

weekday % 7是为了将周一为1的星期转换为周日为0的格式。

7.2 FilterChip 实现习惯选择

FilterChip是 Material Design 3 的组件，非常适合做这种可选择的标签：

FilterChip(label:Text(habit),selected:_selectedHabit==habit,onSelected:(selected){setState(()=>_selectedHabit=habit);},selectedColor:Colors.green.shade200,)