• flutter TextFile输入框失去焦点


    参考:https://blog.csdn.net/zl18603543572/article/details/106029630

    1.创建FocusNode对象实例

    //创建FocusNode对象实例
     FocusNode focusNode = FocusNode();

    2.初始化函数中添加焦点监听

    /// 输入框焦点事件的捕捉与监听
    @override
    void initState() {
      super.initState();
     
       //添加listener监听
       //对应的TextField失去或者获取焦点都会回调此监听
        focusNode.addListener((){
          if (focusNode.hasFocus) {
            print('得到焦点');
         
          }else{
          print('失去焦点');
          }
        });
    
    }

    3.在TextField中引用FocusNode

    new TextField(
      //引用FocusNode
      focusNode: focusNode,
    ),

    4.在页面Widget销毁时,释放focusNode

    //页面销毁
    @override
    void dispose() {
      super.dispose();
      //释放
      focusNode.dispose();
    }

    在项目开发中,关于focusNode的常用方法代码如下:

    //获取焦点
    void getFocusFunction(BuildContext context){
      FocusScope.of(context).requestFocus(focusNode);
    }
    
    //失去焦点
    void unFocusFunction(){
      focusNode.unfocus();
    }
    
    //隐藏键盘而不丢失文本字段焦点:
    void hideKeyBoard(){
      SystemChannels.textInput.invokeMethod('TextInput.hide');
    }

    在实际项目中的一个用户操作习惯就是当输入键盘是弹出状态时,用户点击屏幕的空白处,键盘要隐藏,处理实现思路就是在MaterialApp组件中的第一个根布局设置一上手势兼听,然后在手势兼听中处理隐藏键盘的功能,代码如下:

     /// 全局点击空白处理隐藏键盘
      Widget buildMainBody(BuildContext context) {
        return GestureDetector(
          onTap: () {
            //隐藏键盘
            SystemChannels.textInput.invokeMethod('TextInput.hide');
          },
          child: ... ... 省略
        );
      }
  • 相关阅读:
    tctip demo页面>
    tctip demo页面>
    tctip demo页面>
    tctip demo页面>
    tctip demo页面>
    tctip demo页面>
    tctip demo页面>
    tctip demo页面>
    tctip demo页面>
    sql 随笔
  • 原文地址:https://www.cnblogs.com/lude1994/p/14218014.html
Copyright © 2020-2023  润新知