【Flutter for OpenHarmony】flutter_launcher_icons 应用图标与启动画面的鸿蒙化适配与实战指南欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net一、为什么应用图标这么重要我是 IntMainJhy上海某高校大一计算机专业的学生。说起应用图标我一开始完全没当回事。我的第一版 App 图标就是用 Flutter 默认的图标结果室友看了说“你这 App 图标怎么跟别人一模一样这也太敷衍了吧”后来我才明白应用图标是用户第一眼看到的东西它代表了 App 的品牌形象。一个好的图标可以让用户记住你的 App一个丑的图标可能让用户连下载的欲望都没有。二、flutter_launcher_icons 介绍2.1 什么是 flutter_launcher_iconsflutter_launcher_icons是一个自动生成多平台应用图标的库# pubspec.yamldev_dependencies:flutter_launcher_icons:^0.14.12.2 支持的平台平台图标类型Androidmipmap, adaptiveiOSAppIconOpenHarmonymipmapWebfaviconmacOSicnsWindowsico三、项目配置3.1 pubspec.yamldev_dependencies:flutter_launcher_icons:^0.14.1flutter_launcher_icons:android:trueios:trueohos:true# OpenHarmony 支持web:trueimage_path:assets/icons/icon.pngimage_path_android:assets/icons/icon_android.pngimage_path_ios:assets/icons/icon_ios.pngadaptive_icon_background:#6C63FFadaptive_icon_foreground:assets/icons/icon_foreground.png3.2 图标设计规范assets/icons/ ├── icon.png # 基础图标 (1024x1024) ├── icon_android.png # Android 专用 (1024x1024) ├── icon_ios.png # iOS 专用 (1024x1024) ├── icon_foreground.png # 自适应图标前景 (432x432) └── icon_background.png # 自适应图标背景 (432x432)四、生成图标4.1 准备图标文件图标设计要求基础图标1024x1024 像素格式PNG支持透明度内容简洁、有辨识度4.2 生成命令# 进入项目目录cdmy_ohos_app# 运行图标生成flutter pub run flutter_launcher_icons4.3 生成结果android/app/src/main/res/ ├── mipmap-hdpi/ │ └── ic_launcher.png # 72x72 ├── mipmap-mdpi/ │ └── ic_launcher.png # 48x48 ├── mipmap-xhdpi/ │ └── ic_launcher.png # 96x96 ├── mipmap-xxhdpi/ │ └── ic_launcher.png # 144x144 ├── mipmap-xxxhdpi/ │ └── ic_launcher.png # 192x192 └── drawable/ └── ic_launcher_background.xml # 背景五、OpenHarmony 图标配置5.1 鸿蒙图标目录ohos/entry/src/main/res/ ├── base/ │ └── media/ │ ├── app_icon.png # 应用图标 │ └── ic_launcher.png # 启动器图标 └── rawfile/ # 原始文件5.2 手动配置鸿蒙图标如果flutter_launcher_icons没有自动生成鸿蒙图标需要手动配置// ohos/entry/src/main/module.json5{module:{icon:$media:app_icon,label:$string:entry_ModuleAbility_label}}5.3 图标资源配置{resources:{media:[{name:app_icon,type:bitmap}]}}六、启动画面配置6.1 Android 启动画面!-- android/app/src/main/res/drawable/launch_background.xml --?xml version1.0 encodingutf-8?layer-listxmlns:androidhttp://schemas.android.com/apk/res/androiditemandroid:drawablecolor/launch_background_color/itembitmapandroid:gravitycenterandroid:srcmipmap/ic_launcher//item/layer-list!-- android/app/src/main/res/values/colors.xml --?xml version1.0 encodingutf-8?resourcescolornamelaunch_background_color#6C63FF/color/resources6.2 OpenHarmony 启动画面// ohos/entry/src/main/resources/base/element/color.json{color:[{name:start_window_background,value:#6C63FF}]}6.3 启动画面主题!-- android/app/src/main/res/values/styles.xml --stylenameLaunchThemeparentandroid:style/Theme.Light.NoTitleBaritem nameandroid:windowBackgrounddrawable/launch_background/item/style七、自定义启动动画7.1 Flutter 启动动画组件// lib/mental_health/widgets/splash_screen.dartimportpackage:flutter/material.dart;importpackage:flutter_animate/flutter_animate.dart;/// 启动画面classSplashScreenextendsStatefulWidget{finalVoidCallbackonComplete;constSplashScreen({super.key,requiredthis.onComplete,});overrideStateSplashScreencreateState()_SplashScreenState();}class_SplashScreenStateextendsStateSplashScreen{overridevoidinitState(){super.initState();// 延迟 2 秒后进入主页Future.delayed(constDuration(seconds:2),(){widget.onComplete();});}overrideWidgetbuild(BuildContextcontext){returnScaffold(backgroundColor:constColor(0xFF6C63FF),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[// LogoContainer(width:120,height:120,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(30),boxShadow:[BoxShadow(color:Colors.black.withOpacity(0.2),blurRadius:20,offset:constOffset(0,10),),],),child:constIcon(Icons.favorite,size:60,color:Color(0xFF6C63FF),),).animate().scale(begin:constOffset(0.5,0.5),end:constOffset(1.0,1.0),duration:600.ms,curve:Curves.easeOutBack,).fadeIn(duration:300.ms),constSizedBox(height:32),// App 名称constText(心理健康,style:TextStyle(fontSize:32,fontWeight:FontWeight.bold,color:Colors.white,),).animate().fadeIn(delay:300.ms,duration:400.ms).slideY(begin:0.3,end:0),constSizedBox(height:8),// 副标题constText(关注内心拥抱生活,style:TextStyle(fontSize:16,color:Colors.white70,),).animate().fadeIn(delay:500.ms,duration:400.ms),constSizedBox(height:60),// 加载指示器constCircularProgressIndicator(valueColor:AlwaysStoppedAnimation(Colors.white),strokeWidth:2,).animate().fadeIn(delay:700.ms,duration:300.ms),],),),);}}7.2 在应用中使用启动画面// main.dartvoidmain(){runApp(constMentalHealthApp());}classMentalHealthAppextendsStatefulWidget{constMentalHealthApp({super.key});overrideStateMentalHealthAppcreateState()_MentalHealthAppState();}class_MentalHealthAppStateextendsStateMentalHealthApp{bool _showSplashtrue;void_onSplashComplete(){setState((){_showSplashfalse;});}overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:心理健康,debugShowCheckedModeBanner:false,theme:AppTheme.lightTheme,home:_showSplash?SplashScreen(onComplete:_onSplashComplete):constMentalHealthHomeScreen(),);}}八、OpenHarmony 适配8.1 鸿蒙图标路径鸿蒙设备的图标路径和 Android 不同ohos/entry/src/main/resources/ ├── base/ │ └── media/ │ ├── app_icon.png # 主图标 │ └── ic_launcher.png # 启动图标 └── rawfile/8.2 手动复制图标# 将生成的图标复制到鸿蒙目录cpandroid/app/src/main/res/mipmap-hdpi/ic_launcher.png\ohos/entry/src/main/resources/base/media/ic_launcher.png九、我的踩坑记录坑1图标生成失败报错找不到图标文件。原因图标路径配置错误。解决# 确保路径正确image_path:assets/icons/icon.png坑2OpenHarmony 图标不显示问题鸿蒙设备上图标是默认的。原因没有手动配置鸿蒙图标。解决手动复制图标到鸿蒙目录。坑3自适应图标背景色不对问题自适应图标背景不是紫色。解决flutter_launcher_icons:adaptive_icon_background:#6C63FF# 使用正确的颜色值十、功能验证清单序号检查项测试设备预期结果1Android 图标Android 手机正确显示2iOS 图标iPhone正确显示3鸿蒙图标鸿蒙设备正确显示4启动画面所有设备正常显示5自适应图标Android 8正常显示十一、大一学生真实学习总结图标和启动画面是 App 的门面虽然不是核心功能但非常重要。最重要的几点图标要简洁不要放太多细节要在各种尺寸下都清晰可见启动画面要快不要让用户等太久2-3 秒最合适品牌色要统一图标和 App 主题色要一致建立品牌认知多平台适配不同平台图标要求不同要分别测试作者IntMainJhy创作时间2026年5月