目录Material按钮会很好但我们知道它们不一定适合你的应用程序，所以你要自己编写。可悲的是，从头开始编写自己的空间可能是一项艰巨的工作。桌面用户期待悬停高亮、焦点和键盘快捷键，这是很难做好的。是这...
目录
Material按钮会很好
但我们知道它们不一定适合你的应用程序，所以你要自己编写。可悲的是，从头开始编写自己的空间可能是一项艰巨的工作。
桌面用户期待悬停高亮、焦点和键盘快捷键，这是很难做好的。
是这样的,你在你的应用程序中创建一个自定义的按钮, 使用GestureDetector，当你点击它的时候，按钮会做一些事情
GestureDetector(
onTap: showDash,
child: Container(
child: ColoredBox(
child: Text("Click me!"),
),
),
)
复制代码
你添加适当的变量和函数来存储和操作状态，如onHovered和onFocus
bool%20_onHovered%20=%20false;
bool%20_onFocus%20=%20false;
onHover()%20{
%20%20%20%20_onHovered%20=%20!_onHovered;
}
onFocus(bool%20focused)%20{
%20%20%20%20_onFocus%20=%20focused;
}
复制代码
为按钮添加一些条件性的样式
GestureDetector(
%20%20%20%20onTap:%20showDash,
%20%20%20%20child:%20Container(
%20%20%20%20%20%20%20%20decoration:%20_onFocus%20?%20Red%20Border%20:%20Blue%20Border,
%20%20%20%20%20%20%20%20child:%20ColoredBox(
%20%20%20%20%20%20%20%20%20%20%20%20color:%20_onHovered%20?%20BlueGrey%20:%20Blue,
%20%20%20%20%20%20%20%20%20%20%20%20child:%20Text("Click%20me!"),
%20%20%20%20%20%20%20%20)
%20%20%20%20)
)
复制代码
给按钮一个鼠标区域,包入一个Focus部件,然后是一个Action部件，最后是一个Shorpythontcuts部件，更不用输欧四个部件中的三个嵌套顺序了
GestureDetector(
%20%20%20%20onTap:%20showDash,
%20%20%20%20child:%20Shortcuts(
%20%20%20%20%20%20%20%20shortcuts:%20{MAP%20OF%20SHORTCUTS},
%20%20%20%20%20%20%20%20child:%20Actions(
%20%20%20%20%20%20%20%20%20%20%20%20actions:%20{MAP%20OF%20ACTIONS%20AND%20INTENTS},
%20%20%20%20%20%20%20%20%20%20%20%20child:%20Focuus(
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onFocusChange:%20(bool%20focused)%20=>%20onFocus(focused),
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20child:%20MouseRegion(
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onEnter:%20(PointerEnterEvent%20event)%20=>%20onHover(),
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onExit:%20(PointerExitEvent%20event)%20=>%20onHover(),
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20chihld:%20<Button>
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20),
%20%20%20%20%20%20%20%20%20%20%20%20),
%20%20%20%20%20%20%20%20),
%20%20%20%20),
)
复制代码
所以如果你不小心把Focus放在上面，就会毫无作用,太麻烦了
你的build方法变得很难操作了，它现在至少有四个部件还不包括GestureDetector.
所以你在写这些模版之前，请看看FocusableActionDetector,它将Actions、Shortcuts、Foocus和MouseRegion的所有功能结合在一个小部件中，与其嵌套所有四个部件，不如完全用FocusableActionDetector来代替。
给FocusableActionDetector提供与你传递给前几个小部件相同的信息：Shortcut的Map，action的Map，焦点的回调以及最后悬停变化的回调
GestureDetector(
%20%20%20%20onTap:%20showDash,
%20%20%20%20child:%20FocusableActionDetector(
%20%20%20%20%20%20%20%20onShowHoverHighlight:%20onHover,
%20%20%20%20%20%20%20%20onShowFocusHighlight:%20onFocus,
%20%20%20%20%20%20%20%20actions:%20{MAP%20OF%20ACTIONS},
%20%20%20%20%20%20%20%20shortcuts:%20{MAP%20OF%20SHORTCUTS},
%20%20%20%20%20%20%20%20child:%20<Button>
%20%20%20%20)
)
复制代码
就这样，一个具有悬停效果和键盘快捷键的可聚焦按钮，所有你想要的功能，而不需要确保你以正确的顺序手动潜逃四个不同的小部件
如果想了解有关FocusableActionDetector的内容，或者关于Flutter的其他功能，请访问pub.dev
以上就是Flutter Widget 之FocusableActionDetector使用详解的详细内容，更多关于Flutter Widget FocusableActionDetector的资料请关注我们其它相关文章！
