flutter 什么是材料状态属性< Color>?

r6l8ljro  于 2023-02-16  发布在  Flutter
关注(0)|答案(4)|浏览(309)

什么是ButtonStyle中的MaterialStateProperty?

ThemeData(
  textButtonTheme: TextButtonThemeData(
    style: ButtonStyle(
      backgroundColor: , //?
    ),
  ),
),
k4ymrczo

k4ymrczo1#

MaterialStateProperty的用途是使为不同的状态指定不同的样式成为可能。

例如,如果我们想要一个通常是蓝色的按钮,但是当它被按下时变成绿色,同时放大它的文本,我们可以使用MaterialStateProperty.resolveWith来完成这个任务。

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      // If the button is pressed, return green, otherwise blue
      if (states.contains(MaterialState.pressed)) {
        return Colors.green;
      }
      return Colors.blue;
    }),
    textStyle: MaterialStateProperty.resolveWith((states) {
      // If the button is pressed, return size 40, otherwise 20
      if (states.contains(MaterialState.pressed)) {
        return TextStyle(fontSize: 40);
      }
      return TextStyle(fontSize: 20);
    }),
  ),
  child: Text("Changing Button"),
  onPressed: () {},
)

除了检查按钮是否被"按下"外,MaterialStateProperty还支持:禁用、拖动、错误、聚焦、悬停、按下、滚动到下方、选中。请注意,一次可以有多个状态。例如,一个按钮可以同时处于"禁用"和"悬停"状态。使用MaterialStateProperty,您可以自定义其外观。

  • "是否有一种干净的方法可以同时解析多个状态?"*

Flutter API文档提供了一个很好的干净模式,可以同时解析多个状态中的任何一个。例如,如果你想以相同的方式响应所有交互状态,你可以定义一个如下的方法:

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
    }

然后稍后在按钮小部件中,只需将该方法指定为backgroundColor的解析器:

TextButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith(getColor),
      ),
      onPressed: () {},
      child: const Text('Changing Button'),
    );

使用Dart Pad中的完整示例。
"好吧,但我只想要一个红色按钮"
当然,看起来您可以使用:MaterialStateProperty.all(Colors.red)使其在所有情况下都变为红色。但这可能不是您想要的。例如,当按钮被禁用时,您仍然希望它变为红色吗?

你看,"所有"就是"所有"。这样不好。
那么,我们是不是整天都在处理MaterialStateProperty并检查禁用状态?
谢天谢地没有还有更好的办法
如果您使用的是ElevatedButton,则可以使用ElevatedButton.styleFrom作为基本样式。同样,如果您使用的是TextButton,则可以使用TextButton.styleFrom。在TextButton.styleFrom中,您可以轻松地修改某些样式。

代码:

ElevatedButton(
  style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
  child: Text("Red Button"),
  onPressed: () {},
)

就是这样,你只需要传入一个Color类。超级简单,不涉及MaterialStateProperty。而且它会自动为你处理边缘情况。

ttvkxqim

ttvkxqim2#

我假设你想知道如何给ButtonStyle小部件的backgroundColor参数分配颜色,如果是这样的话,就输入如下代码:

backgroundColor: MaterialStateProperty.all(Colors.green),

backgroundColor: MaterialStateProperty.all(Color(0xFF5D5F6E)),
oiopk7p5

oiopk7p53#

类的接口,这些类根据小部件的交互"状态"解析为T类型的值,交互"状态"定义为一组MaterialState。材质状态属性表示取决于小部件材质"状态"的值。状态编码为一组MaterialState值,如MaterialState.focusedMaterialState.hoveredMaterialState.pressed。例如,这InkWell.overlayColor定义这颜色那填充墨水井当它是按墨水池使用覆盖颜色的resolve方法来计算墨水池当前状态的颜色。ButtonStyle,用于配置按钮的外观,如TextButtonElevatedButtonOutlinedButton,有许多材质状态属性。按钮小部件跟踪其当前材质状态,并在需要其值时解析按钮样式的材质状态属性。

    • 代码示例:**
Widget build(BuildContext context) {
  Color getColor(Set<MaterialState> states) {
    const Set<MaterialState> interactiveStates = <MaterialState>{
      MaterialState.pressed,
      MaterialState.hovered,
      MaterialState.focused,
    };
    if (states.any(interactiveStates.contains)) {
      return Colors.blue;
    }
    return Colors.red;
  }
  return TextButton(
    style: ButtonStyle(
      foregroundColor: MaterialStateProperty.resolveWith(getColor),
    ),
    onPressed: () {},
    child: Text('TextButton'),
  );
}
    • 简单的使用方法:**
MaterialStateProperty.all(Colors.green) // Whatever value you want

要了解更多信息,您可以查看Flutter团队制作的材料状态属性的官方documentation

w1jd8yoj

w1jd8yoj4#

它用于根据按钮的当前交互状态计算值,可以悬停、按下、聚焦...(full list here)。
如果你想要一个固定的值,你可以使用MaterialStateProperty.all(YOUR_VALUE),这个值将被应用到所有的按钮状态。
您可以在这里找到更多信息:https://api.flutter.dev/flutter/material/MaterialStateProperty-class.html

相关问题