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

1. Shortcuts 組件的簡單使用

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

快捷鍵體系中，Shortcuts 組件維護(hù)快捷鍵(ShortcutActivator)和意圖(Intent) 數(shù)據(jù)的映射，也就是說一個(gè) Shortcuts 組件內(nèi)部可以定義若干個(gè)快捷鍵。比如下面定義 Ctrl + Q 的快捷鍵，其對應(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 來自定義需要的意圖，作為事件響應(yīng)的標(biāo)識。通過 Actions 組件根據(jù)意圖來響應(yīng)快捷鍵，其中通過 actions 參數(shù)維護(hù)類型和 Action 回調(diào)事件，觸發(fā)狀態(tài)類中 _incrementCounter 方法即可。

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

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

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

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

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

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

final FocusNode _inputNode = FocusNode();

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

如下所示，提供 buildShortcutsSend 方法，使用 Ctrl + enter 觸發(fā) SendMessageIntent 意圖?？旖萱I觸發(fā)時(shí)，回調(diào) _sendMessage 方法，其中取消焦點(diǎn)，清空文字。焦點(diǎn)取消之后，就無法響應(yīng)快捷鍵了，當(dāng)點(diǎn)擊輸入框時(shí)，焦點(diǎn)會再次激活，可以響應(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();
}

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

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

最新評論