【开源鸿蒙跨平台开发先锋训练营】Flutter框架下鸿蒙应用图标动态化实践指南

应用市场大部分热门榜单应用都是在设计视觉上下功夫，这次计划优化下页面中的图标，使用动态图标来提升下美感。

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

文章目录

• • 一、目标与方案
  • 二、依赖变更
  • • 2.1 pubspec.yaml
    • 2.2 说明
  • 三、新增文件：统一图标入口
  • 四、替换前后代码对比
  • • 4.1 底部导航栏（root_page.dart）
    • 4.2 作品详情页（work_detail_page.dart）
    • 4.3 首页列表/网格切换（home_page.dart）
    • 4.4 我的页（profile_page.dart）
    • 4.5 收藏页（favorites_page.dart）
    • 4.6 发现页（search_page.dart）
    • 4.7 消息页（messages_page.dart）
    • 4.8 网络图片加载失败（network_image_widget.dart）
  • 五、效果
  • 六、使用提醒
  • 七、参考链接
  • 结束语

一、目标与方案

前段时间看到这个 lucide-animated.com，感觉不错，这些把他接入到项目中

• 将项目中的图标全部替换为 Lucide 风格的动态图标，提升视觉与交互体验（参考 ）。
• 使用 Flutter 包 not_static_icons（基于 Lucide、无需 Rive/Lottie），在 lib/widgets/app_icons.dart 中封装统一入口，各页面通过该入口使用动态图标；包内未提供的少数图标仍使用 Material Icons 兜底。

二、依赖变更

2.1 pubspec.yaml

替换前：

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.8
dio: ^5.4.0
cached_network_image: ^3.3.1
shared_preferences: ^2.2.2

替换后：

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.8
dio: ^5.4.0
cached_network_image: ^3.3.1
shared_preferences: ^2.2.2
# 动态图标（Lucide 风格动画图标），提升视觉交互
not_static_icons: ^0.31.0

2.2 说明

• 原计划使用 flutter_lucide_animated（与 lucide-animated.com 同源），因该包要求 Dart SDK >= 3.10.1，与当前项目 SDK ^3.6.2 不兼容，故改用 not_static_icons。
• not_static_icons 同样基于 Lucide、提供 350+ 动画图标，支持 hover/触摸触发动画、可配置时长与颜色，且仅依赖 Flutter，与当前环境兼容。

三、新增文件：统一图标入口

文件：lib/widgets/app_icons.dart

• 对外提供一组方法：appArrowBackIcon、appHeartIcon、appBookmarkIcon、appHomeIcon、appSearchIcon、appMessageIcon、appUserIcon、appChevronRightIcon、appSettingsIcon、appHistoryIcon、appLogOutIcon、appRefreshIcon、appUserPlusIcon、appSendIcon、appImageOffIcon、appCircleAlertIcon、appGridIcon、appListIcon 等。
• 每个方法支持 size、color、interactive、部分支持 controller；默认动画时长 400ms。
• 设置、添加用户 等包内无合适图标时使用 Material Icons（如 Icons.settings_outlined、Icons.person_add_alt_1），其余尽量使用 not_static_icons 中对应 Lucide 图标（如 BookSearchIcon、BotMessageSquareIcon、ArrowUpRightIcon、CameraOffIcon 等）。

四、替换前后代码对比

4.1 底部导航栏（root_page.dart）

效果：底部 Tab 切换时仍为选中/未选中颜色区分，图标在点击或悬停时可播放包自带的绘制/脉冲等动画，交互反馈更明显。

4.2 作品详情页（work_detail_page.dart）

效果：返回、收藏等按钮在点击时有动画反馈；底部统计仍为静态展示，风格与 Lucide 统一。

4.3 首页列表/网格切换（home_page.dart）

效果：切换列表/网格时，图标本身带动画（如 Grid2x2Icon / LayersIcon），更易感知当前模式。

4.4 我的页（profile_page.dart）

效果：列表项与设置项在点击时箭头/心形等有动画；统计与空态为静态图标，风格统一。

4.5 收藏页（favorites_page.dart）

4.6 发现页（search_page.dart）

4.7 消息页（messages_page.dart）

4.8 网络图片加载失败（network_image_widget.dart）

效果：加载失败时显示带轻微动画的警示图标，风格与全局一致。

五、效果

鸿蒙app动态图标使用效果

六、使用提醒

七、参考链接

• Lucide Animated（Web 展示）
• not_static_icons（pub.dev）

结束语

感谢阅读本帖，如对贴中内容有意见和建议的，欢迎与我联系交流，也欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net