前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 桌面开发 | 键盘快捷键功能 - Shortcuts 组件

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

作者头像
张风捷特烈
发布2023-05-23 10:19:04
8250
发布2023-05-23 10:19:04
举报
theme: cyanosis

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

1. Shortcuts 组件的简单使用

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

image.png
image.png

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

代码语言:javascript
复制
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 。

代码语言:javascript
复制
---->[状态类中]----
void _incrementCounter(IncrementIntent intent) {
  setState(() {
    _counter++;
  });
}

class IncrementIntent extends Intent { 
    const IncrementIntent(); 
 }

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


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

image.png
image.png

2. 快捷键与焦点的关联

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

代码语言:javascript
复制
final FocusNode _inputNode = FocusNode();
image.png
image.png

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

image.png
image.png

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

代码语言:javascript
复制
 Widget buildShortcutsSend({required Widget child}) {
   return Shortcuts(
     shortcuts: <ShortcutActivator, Intent>{
       LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.enter): const SendMessageIntent(),
     },
     child: Actions(
       actions: <Type, Action<Intent>>{
         SendMessageIntent: CallbackAction<SendMessageIntent>(onInvoke: _sendMessage),
       },
       child: child,
     ),
   );
 }
 
void _sendMessage(SendMessageIntent intent) {
  print("====_sendMessage:${ctrl.text}===================");
  _inputNode.unfocus();
  ctrl.clear();
}
 
 class SendMessageIntent extends Intent {
  const SendMessageIntent();
}

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-05-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. Shortcuts 组件的简单使用
  • 2. 快捷键与焦点的关联
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档