7、Flutter 按钮状态管理与映射

Flutter自带ElevatedButton、TextButton、OutlinedButton都继承自ButtonStyleButton，其中有个ButtonStyle的属性有点特殊，它的属性的声明方式是：MaterialStateProperty<TextStyle?>? textStyle;

一、ButtonStyle属性

ButtonStyle 是Flutter中用于自定义按钮外观和行为的类，它提供了许多属性，可以用来定义按钮的样式。以下是一些常见的 ButtonStyle 属性：

1. backgroundColor：设置按钮的背景颜色。

2. foregroundColor：设置按钮上文本和图标的前景颜色（文本颜色）。

3. overlayColor：设置按钮在用户与其交互（例如点击）时的覆盖颜色。

4. elevation：设置按钮的升高程度。升高程度决定了按钮的立体感。

5. shadowColor：设置按钮的阴影颜色。

6. padding：设置按钮的内边距，控制按钮内容与按钮边缘之间的空白区域。

7. minimumSize：设置按钮的最小尺寸。

8. maximumSize：设置按钮的最大尺寸。

9. side：设置按钮的边框样式，包括颜色、宽度和边框类型。

10. shape：设置按钮的形状，例如圆角矩形或椭圆形。

11. alignment：设置按钮内容的对齐方式，可以是Alignment对象。

12. textStyle：设置按钮上文本的样式，包括字体大小、颜色、字重等。

13. animationDuration：设置按钮状态切换的动画持续时间，用于处理按钮按下、释放等状态的过渡动画。

14. visualDensity：控制按钮的紧凑性，通常用于改变按钮的大小。

15. tapTargetSize：定义按钮的点击目标大小，用于影响按钮的可点击区域。

二、MaterialStateProperty
ButtonStyle中的多数属性是用MaterialStateProperty修饰的

 final MaterialStateProperty<TextStyle?>? textStyle;
 
  final MaterialStateProperty<Color?>? backgroundColor;
  
  final MaterialStateProperty<Color?>? foregroundColor;

  final MaterialStateProperty<Color?>? overlayColor;

  final MaterialStateProperty<Color?>? shadowColor;

中所周知按钮有不同的状态，通常我们会根据不同的状态来设置按钮的文字样式，背景颜色等。这就需要定义一个工具类，能根据状态返回我们想要的值。Flutter已经给我们封装好了MaterialStateProperty。

MaterialStateProperty用来表示一个属性或样式的动态值，该值可以根据小部件的不同状态（例如正常状态、按下状态、禁用状态等）而变化。它通常用于自定义小部件的属性，以便在不同状态下提供不同的样式或值。

1、基础用法

我们可以使用resolveWith方法，传递一个闭包，系统会在状态发生变化时，调用此闭包来获取属性的值。例如：

ElevatedButton(
  onPressed: () {
   
    // 处理按钮点击事件
  },
  child: Text('ElevatedButton'),
  style: ButtonStyle(
  // 此处是一个状态的集合，我们只要判断是否包含我们想要的状态就可以了。
    textStyle: MaterialStateProperty.resolveWith<TextStyle?>(
      (Set<MaterialState> states) {
   
        if (states.contains(MaterialState.disabled)) {
   
          return TextStyle(
            color: Colors.grey,
          );
        }
        return TextStyle(
          color: Colors.blue,
        );
      },
    ),
  ),
)

如果要设置padding，可以这样做：