Flutter FocusNode 點擊空白區(qū)域關閉鍵盤的經驗

在用戶使用場景中經常需要用戶填寫表單或者輸入數據,常見的操作就是用戶點擊某輸入框后,打開鍵盤,用戶想切換到其他輸入框或放棄輸入,直接點擊空白區(qū)域就關閉了鍵盤。

在flutter開發(fā)中為了達到這個需求,我使用了網上其他碼農的方法,在很多方法中都大同小異,按照他們的示例寫的代碼運行后,點擊空白區(qū)域還是沒有任何反應。不知道是他們版本和我的版本不一樣,我的是flutter 26的,但在后面不懈的嘗試下,終于弄了一個方法,遂記錄下來,方便自己后期補充學習,也方便其他有同樣困惑的朋友。

***重要部分***

1、必須要有一個手勢事件,將GestureDetector包裹在外層,輸入框放在GestureDetector的child中,設置GestureDetector的onTap。

>>>>>>onTap中可以用2中寫法去處理空白區(qū)域關閉鍵盤

寫法1:在onTap中直接寫入FocusManager.instance.primaryFocus.unfocus();即可

onTap: () {

//點擊空白節(jié)點關閉鍵盤 //

FocusManager.instance.primaryFocus.unfocus();

},

寫法2:在onTap中直接寫入FocusScope.of(context).requestFocus(blankNode);,需要在class下聲明一個常量final FocusNode _blankNode = FocusNode();


以上代碼截圖即可完成點擊空白區(qū)域關閉鍵盤

基于以上問題還有幾個問題,我作為新手也找不到處原因,只是各種嘗試后得出,整理出來方法大家采坑。

GestureDetector下的child中最好寫一個Center,在dart DevTools中的dubug paint模式下,我們可以看到center鋪滿了全屏,用戶點擊任意位置即可關閉鍵盤。(如圖)


或者寫Container如下:


對齊,屏幕最大化,讓后再里面包裹組件。

反正就是空白區(qū)域必須是一個元素吧,才可以

為什么要寫個Center(),我是菜鳥我也不知道為啥?反正經過我反復嘗試,寫個center最方便,寫個column或者其他的,只要里面的元素定義了大小,那么在定義的范圍外點擊,就無法關閉鍵盤。


此處希望有高手指點下原因

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容