Flutter快捷操作插件cus

Flutter快捷操作插件cus_shortcut的使用

Demo

使用方法

导入 package:cus_shortcut/cus_shortcut.dart
创建一个 ModelShortcut 的列表
使用 CusShortcutWidget 小部件
创建一个处理事件的方法
设置子小部件

示例代码

import 'package:flutter/material.dart';
import 'package:cus_shortcut/cus_shortcut.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
        home: Sample()
    );
  }
}

class Sample extends StatefulWidget {
  const Sample({super.key});

  [@override](/user/override)
  State<Sample> createState() => _SampleState();
}

class _SampleState extends State<Sample> {

  // 创建自定义列表
  List<ModelShortcut> listShortcut = [
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.f2), shortcutEventTypeEnum: ShortcutEventTypeEnum.f2),
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.f6), shortcutEventTypeEnum: ShortcutEventTypeEnum.altF6),
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.f5), shortcutEventTypeEnum: ShortcutEventTypeEnum.altF5),
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.arrowDown), shortcutEventTypeEnum: ShortcutEventTypeEnum.arrowDown),
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.arrowUp), shortcutEventTypeEnum: ShortcutEventTypeEnum.arrowUp),
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.arrowLeft), shortcutEventTypeEnum: ShortcutEventTypeEnum.arrowLeft),
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.arrowRight), shortcutEventTypeEnum: ShortcutEventTypeEnum.arrowRight),
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.enter), shortcutEventTypeEnum: ShortcutEventTypeEnum.enter),
    ModelShortcut(logicalKeySet: LogicalKeySet(LogicalKeyboardKey.delete), shortcutEventTypeEnum: ShortcutEventTypeEnum.delete),
  ];

  String? shortcutEventTypeEnumName;

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用小部件
    return CusShortcutWidget(
      listShortcut: listShortcut,
      event: (index, shortcutEventTypeEnum) => event(shortcutEventTypeEnum),
      child: Scaffold(
        backgroundColor: getBackgroundColor(shortcutEventTypeEnumName),
        appBar: AppBar(
          title: const Text('快捷操作小部件'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                Wrap(
                  runAlignment: WrapAlignment.spaceEvenly,
                  children: [
                    for (var e in listShortcut)
                      InkWell(
                        onTap: () => event(e.shortcutEventTypeEnum),
                        child: Card(
                          child: SizedBox(
                            width: 100, height: 60,
                            child: Center(child: Text(e.shortcutEventTypeEnum?.name ?? '')),
                          ),
                        ),
                      )
                  ],
                ),
                if (shortcutEventTypeEnumName != null)
                  Container(
                    padding: const EdgeInsets.all(15),
                    color: Theme.of(context).primaryColor,
                    child: Center(child: Text(shortcutEventTypeEnumName!)),
                  )
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 方法用于处理事件
  void event(ShortcutEventTypeEnum? shortcutEventTypeEnum) {
    setState(() {
      shortcutEventTypeEnumName = shortcutEventTypeEnum?.name;
    });
  }

  /// Scaffold 背景颜色
  Color getBackgroundColor(String? value) {
    return value == listShortcut[0].shortcutEventTypeEnum!.name.toString() ?
      Colors.blue :
    value == listShortcut[1].shortcutEventTypeEnum!.name.toString() ?
      Colors.yellow :
    value == listShortcut[2].shortcutEventTypeEnum!.name.toString() ?
      Colors.orange :
    value == listShortcut[3].shortcutEventTypeEnum!.name.toString() ?
      Colors.green :
    value == listShortcut[4].shortcutEventTypeEnum!.name.toString() ?
      Colors.redAccent :
    value == listShortcut[5].shortcutEventTypeEnum!.name.toString() ?
      Colors.pink :
    value == listShortcut[6].shortcutEventTypeEnum!.name.toString() ?
      Colors.purple :
    value == listShortcut[7].shortcutEventTypeEnum!.name.toString() ?
      Colors.lightGreen :
    value == listShortcut[8].shortcutEventTypeEnum!.name.toString() ?
      Colors.deepPurple :
    Colors.transparent;
  }
}

更多关于Flutter快捷操作插件cus_shortcut的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼

更多关于Flutter快捷操作插件cus_shortcut的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

cus_shortcut 是一个自定义的 Flutter 插件，用于简化快捷键操作。它允许你为特定的操作分配快捷键，并在用户按下这些快捷键时触发相应的回调函数。以下是如何使用 cus_shortcut 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 cus_shortcut 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  cus_shortcut: ^1.0.0  # 请根据实际情况替换为最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 cus_shortcut 包：

import 'package:cus_shortcut/cus_shortcut.dart';

3. 使用 `CusShortcut` 组件

CusShortcut 是一个 Widget，你可以将它包裹在你希望监听快捷键的 Widget 外面。你可以通过 shortcuts 参数来定义快捷键和对应的回调函数。

CusShortcut(
  shortcuts: {
    LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyS): () {
      // 当按下 Ctrl + S 时执行的操作
      print('保存操作');
    },
    LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.keyF): () {
      // 当按下 Alt + F 时执行的操作
      print('查找操作');
    },
  },
  child: Scaffold(
    appBar: AppBar(
      title: Text('快捷键示例'),
    ),
    body: Center(
      child: Text('按下 Ctrl+S 或 Alt+F 查看效果'),
    ),
  ),
);

4. 处理快捷键

在上面的例子中，我们定义了两个快捷键：

Ctrl + S：触发保存操作。
Alt + F：触发查找操作。

当用户按下这些快捷键时，相应的回调函数会被执行。

5. 自定义快捷键

你可以根据需要自定义快捷键组合。LogicalKeySet 用于定义一组按键组合，LogicalKeyboardKey 用于指定具体的按键。

例如，如果你想监听 Shift + Enter，可以这样写：

LogicalKeySet(LogicalKeyboardKey.shift, LogicalKeyboardKey.enter): () {
  print('Shift + Enter 被按下');
},

6. 处理平台差异

请注意，不同平台可能对快捷键的支持有所不同。例如，Ctrl 键在 Windows 和 Linux 上常用，而在 macOS 上常用的是 Command 键。你可以根据平台来调整快捷键组合：

LogicalKeySet(
  Platform.isMacOS ? LogicalKeyboardKey.meta : LogicalKeyboardKey.control,
  LogicalKeyboardKey.keyS,
): () {
  print('保存操作');
},

7. 嵌套使用

你可以在不同的 Widget 树层级中使用 CusShortcut，以便在不同的上下文中处理不同的快捷键。

8. 其他功能

cus_shortcut 可能还提供了其他高级功能，例如全局快捷键、快捷键冲突处理等。你可以查阅插件的文档或源码以获取更多信息。

示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CusShortcut(
      shortcuts: {
        LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyS): () {
          print('保存操作');
        },
        LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.keyF): () {
          print('查找操作');
        },
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('快捷键示例'),
        ),
        body: Center(
          child: Text('按下 Ctrl+S 或 Alt+F 查看效果'),
        ),
      ),
    );
  }
}

Flutter快捷操作插件cus_shortcut的使用