FSA全栈行动 FSA全栈行动
首页
  • 移动端文章

    • Android
    • iOS
    • Flutter
  • 学习笔记

    • 《Kotlin快速入门进阶》笔记
    • 《Flutter从入门到实战》笔记
    • 《Flutter复习》笔记
  • 内功心法

    • 《深入浅出设计模式Java版》笔记
前端
后端
  • 产品
  • 代理
  • 提效
  • 逆向
  • 分类
  • 标签
  • 归档
  • LinXunFeng
  • GitLqr

公众号:FSA全栈行动

记录学习过程中的知识
首页
  • 移动端文章

    • Android
    • iOS
    • Flutter
  • 学习笔记

    • 《Kotlin快速入门进阶》笔记
    • 《Flutter从入门到实战》笔记
    • 《Flutter复习》笔记
  • 内功心法

    • 《深入浅出设计模式Java版》笔记
前端
后端
  • 产品
  • 代理
  • 提效
  • 逆向
  • 分类
  • 标签
  • 归档
  • LinXunFeng
  • GitLqr
  • AndroidUI

  • Android第三方SDK

  • Android混淆

  • Android仓库

  • Android新闻

  • Android系统开发

  • Android源码

  • Android注解AOP

  • Android脚本

  • AndroidTv开发

  • AndroidNDK

  • Android音视频

  • Android热修复

  • Android性能优化

  • Android云游戏

  • Android插件化

  • iOSUI

  • iOS工具

  • iOS底层原理与应用

  • iOS组件化

  • iOS音视频

  • iOS疑难杂症

  • iOS之Swift

  • iOS之RxSwift

  • iOS开源项目

  • iOS逆向

  • Flutter开发

    • Dart - 抽象类的实例化
    • Flutter - 打印好用的Debug日志
    • Flutter - 混合开发
    • Flutter - 解决混合开发iOS脚本打包遇到的问题
    • Flutter - 低版本在iOS14上遇到的问题与解决方案
    • Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题
    • Flutter - 实现列表上下拉切换header
    • Flutter - 获取ListView当前正在显示的Widget信息
    • Flutter - 列表滚动定位超强辅助库,墙裂推荐!🔥
    • Flutter - 快速实现聊天会话列表的效果,完美💯
    • Flutter - 聊天输入框更新文本时的必备优化点🔖
    • Flutter - 我给官方提PR,解决run命令卡住问题 😃
    • Flutter - 探索run命令到底做了什么 🤔
    • Flutter - 引擎调试(iOS篇)🛠
    • Flutter - 引擎调试bug到提交PR实战 🐞
    • Flutter - 船新升级😱支持观察第三方构建的滚动视图💪
    • Flutter - 瀑布流交替播放视频 🎞
    • Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖
    • Flutter - 滚动视图中的表单防遮挡 🗒
    • Flutter - 秒杀1/2曝光统计 📊
    • 一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐
    • Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓
    • Flutter - 混编项目集成Shorebird热更新🐦(安卓篇)
    • Flutter - 混编项目集成Shorebird热更新🐦(iOS篇)
    • Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞
    • Flutter - 升级3.19之后页面多次rebuild?🤨
    • Flutter - 热更新 Shorebird 1.0 正式版来了 🐦
    • Flutter - 使用Pigeon实现视频缓存插件 🐌
    • Flutter - 轻松搞定屏幕旋转功能 😎
    • Flutter - 解决Connection closed before full header was received
    • Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻
    • Flutter - 支持观察NestedScrollView,兼容性更强 😈
    • Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻
    • Flutter - 升级到3.24后页面还会多次rebuild吗?🧐
    • Flutter - 轻松实现PageView卡片偏移效果
    • Flutter - 轻松搞定炫酷视差(Parallax)效果
    • Flutter - 危!3.24版本苹果审核被拒!
    • Flutter - 子部件任意位置观察滚动数据
    • Flutter - iOS编译加速
    • Flutter - Xcode16 还原编译速度
    • Flutter - GetX Helper 助你规范应用 tag
    • Flutter - GetX Helper 如何应用于旧页面
    • Flutter - 聊天面板库动画生硬?这次让你丝滑个够
    • Flutter - 使用本地 DevTools 验证 SVG 加载优化
    • Flutter - 详情页 TabBar 与模块联动?秒了!
    • Flutter - 详情页初始锚点与优化
    • Flutter - Melos Pub workspaces 实践
    • Flutter webview 崩溃率上升怎么办?我的分析与解决方案
    • Flutter 多仓库本地 Monorepo 方案与体验优化
    • Flutter 拖拉对比组件,换装图片前后对比必备
    • Flutter 3.44 插件内置 Kotlin (KGP) 双向兼容适配指南
    • Flutter 无障碍开发实战:玩转 Semantics 解决视障用户使用痛点
    • 玩转 WebSocket:从原理到 Flutter 实战
    • 别在 Flutter 的 main() 里乱锁屏幕方向,小心 iPad 分屏功能被你搞没了
    • Flutter 3.44 性能飞跃:深度解析 Android Platform View 的 HCPP 新特性
    • 给 Flutter 插件加上 Swift Package Manager 支持
    • 彻底搞懂 Dart Stream:从底层原理到 Flutter 实战与面试题集
    • 别被“Flutter 传感器延迟 150ms”带偏了:这可能只是你的实现方式错了
    • StatefulWidget 里的隐形炸弹:为什么不要在 State 类中使用 context.mounted
    • 深入理解 Flutter 架构:从 Widget 到 GPU 像素的全链路解析
    • 深度拆解 Dart 事件循环:从面试题看清 Microtask 与 Event Queue 的执行顺序
    • Flutter FocusNode 实战指南:玩转键盘焦点与用户输入体验
    • iOS 27 强制要求 UISceneDelegate:UIKit 和 Flutter 开发者该如何应对?
    • Flutter 实战:为你的 App 增加桌面快捷方式 (Quick Actions)
      • 一、痛点
      • 二、实战
        • 1、引入依赖
        • 2、初始化与路由跳转
        • 3、配置快捷入口
        • 4、适配原生图标
      • 三、进阶:动态快捷方式
      • 四、最后
    • 玩转 Flutter 项目依赖:从 pubspec.yaml 到实战包管理
  • 移动端
  • Flutter开发
