1. ElevatedButton 基础概念与核心特性

ElevatedButton 是 Flutter Material 组件库中最常用的按钮之一，它的设计初衷是为用户提供视觉上突出的操作入口。这个按钮默认带有背景色和阴影效果，当用户点击时会产生明显的视觉反馈，这种设计源于 Material Design 的"浮动按钮"理念。

在实际项目中，ElevatedButton 通常被用作主要操作按钮，比如表单提交、重要功能入口等需要用户特别注意的交互场景。与 TextButton 和 OutlinedButton 相比，ElevatedButton 的视觉权重更高，能够自然地吸引用户注意力。

这个组件的核心特性包括：

• 默认阴影效果：通过 elevation 属性控制，点击时阴影会动态变化
• Material 风格水波纹：点击时会产生涟漪扩散效果
• 丰富的样式定制：可以通过 ButtonStyle 全面控制外观
• 状态响应：自动处理禁用、按下、悬停等交互状态

// 最基本的 ElevatedButton 使用示例
ElevatedButton(
  onPressed: () {
    print('按钮被点击');
  },
  child: Text('点击我'),
)

2. 深度定制按钮样式

2.1 使用 ButtonStyle 全面控制外观

Flutter 2.0 之后引入了 ButtonStyle 类，它提供了统一的方式来定制所有 Material 按钮的外观。对于 ElevatedButton，我们可以通过 style 属性传入自定义的 ButtonStyle 对象。

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blueAccent),
    foregroundColor: MaterialStateProperty.all(Colors.white),
    elevation: MaterialStateProperty.all(8),
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
    ),
  ),
  onPressed: () {},
  child: Text('定制按钮'),
)

MaterialStateProperty 是一个特别有用的类，它允许我们根据按钮的不同状态（如按下、禁用、悬停等）返回不同的样式值。比如，我们可以让按钮在按下时改变颜色：

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Colors.deepPurple; // 按下时的颜色
        }
        return Colors.purple; // 默认颜色
      },
    ),
  ),
  onPressed: () {},
  child: Text('状态响应按钮'),
)

2.2 形状与尺寸的精细控制

按钮的形状可以通过 shape 属性进行定制。Flutter 提供了多种形状选项：

// 圆形按钮
ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
  onPressed: () {},
  child: Icon(Icons.add),
)

// 自定义边框
ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: StadiumBorder(),
    side: BorderSide(color: Colors.black, width: 2),
  ),
  onPressed: () {},
  child: Text('体育场形状'),
)

对于按钮尺寸，除了通过 padding 控制内边距外，还可以使用 minimumSize 设置最小尺寸：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size(200, 60), // 宽度200，高度60
  ),
  onPressed: () {},
  child: Text('大尺寸按钮'),
)

3. 交互状态与动画效果

3.1 处理不同交互状态

ElevatedButton 会自动处理多种交互状态，包括 pressed（按下）、hovered（悬停）、focused（聚焦）和 disabled（禁用）。我们可以为每种状态设置不同的样式：

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.disabled)) {
          return Colors.grey;
        }
        if (states.contains(MaterialState.pressed)) {
          return Colors.deepOrange;
        }
        if (states.contains(MaterialState.hovered)) {
          return Colors.orange;
        }
        return Colors.blue;
      },
    ),
  ),
  onPressed: isButtonEnabled ? () {} : null,
  child: Text('多状态按钮'),
)

3.2 自定义水波纹效果

水波纹（Ripple）效果是 Material Design 的标志性交互反馈。我们可以通过 splashFactory 和 overlayColor 属性来自定义：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    splashFactory: InkRipple.splashFactory,
    overlayColor: MaterialStateProperty.all(
      Colors.white.withOpacity(0.2),
    ),
  ),
  onPressed: () {},
  child: Text('自定义水波纹'),
)

对于更高级的动画效果，可以结合 AnimationController 实现：

class _AnimatedButtonState extends State<AnimatedButton> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 300),
      vsync: this,
    );
    _animation = Tween(begin: 8.0, end: 16.0).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        elevation: _animation.value,
      ),
      onPressed: () {
        _controller.forward().then((_) => _controller.reverse());
      },
      child: Text('动画按钮'),
    );
  }
}

4. 高级应用场景与实战技巧

4.1 表单按钮的禁用/启用逻辑

在实际表单场景中，我们经常需要在表单验证通过前禁用提交按钮：

bool _isFormValid = false;

// 在表单验证逻辑中更新状态
void _validateForm() {
  setState(() {
    _isFormValid = _formKey.currentState?.validate() ?? false;
  });
}

ElevatedButton(
  onPressed: _isFormValid ? _submitForm : null,
  child: Text('提交'),
)

4.2 带加载状态的按钮

对于网络请求等异步操作，我们可以添加加载状态：

bool _isLoading = false;

ElevatedButton(
  onPressed: _isLoading ? null : _fetchData,
  child: _isLoading 
      ? CircularProgressIndicator(color: Colors.white)
      : Text('获取数据'),
)

4.3 按钮组合与布局

多个按钮组合使用时，需要注意间距和对齐：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('取消'),
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.grey,
      ),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('确认'),
    ),
  ],
)

4.4 主题与全局样式

为了避免重复代码，可以在 ThemeData 中定义全局按钮样式：

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        minimumSize: Size(88, 48),
        textStyle: TextStyle(fontSize: 18),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
  ),
  home: MyHomePage(),
)

5. 性能优化与常见问题

5.1 避免不必要的重建

当按钮的样式复杂时，应该将 ButtonStyle 提取为常量或使用 Builder 模式：

final _buttonStyle = ElevatedButton.styleFrom(
  // 复杂样式配置
);

ElevatedButton(
  style: _buttonStyle,
  onPressed: () {},
  child: Text('优化按钮'),
)

5.2 处理长按事件

除了 onPressed，ElevatedButton 还支持 onLongPress 回调：

ElevatedButton(
  onPressed: () {},
  onLongPress: () {
    print('长按事件触发');
  },
  child: Text('长按我'),
)

5.3 无障碍支持

为按钮添加语义标签，提升无障碍体验：

Semantics(
  button: true,
  label: '提交表单按钮',
  child: ElevatedButton(
    onPressed: _submitForm,
    child: Text('提交'),
  ),
)

在实际项目中，ElevatedButton 的灵活性和可定制性让它成为构建交互界面的重要工具。掌握这些高级技巧后，你可以创建出既美观又实用的按钮组件，显著提升应用的用户体验。