在桌面端的開(kāi)發(fā)中，鍵盤(pán)快捷鍵是非常常見(jiàn)而必要的，比如 Ctrl + F 搜索， Ctrl + C 復(fù)制等。Flutter 既然可以開(kāi)發(fā)桌面端應(yīng)用，那必然要提供自定義快捷鍵，觸發(fā)事件的功能支持。這就是本節(jié)要介紹的 Shortcuts 組件體系，相關(guān)代碼后續(xù)會(huì)放入 FlutterUnit 中，敬請(qǐng)關(guān)注 ~

1. Shortcuts 組件的簡(jiǎn)單使用

首先，來(lái)個(gè)簡(jiǎn)單的功能體驗(yàn)一下。還是那初始的計(jì)數(shù)器項(xiàng)目來(lái)開(kāi)刀，之前是點(diǎn)擊按鈕數(shù)字增加，現(xiàn)在試一下通過(guò)快捷鍵觸發(fā)更新的邏輯：

快捷鍵體系中，Shortcuts 組件維護(hù)快捷鍵(ShortcutActivator)和意圖(Intent) 數(shù)據(jù)的映射，也就是說(shuō)一個(gè) Shortcuts 組件內(nèi)部可以定義若干個(gè)快捷鍵。比如下面定義 Ctrl + Q 的快捷鍵，其對(duì)應(yīng)的意圖是 IncrementIntent。

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 來(lái)自定義需要的意圖，作為事件響應(yīng)的標(biāo)識(shí)。通過(guò) Actions 組件根據(jù)意圖來(lái)響應(yīng)快捷鍵，其中通過(guò) actions 參數(shù)維護(hù)類(lèi)型和 Action 回調(diào)事件，觸發(fā)狀態(tài)類(lèi)中 _incrementCounter 方法即可。

另外，快捷鍵體系需要焦點(diǎn)的支持，所以需要 Focus 組件，只有焦點(diǎn)在激活狀態(tài)，快捷鍵才可以響應(yīng)，通過(guò)焦點(diǎn)可以控制快捷鍵是否響應(yīng)。想要默認(rèn)情況下響應(yīng)，可以將 autofocus 置為 true 。

---->[狀態(tài)類(lèi)中]----
void _incrementCounter(IncrementIntent intent) {
  setState(() {
    _counter++;
  });
}
class IncrementIntent extends Intent { 
    const IncrementIntent(); 
 }

在事件響應(yīng)時(shí)，可以獲取意圖對(duì)象。所以可以在意圖派生類(lèi)中提供成員數(shù)據(jù)，以便在事件響應(yīng)時(shí)進(jìn)行訪(fǎng)問(wèn)。比如這里 IncrementIntent 可以有一個(gè)增加值的成員，這樣在 _incrementCounter 可以獲取到意圖對(duì)象，處理每次自增多少的邏輯。

最后，使用 buildShortcuts 方法包裹在想要響應(yīng)快捷鍵的組件上即可，當(dāng)然你可以直接套上去，或者封裝一個(gè)組件單獨(dú)維護(hù)快捷鍵的處理。這屬于代碼結(jié)構(gòu)的問(wèn)題，可以自己斟酌。

2. 快捷鍵與焦點(diǎn)的關(guān)聯(lián)

下面實(shí)現(xiàn)一些輸入框通過(guò) Ctrl + Enter 快捷鍵發(fā)送的功能，介紹一下快捷鍵和焦點(diǎn)的關(guān)聯(lián)。現(xiàn)在的目的是只有當(dāng)輸入框獲取焦點(diǎn)之后，才可以響應(yīng)快捷鍵。對(duì)于輸入框來(lái)說(shuō)，它內(nèi)部有 Focus 組件，并且可以提供 FocusNode 焦點(diǎn)對(duì)象來(lái)控制焦點(diǎn)：對(duì)于輸入框來(lái)說(shuō)，焦點(diǎn)激活就是可輸入狀態(tài)：

final FocusNode _inputNode = FocusNode();

TextField 組件可以設(shè)置 focusNode 參數(shù)設(shè)置焦點(diǎn)對(duì)象，

如下所示，提供 buildShortcutsSend 方法，使用 Ctrl + enter 觸發(fā) SendMessageIntent 意圖。快捷鍵觸發(fā)時(shí)，回調(diào) _sendMessage 方法，其中取消焦點(diǎn)，清空文字。焦點(diǎn)取消之后，就無(wú)法響應(yīng)快捷鍵了，當(dāng)點(diǎn)擊輸入框時(shí)，焦點(diǎn)會(huì)再次激活，可以響應(yīng)快捷鍵。

 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();
}

到這里，鍵盤(pán)快捷鍵的使用就介紹得差不多了，希望可以對(duì)你在桌面端的開(kāi)發(fā)有所幫助。關(guān)于 Focus 體系也是一個(gè)比較復(fù)雜的東西，以后有機(jī)會(huì)再詳細(xì)介紹。

以上就是Flutter開(kāi)發(fā)之Shortcuts快捷鍵組件的用法詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter Shortcuts的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論