theme: cyanosis

在桌面端的开发中,键盘快捷键是非常常见而必要的,比如 Ctrl + F 搜索, Ctrl + C 复制等。Flutter 既然可以开发桌面端应用,那必然要提供自定义快捷键,触发事件的功能支持。这就是本节要介绍的 Shortcuts 组件体系,相关代码后续会放入 FlutterUnit 中,敬请关注 ~


1. Shortcuts 组件的简单使用

首先,来个简单的功能体验一下。还是那初始的计数器项目来开刀,之前是点击按钮数字增加,现在试一下通过快捷键触发更新的逻辑:

快捷键体系中,Shortcuts 组件维护快捷键(ShortcutActivator)和意图(Intent) 数据的映射,也就是说一个 Shortcuts 组件内部可以定义若干个快捷键。比如下面定义 Ctrl + Q 的快捷键,其对应的意图是 IncrementIntent

dart Widget buildShortcuts({required Widget child}) { return Shortcuts( shortcuts: <ShortcutActivator, Intent>{ LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyQ): const IncrementIntent(), }, child: Actions( actions: <Type, Action<Intent>>{ IncrementIntent: CallbackAction<IncrementIntent>(onInvoke: _incrementCounter), }, child: Focus( autofocus: true, child: child, ), ), ); }

我们需要派生 Intent 来自定义需要的意图,作为事件响应的标识。通过 Actions 组件根据意图来响应快捷键,其中通过 actions 参数维护类型和 Action 回调事件,触发状态类中 _incrementCounter 方法即可。

另外,快捷键体系需要焦点的支持,所以需要 Focus 组件,只有焦点在激活状态,快捷键才可以响应,通过焦点可以控制快捷键是否响应。想要默认情况下响应,可以将 autofocus 置为 true 。

``` ---->[状态类中]---- void _incrementCounter(IncrementIntent intent) { setState(() { _counter++; }); }

class IncrementIntent extends Intent { const IncrementIntent(); } ```

在事件响应时,可以获取意图对象。所以可以在意图派生类中提供成员数据,以便在事件响应时进行访问。比如这里 IncrementIntent 可以有一个增加值的成员,这样在 _incrementCounter 可以获取到意图对象,处理每次自增多少的逻辑。


最后,使用 buildShortcuts 方法包裹在想要响应快捷键的组件上即可,当然你可以直接套上去,或者封装一个组件单独维护快捷键的处理。这属于代码结构的问题,可以自己斟酌。


2. 快捷键与焦点的关联

下面实现一些输入框通过 Ctrl + Enter 快捷键发送的功能,介绍一下快捷键和焦点的关联。现在的目的是只有当输入框获取焦点之后,才可以响应快捷键。对于输入框来说,它内部有 Focus 组件,并且可以提供 FocusNode 焦点对象来控制焦点:对于输入框来说,焦点激活就是可输入状态:

final FocusNode _inputNode = FocusNode();

TextField 组件可以设置 focusNode 参数设置焦点对象,

如下所示,提供 buildShortcutsSend 方法,使用 Ctrl + enter 触发 SendMessageIntent 意图。快捷键触发时,回调 _sendMessage 方法,其中取消焦点,清空文字。焦点取消之后,就无法响应快捷键了,当点击输入框时,焦点会再次激活,可以响应快捷键。

``` Widget buildShortcutsSend({required Widget child}) { return Shortcuts( shortcuts: { LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.enter): const SendMessageIntent(), }, child: Actions( actions: >{ SendMessageIntent: CallbackAction (onInvoke: _sendMessage), }, child: child, ), ); }

void sendMessage(SendMessageIntent intent) { print("====sendMessage:${ctrl.text}==================="); _inputNode.unfocus(); ctrl.clear(); }

class SendMessageIntent extends Intent { const SendMessageIntent(); } ```

到这里,键盘快捷键的使用就介绍得差不多了,希望可以对你在桌面端的开发有所帮助。关于 Focus 体系也是一个比较复杂的东西,以后有机会再详细介绍。那本文就到这了,谢谢观看 ~

