Flutter?Widget?之FocusableActionDetector使用詳解

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

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

Material按鈕

Material按鈕會很好

但我們知道它們不一定適合你的應用程序，所以你要自己編寫?？杀氖?，從頭開始編寫自己的空間可能是一項艱巨的工作。

桌面用戶期待懸停高亮、焦點和鍵盤快捷鍵，這是很難做好的。

GestureDetector自定義按鈕

是這樣的,你在你的應用程序中創(chuàng)建一個自定義的按鈕, 使用GestureDetector，當你點擊它的時候，按鈕會做一些事情

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

你添加適當?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!"),
        )
    )
)

給按鈕一個鼠標區(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的所有功能結合在一個小部件中，與其嵌套所有四個部件，不如完全用FocusableActionDetector來代替。

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

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

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