Flutter键盘鼠标指示器插件keyboard_mouse_indicator的使用

键盘鼠标指示器

Keyboard Mouse Indicator 是一个漂亮的部件，用于显示鼠标和键盘事件。

特性

• 全局监听器，不依赖焦点即可监听鼠标和键盘事件。
• 显示事件的历史记录。
• 可自定义显示的历史记录项目数量。
• 显示当前按下的键（最小化键盘指示器）。
• 完全可定制的鼠标指示器。
• 可定制的键盘历史记录项目。
• 显示每个单独和组合事件的数量。

开始使用

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  keyboard_mouse_indicator: <latest_version>

使用方法

使用 KeyboardMouseIndicator 小部件来显示指示器。

KeyboardMouseIndicator(
  controller: controller,
  alignment: Alignment.bottomLeft,
  showAsHistory: true,
);

这将显示最多 5 个键盘和鼠标事件的历史记录。

自定义

显示更多历史记录

默认情况下，该部件只显示 5 个事件作为历史记录。可以通过设置 maxLength 属性来更改此值。

KeyboardMouseIndicator(
  alignment: Alignment.bottomLeft,
  showAsHistory: true,
  maxLength: 10, // 显示最近的 10 个事件
);

显示当前按下的键

默认情况下，该部件显示事件的历史记录。可以通过将 showAsHistory 属性设置为 false 来更改此行为。 它将显示当前按下的键。

KeyboardMouseIndicator(
  alignment: Alignment.bottomLeft,
  showAsHistory: false,
);

手动清除历史记录/按键

可以通过调用 KeyboardMouseController 的 clear 方法来手动清除历史记录/按键。

1. 将 KeyboardMouseController 传递给 KeyboardMouseIndicator 小部件。

final controller = KeyboardMouseController();

KeyboardMouseIndicator(
  controller: controller,
  alignment: Alignment.bottomLeft,
  showAsHistory: true,
);

1. 调用 KeyboardMouseController 的 clear 方法来清除历史记录/按键。

controller.clear();

自定义鼠标指示器部件

可以通过传递 mouseIndicator 属性到 KeyboardMouseIndicator 小部件来定制鼠标指示器部件。

KeyboardMouseIndicator(
  controller: controller,
  alignment: Alignment.bottomLeft,
  showAsHistory: true,
  mouseIndicator: MouseIndicator(
    height: 72,
  ),
);

样式化鼠标指示器部件

可以通过传递 style 属性到 MouseIndicator 小部件来样式化鼠标指示器部件。MouseIndicatorStyle 有两种类型：MouseIndicatorStyle.filled 和 MouseIndicatorStyle.outlined。默认情况下，它是 MouseIndicatorStyle.outlined。

KeyboardMouseIndicator(
  controller: controller,
  alignment: Alignment.bottomLeft,
  showAsHistory: true,
  mouseIndicator: MouseIndicator(
    height: 72,
    style: MouseIndicatorStyle.outlined(
      borderColor: Colors.white,
      indicatorColor: Colors.white,
      backgroundColor: Colors.transparent,
      borderWidth: 4,
      showScrollButton: true,
      scrollButtonWidth: 48,
      buttonsHeightFactor: 0.5,
      borderRadius: BorderRadius.circular(8),
    ),
  ),
);

有关更多详细信息，请参阅 MouseIndicatorStyle 的文档。

同样，你可以使用 MouseIndicatorStyle.filled 来样式化鼠标指示器部件。

KeyboardMouseIndicator(
  controller: controller,
  alignment: Alignment.bottomLeft,
  showAsHistory: true,
  mouseIndicator: MouseIndicator(
    height: 72,
    style: MouseIndicatorStyle.filled(
      indicatorColor: Colors.white,
      backgroundColor: Colors.transparent,
      showScrollButton: true,
      scrollButtonWidth: 48,
      buttonsHeightFactor: 0.5,
      spacing: 12,
    ),
  ),
);

自定义历史记录项的 UI

可以通过传递 itemBuilder 属性到 KeyboardMouseIndicator 小部件来定制历史记录项的 UI。

KeyboardMouseIndicator(
  controller: controller,
  alignment: Alignment.bottomLeft,
  showAsHistory: true,
  itemBuilder: (int index, KeyIndicatorEvent item) {
    // 返回您的自定义小部件
  },
);

KeyIndicatorEvent 描述了事件。它有以下属性：

自定义键标签

可以通过传递 keyLabelBuilder 属性到 KeyboardMouseIndicator 小部件来定制键标签。

KeyboardMouseIndicator(
  controller: controller,
  alignment: Alignment.bottomLeft,
  showAsHistory: true,
  keyLabelBuilder: (LogicalKeyboardKey key) => key.debugName,
);

贡献

欢迎您为这个项目做出贡献！

在贡献和提出更改之前，请查看 贡献指南。

支持

如果您喜欢这个包，请通过打星来表达您的喜爱。

或者您可以

许可证

Copyright © 2023 Birju Vachhani

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

示例代码

以下是完整的示例代码：

import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:flutter/material.dart';
import 'package:keyboard_mouse_indicator/keyboard_mouse_indicator.dart';

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.blue,
      ),
      dark: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.blue,
      ),
      initial: AdaptiveThemeMode.dark,
      builder: (theme, darkTheme) => MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: theme,
        darkTheme: darkTheme,
        home: const MyHomePage(),
      ),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  late final KeyboardIndicatorController controller = KeyboardIndicatorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Focus(
        autofocus: true,
        onKey: (node, event) {
          return KeyEventResult.handled;
        },
        child: Stack(
          children: [
            Positioned(
              left: 32,
              bottom: 32,
              child: KeyboardMouseIndicator(
                controller: controller,
                alignment: Alignment.bottomLeft,
                maxLength: 10,
                mouseIndicator: const MouseIndicator(height: 72),
              ),
            ),
            Positioned(
              top: 16,
              right: 16,
              child: FilledButton(
                onPressed: () => controller.clear(),
                child: const Text('Clear'),
              ),
            ),
          ],
        ),
      ), // 这个尾随逗号使自动格式化更美观
    );
  }
}