flutter监听键盘输入做出反应

这篇具有很好参考价值的文章主要介绍了flutter监听键盘输入做出反应。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

/// Flutter code sample for [FocusNode].

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

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

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FocusNode Sample')),
        body: const FocusNodeExample(),
      ),
    );
  }
}

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

  
  State<ColorfulButton> createState() => _ColorfulButtonState();
}

class _ColorfulButtonState extends State<ColorfulButton> {
  late FocusNode _node;
  bool _focused = false;
  late FocusAttachment _nodeAttachment;
  Color _color = Colors.white;

  
  void initState() {
    super.initState();
    _node = FocusNode(debugLabel: 'Button');
    _node.addListener(_handleFocusChange);
    _nodeAttachment = _node.attach(context, onKey: _handleKeyPress);
  }

  void _handleFocusChange() {
    if (_node.hasFocus != _focused) {
      setState(() {
        _focused = _node.hasFocus;
      });
    }
  }

  KeyEventResult _handleKeyPress(FocusNode node, RawKeyEvent event) {
    if (event is RawKeyDownEvent) {
      debugPrint(
          'Focus node ${node.debugLabel} got key event: ${event.logicalKey}');
      if (event.logicalKey == LogicalKeyboardKey.keyR) {
        debugPrint('Changing color to red.');
        setState(() {
          _color = Colors.red;
        });
        return KeyEventResult.handled;
      } else if (event.logicalKey == LogicalKeyboardKey.keyG) {
        debugPrint('Changing color to green.');
        setState(() {
          _color = Colors.green;
        });
        return KeyEventResult.handled;
      } else if (event.logicalKey == LogicalKeyboardKey.keyB) {
        debugPrint('Changing color to blue.');
        setState(() {
          _color = Colors.blue;
        });
        return KeyEventResult.handled;
      }
    }
    return KeyEventResult.ignored;
  }

  
  void dispose() {
    _node.removeListener(_handleFocusChange);
    // The attachment will automatically be detached in dispose().
    _node.dispose();
    super.dispose();
  }
  void callKeyboard() {
    SystemChannels.textInput.invokeMethod<void>('TextInput.show');
  }

  
  Widget build(BuildContext context) {
    _nodeAttachment.reparent();
    return GestureDetector(
      onTap: () {
        if (_focused) {
          _node.unfocus();
        } else {
          _node.requestFocus();
        }
      },
      child: Column(
        children: [
          Container(
            width: 400,
            color: _focused ? _color : Colors.white,
            alignment: Alignment.center,
            child:
            Text(_focused ? "I'm in color! Press R,G,B!" : 'Press to focus'),
          ),
          Container(
              width: 160,
              color: Colors.orange,
              child: OutlinedButton(
                child: Text("Call Keyboard"),
                onPressed: callKeyboard,
              )
          ),
        ],
      ),
    );
  }
}

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

  
  Widget build(BuildContext context) {
    final TextTheme textTheme = Theme.of(context).textTheme;
    return DefaultTextStyle(
      style: textTheme.headlineMedium!,
      child: const ColorfulButton(),
    );
  }
}

文章来源地址https://www.toymoban.com/news/detail-695006.html

到了这里,关于flutter监听键盘输入做出反应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-RawKeyboardListener监听键盘事件及keycode。

    flutter开发实战-RawKeyboardListener监听键盘事件及keycode。 最近开发过程中遇到外设备的按钮点击触发相应的操作,需要监听对应的keycode来开启游戏或者相关操作。 这里用到了RawKeyboardListener RawKeyboardListener是一个Widget,可以用来监听键盘的原始输入事件。 RawKeyboardListener属性 on

    2024年02月14日
    浏览(39)
  • uniapp监听扫码枪键盘事件|无输入框式监听

    一般的扫码枪通过USB或蓝牙连接手机或电脑,充当的是一个外接设备。当扫码后,扫码枪会自动识别内容,然后向连接的电脑或手机发送键盘事件keydown或keyup。 input输入框式 如果页面上有input输入框就很简单,直接聚焦input,然后扫码,input框会自动填充内容,并自动产生回车

    2024年02月11日
    浏览(40)
  • 前端监听键盘事件

    需求就如题所示 在react中监听如下: keydown事件是键盘的相关事件,我们主动去监听一下,然后别忘了去销毁, 然后有个写法: 在useEffect中使用return返回了一个清除监听的函数,实践了一下return的执行时机,发现是在页面切走的时候,也就是说,当前的组件被销毁的时候执

    2024年02月12日
    浏览(35)
  • Flutter 点击输入框后 键盘闪出后立刻消失

    flutter 在布局最顶端使用的是Scaffold组件,在点击输入框键盘弹出后,布局的默认反应是改变屏幕大小重新布局。 这时通常会在Scaffold中添加选项: resizeToAvoidBottomPadding:false 添加之后,应用整体布局不会随着键盘弹出而刷新改变。 但是键盘的弹出仍然会改变 MediaQuery.of(contex

    2024年02月09日
    浏览(39)
  • 如何解决在Flutter中使用TextField输入框输入中文时可能会出现键盘输入不了中文的问题。

    在Flutter中使用TextField输入框输入中文时可能会出现键盘输入不了中文的问题。 解决方法有以下几种: 在TextField中指定输入类型为TextInputType.text TextField(   keyboardType: TextInputType.text,   ... ) 2.在TextField中指定输入工具为中文输入法: TextField(   inputFormatters: [WhitelistingTextInputFor

    2023年04月22日
    浏览(40)
  • 前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input

    前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(51)
  • 【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系?

    【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系? 👏🏻 正在学 Flutter 的同学,你好! 😊 本专栏是解决 Flutter 面试过程中可能出现的问题,而进行汇总整理的。一个问题一篇文章,尽可能详细解答,满足面试需求。 🔍 想解决开发中的零散问题?碎片化教程 👉 Flutte

    2024年02月22日
    浏览(46)
  • Vue H5 前端自定义车牌号输入键盘(支持新能源)

    这个项目是基于 vue2+vant  写的录入车牌的键盘, 有需要的伙伴可以参考一下; 先看一下效果图:   这个是组件的代码,直接在页面中引用即可,车牌号的值存在carNumber里面,在确定按钮中,讲完整的carNumber传到引用的页面中即可. 在页面中引用(这边只贴了引用部分的代码,其他的根据

    2024年02月02日
    浏览(70)
  • 【Flutter】Flutter Dart 获取当前时间戳

    在日常的软件开发中,我们经常需要获取当前的时间戳。无论是用于日志记录,还是用于生成唯一标识符,或者是用于时间同步,时间戳都发挥着重要的作用。 本文将详细介绍如何在 Flutter 和 Dart 中获取当前时间戳。 通过阅读本文,你将掌握以下知识: 了解时间戳的重要性

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包