Flutter中焦點FocusNode使用分析Flutter輸入框焦點事件的捕捉與監聽

題記

—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

重要消息

• flutter中網絡請求dio使用分析 視訊教程在這裡
• Flutter 從入門實踐到開發一個APP之UI基礎篇 視訊
• Flutter 從入門實踐到開發一個APP之開發實戰基礎篇
• flutter跨平台開發一點一滴分析系列文章系列文章 在這裡了

在Flutter使用FocusNode來捕捉監聽TextField的焦點擷取與失去，同時也可通過FocusNode來使用綁定對應的TextField擷取焦點與失去焦點，FocusNode的使用分四步，如下：

第一步建立FocusNode，代碼如下：

//建立FocusNode對象執行個體
 FocusNode focusNode = FocusNode();           

第二步初始化函數中添加焦點監聽，代碼如下：

/// 輸入框焦點事件的捕捉與監聽
@override
void initState() {
  super.initState();
 
   //添加listener監聽
   //對應的TextField失去或者擷取焦點都會回調此監聽
    focusNode.addListener((){
      if (focusNode.hasFocus) {
        print('得到焦點');
     
      }else{
      print('失去焦點');
      }
    });

}           

第三步在TextField中引用FocusNode，代碼如下：

new TextField(
  //引用FocusNode
  focusNode: focusNode,
),           

第四步在頁面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: ... ... 省略
    );
  }           

完畢