正文

就網(wǎng)絡(luò)和應(yīng)用程序而言，鍵盤快捷鍵很重要，今天我們要談的便是讓這類快捷鍵得以在Flutter運(yùn)作的小部件：Focus、Shortcuts和Action。

這套系統(tǒng)中的第一個(gè)小部件是Focus,小部件樹中到處都有它的蹤跡，包括按鈕個(gè)文本輸入在內(nèi)之類的用戶界面交互區(qū)塊

FocusNode對象

這個(gè)小部件還包含F(xiàn)ocusNode對象

Focus({
    FocusNode? node,
    Widget? child,
}) : node = node ?? FocusNode();

其作用是指示Flutter用戶交互理應(yīng)在代碼中出現(xiàn)的位置。

整體而言。這個(gè)Focus小部件的網(wǎng)絡(luò)及所屬的FocusNode會(huì)在您的Flutter應(yīng)用中構(gòu)成另一名為Focus樹的結(jié)構(gòu)

對此首先要知道的是節(jié)點(diǎn)永遠(yuǎn)被視為是作用中的，那作用中的FocusNodes有何涵義呢？

這代表實(shí)體鍵盤輸入這類的系統(tǒng)特殊事件，會(huì)首先出現(xiàn)在Focuss小部件中，當(dāng)中的FocusNode且在向頂部結(jié)構(gòu)送出推播通知錢都會(huì)維持作用中的狀態(tài)。

小部件樹向上傳送時(shí)會(huì)起到怎樣的作用呢

當(dāng)這些按鍵事件于小部件樹向上傳送時(shí)會(huì)起到怎樣的作用呢？

這些事件會(huì)搜尋按鍵所對應(yīng)的Shortcuts小部件并將之轉(zhuǎn)為意圖對象（intent），該對象起于作用中的FocusNodes并會(huì)持續(xù)朝應(yīng)用程序頂部浮現(xiàn)。

至于Focus小部件，其實(shí)Flutter框架所屬的按鈕和文本輸入之類的交互控件皆已包含所需的Focus小部件，不過哦有時(shí)候若您想要從頭規(guī)劃用戶體驗(yàn)，可能就會(huì)想自行添加。

例如樣式的折疊卡片accordion，標(biāo)題應(yīng)以焦點(diǎn)處理設(shè)為Focusable，藉此顯示鍵盤快捷指令來切換面板的可見性。

要這樣做，得使用Accordion標(biāo)題小部件，并將其子級(jí)包裝在Focus小部件中,這是要為accordion小部件自定義鍵盤快捷鍵的第一步

Accordion(
    children: <Widget>[
        Header(
            child: Focus(
                child: Text('Section 1'),
            ),
        ),
        Section1Body(),
    ],
)

請繼續(xù)鎖定作為第二和第三步，Shortcuts和Actions小部件的后續(xù)介紹

如果想了解有關(guān)Focus的內(nèi)容，或者關(guān)于Flutter的其他功能，請?jiān)L問flutter.dev

以上就是Flutter Widget開發(fā)之Focus組件圖文詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter Widget Focus組件的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論