Flutter中无法覆盖禁用状态ElevatedButton颜色问题求助

问题原因 #

当ElevatedButton的onPressed设为null（禁用状态）时，Flutter会自动应用组件内置的禁用状态样式，直接通过styleFrom的backgroundColor赋值会被这个内置样式覆盖，导致自定义颜色不生效。旧版的ThemeData.disabledColor属性不适用于新版的ElevatedButton，因此设置后无效果。

解决方案 #

使用MaterialStateProperty.resolveWith来根据按钮的状态动态返回样式，这样禁用状态的颜色就能正确生效。

修改后的代码如下：

ElevatedButton(
  onPressed: _isDisabled ? null : () {
    // 按钮点击逻辑
  },
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30),
    ),
  ).copyWith(
    backgroundColor: MaterialStateProperty.resolveWith<Color>((states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.amber; // 禁用状态的背景色
      }
      return MyTheme.getCiSonoButtonColor(context: context); // 正常状态的背景色
    }),
  ),
  child: const Text('Button'),
)

全局主题配置方案 #

如果需要全局统一设置所有ElevatedButton的禁用状态样式，可以在ThemeData中配置：

ThemeData(
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom().copyWith(
      backgroundColor: MaterialStateProperty.resolveWith<Color>((states) {
        if (states.contains(MaterialState.disabled)) {
          return Colors.amber;
        }
        return Colors.blue; // 全局默认正常状态颜色
      }),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Geremia Moretti