一、 需求說明
點擊輸入框時，輸入框可以獲取焦點，點擊輸入框之外的地方時，輸入框失去焦點。
二、解決方案
1. 初始化focusNode，F(xiàn)ocusNode focusNode = FocusNode()
2. 給輸入框TextField設(shè)置focusNode
3. 在onTapOutside事件中調(diào)用focusNode.unfocus()
4. 組件銷毀前釋放focusNode，focusNode.dispose()
注意：如果Flutter SDK的版本太低的話，就沒有onTapOutside事件，更新一下Flutter SDK就有了文章來源：http://www.zghlxwxcb.cn/news/detail-606401.html
三、代碼分享
class _SearchInput extends State<SearchInput> {
///編輯控制器
late TextEditingController _controller;
/// 是否顯示刪除按鈕
bool _hasDeleteIcon = false;
/// 輸入框焦點
FocusNode focusNode = FocusNode();
@override
void initState() {
super.initState();
_controller = TextEditingController();
}
@override
Widget build(BuildContext context) {
return TextField(
controller: _controller,
textInputAction: TextInputAction.search,
textAlignVertical: TextAlignVertical.center,
keyboardType: TextInputType.text,
focusNode: focusNode,
onTapOutside: (e) => {
focusNode.unfocus()
},
onEditingComplete: () {
FocusScope.of(context).requestFocus(focusNode);
},
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
focusNode.dispose();
}
}四、參考：
Flutter中焦點FocusNode使用分析Flutter輸入框焦點事件的捕捉與監(jiān)聽 - 知乎文章來源地址http://www.zghlxwxcb.cn/news/detail-606401.html
到了這里，關(guān)于Flutter 點擊輸入框之外的地方時，輸入框失去焦點的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
