面试题：Flutter中如何自定义Material Design的Button样式

Question

在Flutter的Material Design框架下，已知有一个普通的ElevatedButton，要求通过代码实现改变按钮的背景颜色、文本颜色、按下时的水波纹颜色，并且设置按钮的形状为圆形，简述实现思路并提供关键代码。

Answer 1

实现思路

1. 改变背景颜色：通过ElevatedButton的style属性中的ButtonStyle来设置backgroundColor。
2. 改变文本颜色：同样在ButtonStyle中设置foregroundColor。
3. 改变按下时水波纹颜色：在ButtonStyle里设置overlayColor。
4. 设置按钮形状为圆形：利用RoundedRectangleBorder结合BorderRadius.circular来实现，将BorderRadius设置为按钮宽度和高度一半的值，这样在正方形按钮上就呈现圆形。

关键代码

ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
    foregroundColor: MaterialStateProperty.all(Colors.white),
    overlayColor: MaterialStateProperty.all(Colors.grey),
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(50.0),
      )
    )
  ),
  child: Text('圆形按钮'),
)