Flutter：输入框焦点获取与软键盘隐藏

问题

如上动图，我们在登录界面存在两个问题：

1. 输入用户名时，我们点击下一步，焦点并不会自动跳到密码输入框。
2. 点击登录弹出Dialog后，输入框会自动重新获得焦点，我们想点击登录按钮后隐藏软键盘且不再弹出。

解决

1. 输入框中有个focusNode属性，用于控制输入框是否占有当前键盘的输入焦点。
2. FocusScope.of(context).requestFocus(focusNode);可以指定focusNode属性的输入框获取焦点。
3. 实例化一个空白焦点blankNode，然后不赋值给任何输入框的focusNode，调用FocusScope.of(context).requestFocus(blankNode);就会使其他输入框失去焦点并隐藏键盘。

代码

因此我们可以修改代码如下：

class HomePageState extends State<HomePage> {
  FocusNode blankNode = FocusNode(); //空白焦点,不赋值给任何focusNode
  FocusNode focusNode = FocusNode(); //密码框焦点

  @override
  Widget build(BuildContext context) {
    return CenterScaffold("登录", <Widget>[
      Padding(
        padding: EdgeInsets.all(20),
        child: TextField(
          decoration: InputDecoration(hintText: "用户名", hintStyle: TextStyle(color: Colors.grey)),
          textInputAction: TextInputAction.next,
          onEditingComplete: () {
            FocusScope.of(context).requestFocus(focusNode); //焦点付给密码输入框
          },
        ),
      ),
      Padding(
        padding: EdgeInsets.all(20),
        child: TextField(
          decoration: InputDecoration(hintText: "密码", hintStyle: TextStyle(color: Colors.grey)),
          focusNode: focusNode, //密码框焦点属性
        ),
      ),
      RaisedButton(
        child: Text("登录"),
        onPressed: () {
          FocusScope.of(context).requestFocus(blankNode); //指定为空白焦点
          DialogUtils.showLoadingDialog(context); 
        },
      )
    ]);
  }
}

效果图

隐藏软键盘

class SystemUtils {

  /**
   * 隐藏软键盘
   */
  static hideSoftKeyboard(BuildContext context){
    FocusNode blankNode = FocusNode(); //空白焦点,不赋值给任何输入框的focusNode
    FocusScope.of(context).requestFocus(blankNode); //指定为空白焦点
  }
}

参考

https://blog.csdn.net/qq_33635385/article/details/102835927