作用

部分组件，比如elevatedButton的style使用的ButtonStyle, 里面设置一些颜色字体风格之类的需要用到这个类去设置，而非直接赋予Color

主要是区分组件不同状态下的样式

实践

MaterialStateProperty主要是对ui组件不同的状态做区分，以 MaterialStateProperty.resolveWith为例，它提供了一个函数，类型为resolveWith(T Function(Set) ，参数类型属于Set，可以打开MaterialState源码看下有哪些状态

  1. enum MaterialState {
  2.   /// The state when the user drags their mouse cursor over the given widget.
  3.   ///
  4.   /// See: https://material.io/design/interaction/states.html#hover.
  5.   hovered,
  7.   /// The state when the user navigates with the keyboard to a given widget.
  8.   ///
  9.   /// This can also sometimes be triggered when a widget is tapped. For example,
  10.   /// when a [TextField] is tapped, it becomes [focused].
  11.   ///
  12.   /// See: https://material.io/design/interaction/states.html#focus.
  13.   focused,
  15.   /// The state when the user is actively pressing down on the given widget.
  16.   ///
  17.   /// See: https://material.io/design/interaction/states.html#pressed.
  18.   pressed,
  20.   /// The state when this widget is being dragged from one place to another by
  21.   /// the user.
  22.   ///
  23.   /// https://material.io/design/interaction/states.html#dragged.
  24.   dragged,
  26.   /// The state when this item has been selected.
  27.   ///
  28.   /// This applies to things that can be toggled (such as chips and checkboxes)
  29.   /// and things that are selected from a set of options (such as tabs and radio buttons).
  30.   ///
  31.   /// See: https://material.io/design/interaction/states.html#selected.
  32.   selected,
  34.   /// The state when this widget disabled and can not be interacted with.
  35.   ///
  36.   /// Disabled widgets should not respond to hover, focus, press, or drag
  37.   /// interactions.
  38.   ///
  39.   /// See: https://material.io/design/interaction/states.html#disabled.
  40.   disabled,
  42.   /// The state when the widget has entered some form of invalid state.
  43.   ///
  44.   /// See https://material.io/design/interaction/states.html#usage.
  45.   error,
  46. }

下面直接实践，可以看到我默认设置了一个红色，点击状态下为黄色

  1. elevatedButtonTheme: ElevatedButtonThemeData(
  2.   style: ButtonStyle(
  3.     // backgroundColor: MaterialStateProperty.all(Colors.grey),
  4.     backgroundColor:
  5.     MaterialStateProperty.resolveWith<Color>((states) {
  6.       if (states.contains(MaterialState.pressed)) {
  7.         return Colors.yellow;
  8.       }
  9.       return Colors.red;
  10.     }),
  11.   ),
  12. )

结果
image.pngimage.png

Api

一共只有3个api，all，resovleAs，resolveWith

all

设置全部状态共同使用的样式

  1.  MaterialStateProperty.all<Color>(Colors.grey)

resolveWith

提供回调函数，可以通过实参states去判断不同类型下返回不同的样式，return的值为该泛型

  1. MaterialStateProperty.resolveWith<Color>((states) {
  2.   if (states.contains(MaterialState.pressed)) {
  3.     return Colors.yellow;
  4.   }
  5.       return Colors.red;
  6.     },
  7. )

resolveAs

没搞懂，网上也没看到相应的demo，忽略