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: ... ... 省略
    );
  }