无法理解Flutter文档中ButtonStyle的elevation属性语法及用法

架构老林

2026-8-1

理解Flutter中ButtonStyle的elevation属性赋值

一、先搞懂`MaterialStateProperty<double?>?`是什么

这个类型的核心作用是让你能根据按钮的不同状态（比如按下、悬停、禁用等）设置不同的阴影高度。如果不需要区分状态，也可以直接设一个固定值。

二、几种常见的赋值方式

固定值（不区分状态）
用MaterialStateProperty.all()快速设置全局生效的elevation，不管按钮处于什么状态都用这个值：
```
elevation: MaterialStateProperty.all(8.0),
```
要是想使用系统默认的阴影高度，直接传null就行：
```
elevation: null,
```

根据状态动态调整
如果需要在按钮按下、禁用等状态显示不同阴影，用MaterialStateProperty.resolveWith()来处理：

elevation: MaterialStateProperty.resolveWith((states) {
  // 按钮被按下时
  if (states.contains(MaterialState.pressed)) {
    return 12.0;
  }
  // 按钮禁用时
  if (states.contains(MaterialState.disabled)) {
    return 0.0;
  }
  // 默认正常状态
  return 8.0;
}),

三、修改后的RoundIconButton代码示例

把固定值的写法套进你的自定义类里，顺便加个圆形形状贴合类名：

class RoundIconButton extends StatelessWidget {
  const RoundIconButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ButtonStyleButton(
      onPressed: () {},
      style: ButtonStyle(
        elevation: MaterialStateProperty.all(8.0),
        shape: MaterialStateProperty.all(
          const CircleBorder(),
        ),
      ),
    );
  }
}