GitLqr
2026-08-07
目录

Flutter 实战:为你的 App 增加桌面快捷方式 (Quick Actions)

欢迎关注微信公众号:[FSA全栈行动 👋]

# 一、痛点

最近在折腾一个 Flutter 项目时,我发现一个很有意思的现象:用户其实很少在 Home Screen(主页)停留。

大部分用户打开我的 App,目的性极强。他们不是为了看首页的资讯,而是想直接查看个人资料、检查订单状态,或者联系客服。但目前的流程是:打开 App -> 等待 Splash Screen -> 进入主页 -> 在菜单里找功能 -> 进入目标页面。

这中间的跳转步骤实在太多了。

我想到 微信、高德地图 或者 支付宝,这些主流 App 都有个很爽的功能:长按桌面图标,直接弹出几个快捷方式(Shortcuts),点一下就能直达特定功能。这虽然是个很小的细节,但对于高频使用的功能来说,能让 App 的质感瞬间提升一个档次。

我当时就在想,能不能给我的 Flutter 项目也加上这种“瞬移”功能?

# 二、实战

经过研究,我决定使用 quick_actions 这个 Package。它的逻辑其实很简单,就是把原生系统的 Quick Actions 能力包装给了 Flutter。

# 1、引入依赖

首先,在 pubspec.yaml 里把依赖加上:

dependencies:
  quick_actions: ^1.1.0

然后跑一下命令:

flutter pub get

# 2、初始化与路由跳转

要在 App 启动时捕获用户的长按行为,我们需要在初始化时设置一个回调函数。

