如何在Flutter中为Elevated Button设置样式并自定义背景色

MaterialStateProperty是Flutter Material组件库提供的样式包装类，专门用于处理组件在不同交互状态下的样式差异。按钮、输入框等可交互组件会在用户操作时切换不同状态（比如按下、禁用、悬停），通过MaterialStateProperty可以为不同状态配置不同的样式值。

你可以根据自己的需求选择以下任意一种方式为ElevatedButton配置背景色：

1. 所有状态使用统一背景色 #

如果不需要区分不同状态的背景色，直接使用MaterialStateProperty.all()方法包裹你的颜色值即可：

ElevatedButton(
  onPressed: () => debugPrint("点击按钮"),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.green),
  ),
  child: const Text("统一背景色按钮"),
)

2. 不同状态配置不同背景色 #

如果需要针对按下、禁用等状态设置不同的颜色，使用MaterialStateProperty.resolveWith()方法，通过回调判断当前状态返回对应颜色：

ElevatedButton(
  // 置空onPressed时按钮为禁用状态
  onPressed: () => debugPrint("点击按钮"),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      // 按下状态返回深绿色
      if (states.contains(MaterialState.pressed)) {
        return Colors.greenAccent.shade700;
      }
      // 禁用状态返回灰色
      if (states.contains(MaterialState.disabled)) {
        return Colors.grey.shade300;
      }
      // 默认状态返回绿色
      return Colors.green;
    }),
  ),
  child: const Text("分状态配置背景色按钮"),
)

常用的状态枚举值如下：

• MaterialState.pressed：用户手指/鼠标按下组件的状态
• MaterialState.hovered：鼠标悬停在组件上的状态
• MaterialState.focused：组件获得输入焦点的状态
• MaterialState.disabled：组件被禁用的状态
• MaterialState.selected：组件被选中的状态

3. 简化写法（无需显式调用MaterialStateProperty） #

Flutter提供了ElevatedButton.styleFrom静态方法，内部会自动将你传入的样式值封装为MaterialStateProperty，写法更简洁：

ElevatedButton(
  onPressed: () => debugPrint("点击按钮"),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    // 可同步配置其他样式
    foregroundColor: Colors.white, // 文字颜色
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), // 圆角
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 内边距
  ),
  child: const Text("简化写法按钮"),
)

内容的提问来源于stack exchange，提问作者Abiy Menberu