Flutter 桌面开发 | 键盘快捷键功能 - Shortcuts 组件相关推荐

  1. Flutter桌面开发 - windows插件开发

    通过此篇文章,你将了解到: Flutter插件的基本介绍: windows插件开发的真实踩坑经验. ⚠️本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究! 前言 ...

  2. Flutter桌面开发 — Windows App打包以及使用Inno Setup生成.exe文件安装包

    文章目录 1 打包 Flutter Windows App 1.1 开发环境准备 1.2 支持Windows 1.3 构建Windows App 2 使用Inno Setup生成.exe文件安装包 2 ...

  3. android 地图导航开发思路,基础功能-导航组件-开发指南-Android 导航SDK | 高德地图API...

    预置条件 请在您工程的 AndroidManifest.xml 中配置声明导航组件 Activity: android:name="com.amap.api.navi.AmapRouteAc ...

  4. Flutter+FCM开发推送功能

    我是直接站在巨人的肩上了 参考文档,将fcm集成到flutter项目中. 运行遇到错误:MissingPluginException(No implementation found for metho ...

  5. 取消任务栏快捷键翻转_Windows任务栏最有用的键盘快捷键

    取消任务栏快捷键翻转 There's no faster way to navigate your computer than with keyboard shortcuts, and Windows ...

  6. os 键盘快捷键截图_如何通过键盘快捷键更有效地使用OS X虚拟桌面

    os 键盘快捷键截图 () We like having multiple virtual desktops on OS X, especially when we can supercharge t ...

  7. ubuntu idea桌面快捷方式无法启动_每个 Ubuntu 用户都应该知道的键盘快捷键

    (给Linux爱好者加星标,提升Linux技能) 转自:ITPUB技术小栈 无论使用什么操作系统,键盘快捷键都可以帮助你快速上手,可以在启动应用程序或导航到所需窗口时节省时间和精力. 就像Window ...

  8. Google 要用 Flutter 一统移动、桌面开发江湖?

    "Flutter 的核心是一个独立的可执行二进制文件,所以它不仅能改变移动开发的世界,也能改变桌面开发的世界.你只需编写一次代码,就可以在 Android.iOS.Windows.Mac 和 ...

  9. linux关闭桌面快捷键设置,在XFCE4桌面上自定义键盘快捷键的方法

    本文介绍在Linux XFCE4桌面环境上自定义键盘快捷键的方法. 默认键盘快捷键 XFCE4没有像其他Linux桌面环境那样加载许多键盘快捷键,但它确实有很多,这些快捷方式隐藏在桌面设置的" ...

最新文章

  1. Kali Linux重新支持RTL8814au芯片
  2. 集成学习(ensemble learning)(三)
  3. Java单元测试(Junit+Mock+代码覆盖率)
  4. Centos下安装配置WordPress与nginx教程
  5. PyCharm-professional-2018.2.2 - 破解
  6. asp文件上传和下载
  7. 【WEB API项目实战干货系列】- API访问客户端(WebApiClient适用于MVC/WebForms/WinForm)(四)
  8. 使用TextRange获取输入框中光标的位置
  9. c#位图转换未矢量图_PS基础:像素与分辨率,位图与矢量图
  10. django中处理表单实例
  11. 34、linux shell,常用函数strace
  12. (工具)政企版WPS-没广告弹窗超简洁
  13. 用Eclipse创建第一个JSP项目
  14. kuangbin 数学训练一 Ekka Dokka
  15. SODB、RBSP和EBSP
  16. 这一篇彻底说清楚了!乐高,编程,机器人到底要不要学?
  17. sparc处理器开发工具_SPARC处理器启动代码的分析与编程
  18. c语言直接输出PDF,C语言格式化输出总结.pdf
  19. OpenCV 保存视频
  20. python代码示例大全 下载-python基础代码大全

热门文章

  1. c语言超市选址问题实验报告,邮局选址问题 (C语言代码)
  2. 计算机字符编码——ASCII码和常用编码
  3. 名字竞技场(两种版本(一))
  4. Android dumpsys input详解
  5. Xcode 图片裁剪
  6. 程序员需要“程序员鼓励师”吗,对程序员到底有没有效果?
  7. 【NOMA】Non-Orthogonal Multiple Access (NOMA) for Cellular Future Radio Access(NOMA 原理)
  8. 在CentOS上进行网络连通测试
  9. 电影数字服务器里播放文件字母意思,[转载]数字电影命名规则
  10. 代码质量静态检查工具