Color getColor(Set<MaterialState> states) {
const Set<MaterialState> interactiveStates = <MaterialState>{
MaterialState.pressed, // Any states you want to affect here
MaterialState.hovered,
MaterialState.focused,
};
if (states.any(interactiveStates.contains)) {
// if any of the input states are found in our list
return Colors.blue;
}
return Colors.red; // default color
}
4条答案
按热度按时间k4ymrczo1#
MaterialStateProperty
的用途是使为不同的状态指定不同的样式成为可能。例如,如果我们想要一个通常是蓝色的按钮,但是当它被按下时变成绿色,同时放大它的文本,我们可以使用
MaterialStateProperty.resolveWith
来完成这个任务。除了检查按钮是否被"按下"外,
MaterialStateProperty
还支持:禁用、拖动、错误、聚焦、悬停、按下、滚动到下方、选中。请注意,一次可以有多个状态。例如,一个按钮可以同时处于"禁用"和"悬停"状态。使用MaterialStateProperty
,您可以自定义其外观。Flutter API文档提供了一个很好的干净模式,可以同时解析多个状态中的任何一个。例如,如果你想以相同的方式响应所有交互状态,你可以定义一个如下的方法:
然后稍后在按钮小部件中,只需将该方法指定为backgroundColor的解析器:
使用Dart Pad中的完整示例。
"好吧,但我只想要一个红色按钮"
当然,看起来您可以使用:
MaterialStateProperty.all(Colors.red)
使其在所有情况下都变为红色。但这可能不是您想要的。例如,当按钮被禁用时,您仍然希望它变为红色吗?你看,"所有"就是"所有"。这样不好。
那么,我们是不是整天都在处理
MaterialStateProperty
并检查禁用状态?谢天谢地没有还有更好的办法
如果您使用的是
ElevatedButton
,则可以使用ElevatedButton.styleFrom
作为基本样式。同样,如果您使用的是TextButton
,则可以使用TextButton.styleFrom
。在TextButton.styleFrom
中,您可以轻松地修改某些样式。代码:
就是这样,你只需要传入一个
Color
类。超级简单,不涉及MaterialStateProperty
。而且它会自动为你处理边缘情况。ttvkxqim2#
我假设你想知道如何给ButtonStyle小部件的backgroundColor参数分配颜色,如果是这样的话,就输入如下代码:
或
oiopk7p53#
类的接口,这些类根据小部件的交互"状态"解析为
T
类型的值,交互"状态"定义为一组MaterialState。材质状态属性表示取决于小部件材质"状态"的值。状态编码为一组MaterialState
值,如MaterialState.focused
、MaterialState.hovered
、MaterialState.pressed
。例如,这InkWell.overlayColor
定义这颜色那填充墨水井当它是按墨水池使用覆盖颜色的resolve方法来计算墨水池当前状态的颜色。ButtonStyle
,用于配置按钮的外观,如TextButton
、ElevatedButton
和OutlinedButton
,有许多材质状态属性。按钮小部件跟踪其当前材质状态,并在需要其值时解析按钮样式的材质状态属性。要了解更多信息,您可以查看Flutter团队制作的材料状态属性的官方documentation。
w1jd8yoj4#
它用于根据按钮的当前交互状态计算值,可以悬停、按下、聚焦...(full list here)。
如果你想要一个固定的值,你可以使用
MaterialStateProperty.all(YOUR_VALUE)
,这个值将被应用到所有的按钮状态。您可以在这里找到更多信息:https://api.flutter.dev/flutter/material/MaterialStateProperty-class.html