Flutter?Widget?之FocusableActionDetector使用詳解
Material按鈕
Material按鈕會很好
但我們知道它們不一定適合你的應(yīng)用程序,所以你要自己編寫??杀氖?,從頭開始編寫自己的空間可能是一項艱巨的工作。
桌面用戶期待懸停高亮、焦點和鍵盤快捷鍵,這是很難做好的。
GestureDetector自定義按鈕
是這樣的,你在你的應(yīng)用程序中創(chuàng)建一個自定義的按鈕, 使用GestureDetector,當(dāng)你點擊它的時候,按鈕會做一些事情
GestureDetector( onTap: showDash, child: Container( child: ColoredBox( child: Text("Click me!"), ), ), )
你添加適當(dāng)?shù)淖兞亢秃瘮?shù)來存儲和操作狀態(tài),如onHovered和onFocus
bool _onHovered = false; bool _onFocus = false; onHover() { _onHovered = !_onHovered; } onFocus(bool focused) { _onFocus = focused; }
為按鈕添加一些條件性的樣式
GestureDetector( onTap: showDash, child: Container( decoration: _onFocus ? Red Border : Blue Border, child: ColoredBox( color: _onHovered ? BlueGrey : Blue, child: Text("Click me!"), ) ) )
給按鈕一個鼠標(biāo)區(qū)域,包入一個Focus部件,然后是一個Action部件,最后是一個Shortcuts部件,更不用輸歐四個部件中的三個嵌套順序了
GestureDetector( onTap: showDash, child: Shortcuts( shortcuts: {MAP OF SHORTCUTS}, child: Actions( actions: {MAP OF ACTIONS AND INTENTS}, child: Focuus( onFocusChange: (bool focused) => onFocus(focused), child: MouseRegion( onEnter: (PointerEnterEvent event) => onHover(), onExit: (PointerExitEvent event) => onHover(), chihld: <Button> ), ), ), ), )
所以如果你不小心把Focus放在上面,就會毫無作用,太麻煩了
你的build方法變得很難操作了,它現(xiàn)在至少有四個部件還不包括GestureDetector.
所以你在寫這些模版之前,請看看FocusableActionDetector,它將Actions、Shortcuts、Foocus和MouseRegion的所有功能結(jié)合在一個小部件中,與其嵌套所有四個部件,不如完全用FocusableActionDetector來代替。
給FocusableActionDetector提供與你傳遞給前幾個小部件相同的信息:Shortcut的Map,action的Map,焦點的回調(diào)以及最后懸停變化的回調(diào)
GestureDetector( onTap: showDash, child: FocusableActionDetector( onShowHoverHighlight: onHover, onShowFocusHighlight: onFocus, actions: {MAP OF ACTIONS}, shortcuts: {MAP OF SHORTCUTS}, child: <Button> ) )
就這樣,一個具有懸停效果和鍵盤快捷鍵的可聚焦按鈕,所有你想要的功能,而不需要確保你以正確的順序手動潛逃四個不同的小部件
如果想了解有關(guān)FocusableActionDetector的內(nèi)容,或者關(guān)于Flutter的其他功能,請訪問pub.dev
以上就是Flutter Widget 之FocusableActionDetector使用詳解的詳細(xì)內(nèi)容,更多關(guān)于Flutter Widget FocusableActionDetector的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Mac OS下為Android Studio編譯FFmpeg解碼庫的詳細(xì)教程
這篇文章主要介紹了Mac OS下為Android Studio編譯FFmpeg解碼庫的詳細(xì)教程,包括NDK的配置和Android Studio的配置兩個部分的內(nèi)容,需要的朋友可以參考下2016-01-01OpenHarmony實現(xiàn)類Android短信驗證碼及倒計時流程詳解
這篇文章主要介紹了OpenHarmony實現(xiàn)類Android短信驗證碼及倒計時流程,發(fā)送短信驗證碼后,一般在界面上都會有一個倒計時的顯示.在安卓中,實現(xiàn)類似的倒計時有多種方式,當(dāng)然背后的基本原理都是設(shè)定一個初始值,然后每過一定的間隔時間執(zhí)行操作2022-11-11詳解Android(共享元素)轉(zhuǎn)場動畫開發(fā)實踐
本篇文章主要介紹了詳解Android(共享元素)轉(zhuǎn)場動畫開發(fā)實踐,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-08-08Android實現(xiàn)TextView顯示HTML加圖片的方法
這篇文章主要介紹了Android實現(xiàn)TextView顯示HTML加圖片的方法,結(jié)合實例形式分析了TextView控件顯示網(wǎng)絡(luò)圖片的相關(guān)操作技巧,需要的朋友可以參考下2016-07-07Android?Framework原理Binder驅(qū)動源碼解析
這篇文章主要為大家介紹了Android?Framework原理Binder驅(qū)動源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Android獲取設(shè)備CPU核數(shù)、時鐘頻率以及內(nèi)存大小的方法
這篇文章主要介紹了Android獲取設(shè)備CPU核數(shù)、時鐘頻率以及內(nèi)存大小的方法,涉及Android針對系統(tǒng)硬件相關(guān)操作技巧,需要的朋友可以參考下2016-07-07Android中實現(xiàn)自動生成布局View的初始化代碼方法
這篇文章主要介紹了Android中實現(xiàn)自動生成布局View的初始化代碼方法,本文使用解析layout 布局文件的方法實現(xiàn)需求,需要的朋友可以參考下2014-10-10