Flutter?Widget?之FocusableActionDetector使用詳解

更新時(shí)間：2022年11月25日 14:49:02 作者：程序員界的小學(xué)生

這篇文章主要為大家介紹了Flutter?Widget?之FocusableActionDetector使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Material按鈕

Material按鈕會(huì)很好

但我們知道它們不一定適合你的應(yīng)用程序，所以你要自己編寫(xiě)?？杀氖牵瑥念^開(kāi)始編寫(xiě)自己的空間可能是一項(xiàng)艱巨的工作。

桌面用戶期待懸停高亮、焦點(diǎn)和鍵盤(pán)快捷鍵，這是很難做好的。

GestureDetector自定義按鈕

是這樣的,你在你的應(yīng)用程序中創(chuàng)建一個(gè)自定義的按鈕, 使用GestureDetector，當(dāng)你點(diǎn)擊它的時(shí)候，按鈕會(huì)做一些事情

GestureDetector(
    onTap: showDash,
    child: Container(
        child: ColoredBox(
            child: Text("Click me!"),
        ),
    ),
)

你添加適當(dāng)?shù)淖兞亢秃瘮?shù)來(lái)存儲(chǔ)和操作狀態(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!"),
        )
    )
)

給按鈕一個(gè)鼠標(biāo)區(qū)域,包入一個(gè)Focus部件,然后是一個(gè)Action部件，最后是一個(gè)Shortcuts部件，更不用輸歐四個(gè)部件中的三個(gè)嵌套順序了

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放在上面，就會(huì)毫無(wú)作用,太麻煩了

你的build方法變得很難操作了，它現(xiàn)在至少有四個(gè)部件還不包括GestureDetector.

所以你在寫(xiě)這些模版之前，請(qǐng)看看FocusableActionDetector,它將Actions、Shortcuts、Foocus和MouseRegion的所有功能結(jié)合在一個(gè)小部件中，與其嵌套所有四個(gè)部件，不如完全用FocusableActionDetector來(lái)代替。

給FocusableActionDetector提供與你傳遞給前幾個(gè)小部件相同的信息：Shortcut的Map，action的Map，焦點(diǎn)的回調(diào)以及最后懸停變化的回調(diào)

GestureDetector(
    onTap: showDash,
    child: FocusableActionDetector(
        onShowHoverHighlight: onHover,
        onShowFocusHighlight: onFocus,
        actions: {MAP OF ACTIONS},
        shortcuts: {MAP OF SHORTCUTS},
        child: <Button>
    )
)

就這樣，一個(gè)具有懸停效果和鍵盤(pán)快捷鍵的可聚焦按鈕，所有你想要的功能，而不需要確保你以正確的順序手動(dòng)潛逃四個(gè)不同的小部件