【问题标题】:How to listen to keyboard on screen Flutter?如何在屏幕 Flutter 上听键盘?
【发布时间】:2018-05-29 03:47:00
【问题描述】:

我正在构建一个移动应用程序,我想在键盘出现在屏幕上时删除一个小部件,即当输入文本字段处于焦点时。

我尝试使用RawKeyboardListener 但这似乎不起作用,我的代码如下:

     new Container(
         child: new RawKeyboardListener(focusNode: new FocusNode(),
         onKey: (input) => debugPrint("*****KEY PRESSED"),
         child: new TextField(
         controller: new TextEditingController(),
    )));

【问题讨论】:

标签: flutter


【解决方案1】:

当文本字段获得焦点时,键盘将自动出现。因此,您可以向 focusnode 添加一个侦听器以侦听焦点更改并隐藏相应的小部件。

例子:

    void _listener(){
        if(_myNode.hasFocus){
          // keyboard appeared 
        }else{
          // keyboard dismissed
        }
    }

    FocusNode _myNode = new FocusNode()..addListener(_listner);

    TextField _myTextField = new TextField(
            focusNode: _mynNode,
            ...
            ...
        );

    new Container(
        child: _myTextField
    );

【讨论】:

  • 不幸的是,当键盘被关闭时这不起作用似乎 TextField 没有失去焦点
【解决方案2】:

当用户按下或释放键盘上的键时调用回调的小部件。

RawKeyboardListener 对于监听原始键事件和表示为键的硬件按钮很有用。通常由游戏和其他将键盘用于文本输入以外目的的应用程序使用。

对于文本输入,请考虑使用与屏幕键盘和输入法编辑器 (IME) 集成的 EditableText。

 const RawKeyboardListener({
Key key,
@required FocusNode focusNode,
@required ValueChanged<RawKeyEvent> onKey,
@required Widget child
})

创建一个接收原始键盘事件的小部件。

对于文本输入,请考虑使用与屏幕键盘和输入法编辑器 (IME) 集成的 EditableText。

实施

const RawKeyboardListener({
  Key key,
  @required this.focusNode,
  @required this.onKey,
  @required this.child,
}) : assert(focusNode != null),
     assert(child != null),
     super(key: key);

【讨论】:

    【解决方案3】:

    您可以在以下位置使用此库 keyboard_visibility: ^0.5.6: https://pub.dev/packages/keyboard_visibility

    要执行您的代码,请将其插入 initState()

    KeyboardVisibilityNotification.addNewListener( onChange: (bool visible) { print(visible); this.setState(() { keyboardIsOpen = visible; }); }, );

    每当键盘打开或关闭时,库都会使用可见性布尔值调用 onChange 方法。

    【讨论】:

      【解决方案4】:

      您可以使用这个简单的检查:

      MediaQuery.of(context).viewInsets.bottom == 0
      

      当 this 返回 true 时键盘关闭,否则打开。 请注意获取整个屏幕的上下文(例如 Scaffold),而不仅仅是一个小部件。

      这就是您将该检查集成到您的代码中的方式:

      Visibility(
        child: Icon(Icons.add),
        visible: MediaQuery.of(context).viewInsets.bottom == 0,
      )
      

      【讨论】:

      • 简单干净
      • 最佳答案。谢谢
      • 我在Android和iOS设备上测试并成功使用。
      【解决方案5】:

      我用的是包keyboard_visibility

      然后我用KeyboardListener 包裹我的TextField,实现如下:

      class KeyboardListener extends StatefulWidget {
        final Widget child;
        final void Function(bool) onChange;
        KeyboardListener({@required this.child, @required this.onChange});
        @override
        _KeyboardListenerState createState() => _KeyboardListenerState();
      }
      
      class _KeyboardListenerState extends State<KeyboardListener> {
        int _sId;
        KeyboardVisibilityNotification _kvn;
      
        @override
        void initState() {
          super.initState();
          _kvn = KeyboardVisibilityNotification();
          _sId = _kvn.addNewListener(
            onChange: widget.onChange,
          );
        }
      
        @override
        Widget build(BuildContext context) {
          return widget.child;
        }
      
        @override
        void dispose() {
          _kvn.removeListener(_sId);
          super.dispose();
        }
      }
      

      【讨论】:

      猜你喜欢
      • 2018-11-19
      • 1970-01-01
      • 1970-01-01
      • 2013-09-22
      • 1970-01-01
      • 2015-10-26
      • 1970-01-01
      • 2014-04-26
      • 2012-03-07
      相关资源
      最近更新 更多