Flutter:输入框焦点获取与软键盘隐藏
问题如上动图,我们在登录界面存在两个问题:输入用户名时,我们点击下一步,焦点并不会自动跳到密码输入框。点击登录弹出Dialog后,输入框会自动重新获得焦点,我们想点击登录按钮后隐藏软键盘且不再弹出。解决输入框中有个focusNode属性,用于控制输入框是否占有当前键盘的输入焦点。FocusScope.of(context).requestFocus(focusNode);可以指定focusNode
·
问题

如上动图,我们在登录界面存在两个问题:
- 输入用户名时,我们点击下一步,焦点并不会自动跳到密码输入框。
- 点击登录弹出Dialog后,输入框会自动重新获得焦点,我们想点击登录按钮后隐藏软键盘且不再弹出。
解决
- 输入框中有个focusNode属性,用于控制输入框是否占有当前键盘的输入焦点。
FocusScope.of(context).requestFocus(focusNode);可以指定focusNode属性的输入框获取焦点。- 实例化一个空白焦点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); //指定为空白焦点
}
}
参考
更多推荐



所有评论(0)