Flutter Keyboard Listener 在每次刷新时构建复合

Question

Flutter 新手。我有一个键盘侦听器包裹着我的 Scaffold 主体以检测 Enter 和退格键。

但是我注意到：每次刷新页面时，都会有额外的侦听器导致事件双重触发。即在侦听器中触发的增量函数将加倍

第一次打开：每 1 'enter' 按键：1 计数
刷新：每 1 'enter' 按键：2 计数
再次刷新：每 1 'enter' 按键：4 计数
再次刷新：每 1 'enter' 按键：8 计数

我必须关闭浏览器并重新打开页面到return到初始状态。

这里发生了什么？有解决此问题的最佳方法吗？

我的代码（选择相关段）：

class MyHomePageState extends State<MyHomePage> {
  static int counter = 0;

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

  void _decrementCounter() {
    setState(() {
      if (counter > 0) {
        counter--;
     }
    });
  }

。 . .

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomSheet: Container(
        padding: EdgeInsets.all(5.0),
        child: Text(
          'Some text',
          style: const TextStyle(
            fontSize: 12.0,
          ),
      textAlign: TextAlign.center,
    ),
  ),
  body: RawKeyboardListener(
    focusNode: FocusNode(),
    onKey: (RawKeyEvent event) {
      if (event.isKeyPressed(LogicalKeyboardKey.enter) ||
          event.isKeyPressed(LogicalKeyboardKey.numpadEnter)) {
        _incrementCounter();
      }

      if (event.isKeyPressed(LogicalKeyboardKey.backspace)) {
        _decrementCounter();
      }
    },
    autofocus: true,
    child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          decoration: const BoxDecoration(.......

提前致谢！

Answer 1

这不是最漂亮的解决方案，但我设法通过分离其中一个按钮并处理监听器来解决这个问题

_buildDefectButton() {
    // ElevatedButton _button =
    FocusScope.of(context).requestFocus(_focusNode);
    return RawKeyboardListener(
      focusNode: _focusNode,
      autofocus: true,
      onKey: (RawKeyEvent event) => {
        if (event is RawKeyDownEvent)
          {
            _handleKeyPressed(_focusNode, event),
          }
      },
      child: ElevatedButton.icon(
        style: ButtonStyle(
          padding:
              MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(20)),
        ),
        label: const Text(
          'Button pressed!',
          style: TextStyle(
            fontSize: 20.0,
          ),
        ),
        onPressed: _incrementCounter,
        icon: const Icon(Icons.sentiment_very_dissatisfied),
      ),
    );
  }


//Handle when keyPressed
  _handleKeyPressed(FocusNode _focusNode, RawKeyEvent event) {
    if (event is RawKeyDownEvent) {
      if (event.isKeyPressed(LogicalKeyboardKey.enter) ||
          event.isKeyPressed(LogicalKeyboardKey.numpadEnter)) {
        _incrementCounter();
        // return KeyEventResult.handled;
      }

      if (event.isKeyPressed(LogicalKeyboardKey.backspace)) {
        _decrementCounter();
        // return KeyEventResult.handled;
      }
    }
    // return KeyEventResult.ignored;
  }

并添加

final FocusNode _focusNode = FocusNode();

@override
  void initState() {
    super.initState();
}

和

@override
  void dispose() {
    // The attachment will automatically be detached in dispose().
    _focusNode.dispose();
    super.dispose();
  }

我确实遇到了一些令人困惑的情况，如果我 return KeyEventResult.handled 每当按下键盘按钮时都会导致重复计数，但只是处理键盘按下而不返回结果并在最后处理 keynode 解决我的问题听众会在每次刷新时复合的问题。希望这对以后可能面临类似困惑的任何人有所帮助。

Flutter Keyboard Listener 在每次刷新时构建复合

Flutter Keyboard Listener builds compounded on each refresh

flutter

keylistener