Flutter 框架跨平台鸿蒙开发 - 黑白屏

黑白屏应用欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net一、项目概述运行效果图1.1 应用简介黑白屏是一款极简主义应用核心理念是只有黑白两色回归最原始的视觉。在这个色彩斑斓的数字世界中黑白屏应用提供了一种独特的视觉体验让用户能够远离色彩的干扰回归最纯粹、最原始的视觉感受。应用采用纯粹的黑白配色方案没有任何彩色元素创造出一种极简、宁静、专注的氛围。通过纯屏切换、极简笔记、专注计时、冥想模式四大功能帮助用户在喧嚣的数字世界中找到一片宁静的空间。1.2 核心功能功能模块功能描述实现方式纯屏切换黑屏/白屏一键切换手势识别状态管理极简笔记纯文字笔记记录文本输入列表展示专注计时黑白倒计时器Timer动画效果冥想模式呼吸引导冥想动画控制器节奏引导1.3 设计理念┌─────────────────────────────────────────────────────────┐ │ 黑白屏设计理念 │ ├─────────────────────────────────────────────────────────┤ │ │ │ ⚪ 极简主义 │ │ 去除一切不必要的装饰回归本质 │ │ │ │ ⚫ 专注纯粹 │ │ 没有色彩的干扰让注意力更集中 │ │ │ │ ⚪ 视觉休息 │ │ 在彩色世界中给眼睛一个休息的空间 │ │ │ │ ⚫ 内心平静 │ │ 黑白的宁静带来内心的平和 │ │ │ └─────────────────────────────────────────────────────────┘1.4 技术栈技术领域技术选型版本要求开发框架Flutter 3.0.0编程语言Dart 2.17.0设计规范Material Design 3-状态管理setState-动画控制AnimationController-目标平台鸿蒙OS / WebAPI 21二、项目结构lib/ ├── main_black_white.dart # 应用主入口 │ ├── BlackWhiteApp # 根应用组件 │ ├── ScreenMode # 屏幕模式枚举 │ ├── Note # 笔记模型 │ └── BlackWhiteHomePage # 主页面三、数据模型3.1 ScreenMode 枚举enumScreenMode{white(白屏,⚪),black(黑屏,⚫);finalStringlabel;finalStringemoji;}3.2 Note 模型classNote{finalStringid;// 笔记唯一标识Stringcontent;// 笔记内容DateTimecreatedAt;// 创建时间DateTimeupdatedAt;// 更新时间}四、核心功能实现4.1 纯屏切换点击点击打开应用显示白屏点击屏幕切换到黑屏点击屏幕切换到白屏4.2 黑白切换实现void_toggleScreenMode(){setState((){_isBlackMode!_isBlackMode;_screenMode_isBlackMode?ScreenMode.black:ScreenMode.white;});}Widget_buildPureScreen(ColortextColor,ColorbgColor){returnGestureDetector(onTap:_toggleScreenMode,child:Container(color:bgColor,child:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Container(width:150,height:150,decoration:BoxDecoration(color:textColor,shape:BoxShape.circle,),child:Text(_screenMode.emoji),),Text(_screenMode.label),],),),),);}4.3 专注计时器开始暂停继续时间到重置重置停止运行暂停完成4.4 计时器实现void_startTimer(){if(_isTimerRunning){_timer?.cancel();setState((){_isTimerRunningfalse;});}else{setState((){_isTimerRunningtrue;_timerSeconds_targetMinutes*60;});_timerTimer.periodic(constDuration(seconds:1),(timer){setState((){if(_timerSeconds0){_timerSeconds--;}else{_timer?.cancel();_isTimerRunningfalse;}});});}}String_formatTime(int seconds){finalminutesseconds~/60;finalsecsseconds%60;return${minutes.toString().padLeft(2, 0)}:${secs.toString().padLeft(2, 0)};}4.5 冥想呼吸动画_pulseControllerAnimationController(vsync:this,duration:constDuration(milliseconds:2000),)..repeat(reverse:true);AnimatedBuilder(animation:_pulseController,builder:(context,child){returnContainer(width:200(_pulseController.value*20),height:200(_pulseController.value*20),decoration:BoxDecoration(shape:BoxShape.circle,border:Border.all(color:textColor.withValues(alpha:0.3(_pulseController.value*0.2)),width:1,),),);},)五、界面设计5.1 纯屏页面┌─────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ ⚪ │ │ 白屏 │ │ │ │ 点击屏幕切换 │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────┘ ⬇️ 点击切换 ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ ⚫ │ │ 黑屏 │ │ │ │ 点击屏幕切换 │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────┘5.2 极简笔记页面┌─────────────────────────────────────┐ │ 极简笔记 [] │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ 极简主义回归本质 │ │ │ │ │ │ │ │ 昨天 │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 黑白之间万色归一 │ │ │ │ │ │ │ │ 2天前 │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 专注当下享受纯粹 │ │ │ │ │ │ │ │ 3天前 │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘5.3 专注计时页面┌─────────────────────────────────────┐ │ │ │ 专注计时 │ │ │ │ │ │ ┌─────────┐ │ │ │ │ │ │ │ 25:00 │ │ │ │ │ │ │ └─────────┘ │ │ │ │ [5] [15] [25] [45] [60] │ │ │ │ ▶️ │ │ │ │ │ └─────────────────────────────────────┘5.4 冥想模式页面┌─────────────────────────────────────┐ │ │ │ 冥想模式 │ │ │ │ │ │ ╭───────╮ │ │ ╱ ╲ │ │ │ ╭───╮ │ │ │ │ │ ● │ │ │ │ │ ╰───╯ │ │ │ ╲ ╱ │ │ ╰───────╯ │ │ │ │ 呼吸 │ │ │ │ 吸气 4秒 · 屏息 4秒 · 呼气 4秒 │ │ │ └─────────────────────────────────────┘六、动画效果6.1 黑白切换动画AnimatedContainer(duration:constDuration(milliseconds:500),width:150,height:150,decoration:BoxDecoration(color:textColor,shape:BoxShape.circle,),child:AnimatedSwitcher(duration:constDuration(milliseconds:300),child:Text(_screenMode.emoji,key:ValueKey(_screenMode),style:constTextStyle(fontSize:60),),),)6.2 文字颜色动画AnimatedDefaultTextStyle(duration:constDuration(milliseconds:500),style:TextStyle(fontSize:32,fontWeight:FontWeight.bold,color:textColor,),child:Text(_screenMode.label),)6.3 呼吸脉冲动画_pulseControllerAnimationController(vsync:this,duration:constDuration(milliseconds:2000),)..repeat(reverse:true);// 脉冲效果圆圈从小到大再从大到小width:200(_pulseController.value*20),height:200(_pulseController.value*20),七、运行与调试7.1 运行命令# 运行到鸿蒙设备flutter run-dharmony lib/main_black_white.dart# 运行到Web服务器flutter run-dweb-server-tlib/main_black_white.dart --web-port8122# 运行到Windowsflutter run-dwindows-tlib/main_black_white.dart# 代码分析flutter analyze lib/main_black_white.dart7.2 功能测试清单测试项测试内容预期结果纯屏切换点击屏幕切换黑白平滑切换动画笔记添加创建新笔记笔记显示在列表计时器开始/暂停/重置正确计时时间选择选择不同时长正确设置时间冥想动画观察呼吸动画脉冲效果流畅导航切换切换不同页面页面正确切换八、扩展方向8.1 功能扩展计划版本功能描述v1.1黑白滤镜将照片转换为黑白v1.2黑白画板纯黑白绘画工具v1.3黑白主题更多黑白主题选择v1.4数据统计记录使用时长和频率v1.5社区分享分享黑白艺术作品8.2 高级功能黑白屏创作工具生活应用艺术探索黑白画板黑白滤镜黑白书法专注模式冥想引导睡眠辅助黑白摄影极简艺术抽象表达九、使用场景9.1 典型使用场景⚫ 黑白屏使用场景 ⚪场景描述功能使用视觉休息长时间看彩色屏幕后休息纯屏模式专注工作需要高度集中注意力专注计时冥想放松进行冥想练习冥想模式极简记录记录重要想法极简笔记夜间使用夜间使用手机减少刺激黑屏模式9.2 使用建议┌─────────────────────────────────────────────────────────┐ │ 黑白屏使用建议 │ ├─────────────────────────────────────────────────────────┤ │ │ │ 夜间模式 │ │ 睡前使用黑屏模式减少蓝光刺激 │ │ │ │ ⏰ 专注时间 │ │ 使用计时器进行番茄工作法提高效率 │ │ │ │ 冥想练习 │ │ 每天花10分钟进行冥想放松身心 │ │ │ │ 极简记录 │ │ 用最少的文字记录最重要的想法 │ │ │ │ ️ 视觉休息 │ │ 每隔1小时切换到黑白屏让眼睛休息 │ │ │ └─────────────────────────────────────────────────────────┘十、极简主义哲学10.1 极简主义原则原则说明应用体现少即是多用最少的元素表达最多的内容纯黑白配色去除冗余删除一切不必要的装饰无图标、无渐变功能优先功能决定形式直观的操作方式留白之美空白也是设计的一部分大量留白空间专注本质关注核心价值核心功能突出10.2 黑白美学⚪⚫ 黑白美学 ⚫⚪黑与白是最纯粹的颜色黑- 代表深邃、神秘、力量白- 代表纯净、简洁、希望黑白之间- 无限的可能性在黑白世界中没有色彩的干扰注意力更集中形式更加纯粹美感更加突出对比更加强烈视觉更加清晰情感更加纯粹体验更加深刻十一、心理学意义11.1 视觉心理学方面说明效果视觉疲劳减少色彩刺激降低视觉疲劳注意力去除色彩干扰提高专注度情绪影响黑白的平静减少情绪波动认知负荷简化视觉信息降低认知负担11.2 冥想的科学 冥想的科学依据 研究表明冥想可以降低压力和焦虑改善注意力和专注力增强自我意识促进情绪稳定改善睡眠质量呼吸冥想的好处4-7-8呼吸法- 吸气4秒屏息7秒呼气8秒箱式呼吸- 吸气4秒屏息4秒呼气4秒屏息4秒正念呼吸- 关注呼吸觉察当下十二、设计细节12.1 配色方案┌─────────────────────────────────────┐ │ 黑白配色方案 │ ├─────────────────────────────────────┤ │ │ │ ⚪ 白色 #FFFFFF │ │ • 背景白屏模式 │ │ • 文字黑屏模式 │ │ • 图形元素 │ │ │ │ ⚫ 黑色 #000000 │ │ • 背景黑屏模式 │ │ • 文字白屏模式 │ │ • 图形元素 │ │ │ │ ⚪ 灰色层次 │ │ • #000000 100% 黑色 │ │ • #333333 80% 深灰 │ │ • #666666 60% 中灰 │ │ • #999999 40% 浅灰 │ │ • #CCCCCC 20% 淡灰 │ │ • #FFFFFF 0% 白色 │ │ │ └─────────────────────────────────────┘12.2 字体规范元素字号字重颜色标题24pxBold黑/白正文16pxRegular黑/白辅助文字12-14pxRegular灰色数字56pxLight黑/白12.3 间距规范元素间距页面边距20px卡片内边距16px元素间距12px底部导航高度56px十三、总结黑白屏应用通过只有黑白两色回归最原始的视觉的核心理念为用户提供了一个独特的数字体验空间。应用采用纯粹的黑白配色没有任何彩色元素创造出极简、宁静、专注的氛围。应用涵盖纯屏切换、极简笔记、专注计时、冥想模式四大核心功能。纯屏切换让用户能够在黑白之间自由切换给眼睛一个休息的空间极简笔记用最少的文字记录最重要的想法专注计时帮助用户进行番茄工作法提高工作效率冥想模式通过呼吸引导帮助用户放松身心。设计上应用遵循极简主义原则去除一切不必要的装饰只保留最核心的功能和最纯粹的形式。大量的留白、简洁的线条、纯粹的黑白对比创造出一种独特的美学体验。技术上应用采用Flutter框架开发使用Material Design 3设计规范代码结构清晰易于维护和扩展。动画效果流畅自然交互体验简洁直观。在色彩斑斓的数字世界中黑白屏应用提供了一个独特的视觉休息空间让用户能够远离色彩的干扰回归最纯粹、最原始的视觉感受。无论是用于视觉休息、专注工作、冥想放松还是极简记录黑白屏应用都能为用户带来独特的体验。黑白之间万色归一 ⚫⚪