Flutter键盘快捷键管理插件keyboard_shortcuts的使用

简介

keyboard_shortcuts 是一个用于在 Flutter 应用中管理键盘快捷键的插件。通过该插件，您可以轻松为应用添加全局或局部的键盘快捷键，从而提升用户体验。

示例

基本用法

1. 定义一个局部快捷键

在以下示例中，当按下 Control Left + P 键时，用户将被导航到 SecondPage() 页面，并且会在帮助菜单中显示 “Go to Second Page” 的标签。

KeyBoardShortcuts(
  keysToPress: {LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyP}, // 快捷键组合
  onKeysPressed: () => Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondPage()),
  ), // 快捷键触发的回调
  helpLabel: "Go to Second Page", // 帮助菜单中显示的标签
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('You have pushed the button this many times:'), // 示例文本
        Text('$_counter', style: Theme.of(context).textTheme.headline4),
      ],
    ),
  ),
)

运行效果：

全局快捷键

2. 启用全局快捷键

如果设置 globalShortcuts: true，可以启用全局快捷键功能，例如按下 Home 键返回首页，按下方向键上下移动页面，按下 Esc 返回上一页。

KeyBoardShortcuts(
  globalShortcuts: true,
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('You have pushed the button this many times:'),
        Text('$_counter', style: Theme.of(context).textTheme.headline4),
      ],
    ),
  ),
)

自定义快捷键

3. 初始化自定义快捷键

通过 initShortCuts() 方法，您可以自定义快捷键的行为，包括设置主页、帮助菜单标题、图标等。

initShortCuts(
  HomePage(), // 主页
  helpTitle: "Help Menu", // 帮助菜单标题
  helpIcon: Icons.menu, // 帮助菜单图标
);

4. 创建全局快捷键

使用 initShortCuts() 方法创建全局快捷键，这些快捷键将在所有启用了 globalShortcuts 的页面中生效。

initShortCuts(
  HomePage(),
  keysToPress: {LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyP}, // 快捷键组合
  onKeysPressed: () => print("Work"), // 快捷键触发的回调
  helpLabel: "Print Work", // 帮助菜单中显示的标签
);

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 keyboard_shortcuts 插件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        leading: IconButton(
          icon: Icon(Icons.list),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SecondPage()),
          ),
        ),
      ),
      body: KeyBoardShortcuts(
        keysToPress: {LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.keyP}, // 局部快捷键
        onKeysPressed: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => SecondPage()),
        ),
        helpLabel: "Go to Second Page", // 帮助菜单标签
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Text('$_counter', style: Theme.of(context).textTheme.headline4),
            ],
          ),
        ),
      ),
      floatingActionButton: KeyBoardShortcuts(
        keysToPress: shortCut(BasicShortCuts.creation), // 浮动按钮快捷键
        onKeysPressed: _incrementCounter,
        helpLabel: "Increment", // 帮助菜单标签
        child: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    List<String> generatedList = List<String>.generate(100, (counter) => "Item $counter");

    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: KeyBoardShortcuts(
        globalShortcuts: true, // 启用全局快捷键
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: ListView.builder(
                  itemCount: generatedList.length,
                  itemBuilder: (BuildContext ctxt, int index) => Center(
                    child: Text(generatedList[index]),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}