Flutter Textfield FocusNode在inputtype为text或emailAddress时不会取消

Question

我有一个有多个文本字段的表单，其中两个是inputtype text和emailAddress当我点击电子邮件地址从文本文本字段的焦点不切换。我使用focusNode对包含的边界应用样式。你知道是什么导致了这种行为吗?

Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: nameFocusNode.hasFocus?Colors.white.withOpacity(0.2):greyBackground
)
)
),
child: Row(
children: [
const Text('Name |  ', style: TextStyle(color: Colors.grey)),
Expanded(
child: TextField(
keyboardType: TextInputType.text,
onChanged: (value){
name = value;
},
autofocus: true,
focusNode: nameFocusNode,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'john Smith',
hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4),),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none
),
)
),
],
),
),
const SizedBox(height: 15.0,),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: phoneFocusNode.hasFocus?Colors.white.withOpacity(0.2):greyBackground
)
)
),
child: Row(
children: [
const Text('Phone |  +', style: TextStyle(color: Colors.grey)),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
onChanged: (value){
phone = PhoneNumber.check(value);
},
focusNode: phoneFocusNode,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: '2609xxx',
hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4),),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none
),
)
),
],
),
),
const SizedBox(height: 15.0,),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: emailFocusNode.hasFocus?Colors.white.withOpacity(0.2):greyBackground
)
)
),
child: Row(
children: [
const Text('Email |  ', style: TextStyle(color: Colors.grey)),
Expanded(
child: TextField(
keyboardType: TextInputType.emailAddress,
focusNode: emailFocusNode,
onChanged: (value){
email = value;
},
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: '[e-mail]',
hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4),),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none
),
)
),
],
),
),
const SizedBox(height: 15.0,),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: passwordFocusNode.hasFocus?Colors.white.withOpacity(0.2):greyBackground
)
)
),
child: Row(
children: [
const Text('Password |  ', style: TextStyle(color: Colors.grey)),
Expanded(
child: TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
maxLength: 14,
enableSuggestions: false,
focusNode: passwordFocusNode,
autocorrect: false,
onChanged: (value) {
password = value;
},
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: '*****',
hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4),),
border: InputBorder.none,
counterText: "",
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none
),
)
),
],
),
),

我试过包装文本字段在一个手势检测器和强制不聚焦，但它不工作。

Answer 1

当选择Textfield时，focusNode已更改，但部件未重建

创建侦听器函数，以便在单击focusNode以重建UI时侦听:

添加以下代码:

@override
void initState() {
super.initState();
passwordFocusNode.addListener(_handleListener);
nameFocusNode.addListener(_handleListener);
phoneFocusNode.addListener(_handleListener);
emailFocusNode.addListener(_handleListener);
}
void _handleListener(){
setState(() {
});
}