这里有个细节:因为用户长按图标启动时,App 的 Navigator 可能还没完全准备好,所以建议使用一个全局的 navigatorKey 来进行跳转,这样最稳妥。

// 假设你已经配置好了全局的 navigatorKey
final QuickActions quickActions = const QuickActions();

quickActions.initialize((shortcutType) {
  // 当用户点击快捷方式进入时,会回调这个方法,并返回定义的 type
  switch (shortcutType) {
    case 'dashboard':
      navigatorKey.currentState?.pushNamed('/dashboard');
      break;
    case 'profile':
      navigatorKey.currentState?.pushNamed('/profile');
      break;
    case 'support':
      navigatorKey.currentState?.pushNamed('/support');
      break;
  }
});

# 3、配置快捷入口

接下来,我们需要定义到底要在桌面上显示哪几个快捷项。

await quickActions.setShortcutItems(<ShortcutItem>[
  const ShortcutItem(
    type: 'dashboard',
    localizedTitle: '控制面板',
    icon: 'ic_dashboard', // 注意:这里的 icon 名字要和原生资源文件对应
  ),
  const ShortcutItem(
    type: 'profile',
    localizedTitle: '个人资料',
    icon: 'ic_profile',
  ),
  const ShortcutItem(
    type: 'support',
    localizedTitle: '联系客服',
    icon: 'ic_support',
  ),
]);

# 4、适配原生图标

这是最容易踩坑的地方。Quick Actions 的图标不是直接放 assets 文件夹里的,你需要把图标放入原生平台的资源目录中。

平台 资源存放路径 注意事项
Android android/app/src/main/res/drawable/ 名字必须与 ShortcutItem 中的 icon 字段完全一致
iOS Runner/Assets.xcassets 放在 Asset Catalog 中,直接引用名称即可

例如在 Android 端,你需要把 ic_dashboard.png 等文件放到 drawable 目录下。

# 三、进阶:动态快捷方式

我发现 quick_actions 有个非常爽的功能:快捷方式不是死板的,它们是可以根据 App 的状态动态调整的。

比如我的 App 有登录状态:

  • 未登录状态下:快捷方式显示 “登录”、“注册”。

  • 已登录状态下:快捷方式变成 “我的订单”、“我的收藏”、“个人中心”。

这种做法能确保用户长按图标时,看到的永远是最相关的功能。

# 四、最后

虽然增加 Quick Actions 不属于那种大动干戈的功能开发,但它对 用户体验 的提升是非常直观的。对于那些有高频入口需求的 App(比如金融、外卖、社交类),这几乎是标配。

这里提醒大家注意几个点:

  • Android 需要 7.1 (API 25) 及以上版本才支持。

  • 标题 localizedTitle 尽量短一点,不然在长按菜单里显示不全。

  • 记得在 Android 发布构建时,确保 drawable 里的图标没有被 resource shrinking 混淆掉。

这种小功能的实现成本极低,但做完之后,你会发现 App 确实更像一个“原生”应用了。

#Shortcuts#Quick Actions
上次更新: 2026/08/09, 04:29:06
iOS 27 强制要求 UISceneDelegate:UIKit 和 Flutter 开发者该如何应对?
玩转 Flutter 项目依赖:从 pubspec.yaml 到实战包管理

← iOS 27 强制要求 UISceneDelegate:UIKit 和 Flutter 开发者该如何应对? 玩转 Flutter 项目依赖:从 pubspec.yaml 到实战包管理→

最近更新
01
玩转 Flutter 项目依赖:从 pubspec.yaml 到实战包管理
08-08
02
iOS 27 强制要求 UISceneDelegate:UIKit 和 Flutter 开发者该如何应对?
08-06
03
Flutter FocusNode 实战指南:玩转键盘焦点与用户输入体验
08-03
更多文章>
Theme by Vdoing | Copyright © 2020-2026 FSA全栈行动
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×