时间戳

首页 > 解决方案 > 使用 RawKeyboardListener 在 Flutter Web 中获取没有文本字段焦点的按键值

flutter - 使用 RawKeyboardListener 在 Flutter Web 中获取没有文本字段焦点的按键值

问题描述

我正在为flutter web编写一个“蛇”视频游戏。我想使用箭头键四处移动，但我无法使用 RawKeyboardListener 捕获按键。我相信这是因为我没有正确的焦点节点。在这一点上，我只是想打印出我收到的击键。

这是我的测试代码：

Scaffold(
      appBar: AppBar(),
      body: RawKeyboardListener(
        focusNode: FocusNode(),      //<-- I'm not sure what to put here... and it's required.
        onKey: (RawKeyEvent event) {
          print(event.data.logicalKey.keyId);
        },
        child: GridView.builder(
          itemCount: 300,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 30),
          itemBuilder: (BuildContext context, int index) {
            return Container(
                padding: EdgeInsets.all(5.0),
                color: Colors.grey,
                child: getPixels(index));
          },
        ),
      ),
    );

标签： flutterkeyboard

解决方案

我有一个解决方案......但我仍然不完全理解它。我终于开始从 RawKeyboardListener 的 Textfield 示例中尽可能多地投入，我遇到了这个答案：Flutter RawKeyboardListener 听了两次？以及本期的示例：https ://github.com/flutter/flutter/issues/50854

使用共性作为模板，这是最终工作的代码，我希望它可以帮助其他人。（我很想了解到底发生了什么）：

import 'package:flutter/services.dart';  //<-- needed for the keypress comparisons

FocusNode focusNode = FocusNode();  // <-- still no idea what this is.

  @override
  Widget build(BuildContext context) {
    FocusScope.of(context).requestFocus(focusNode); // <-- yup.  magic. no idea.
    return Scaffold(
        appBar: AppBar(),
        body: RawKeyboardListener(
          autofocus: true,
          focusNode: focusNode,   // <-- more magic
          onKey: (RawKeyEvent event) {
            if (event.data.logicalKey == LogicalKeyboardKey.arrowDown) {
               direction = "down";
               }
            if (event.data.logicalKey == LogicalKeyboardKey.arrowLeft) {
               direction = "left";
               }
            if (event.data.logicalKey == LogicalKeyboardKey.arrowRight) {
               direction = "right";
               }
            if (event.data.logicalKey == LogicalKeyboardKey.arrowUp) {
               direction = "up";
               }
          },
          child: GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              itemCount: 300,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 30),
              itemBuilder: (BuildContext context, int index) {
                return Container(
                    padding: EdgeInsets.all(5.0),
                    color: Colors.grey,
                    child: getPixels(index));
              },
            ),
          ),
      );
  }

推荐阅读