Flutter Elevated 按钮颜色

在 Flutter 中，有一种名为 ElevatedButton 的 widget 可以用来创建一个有立体感的按钮。这个按钮的颜色可以通过 style 属性来控制。本文将介绍如何在 Flutter 中创建一个具有不同颜色的 Elevated 按钮，并且会提供一些实例代码供参考。

Elevated 按钮的颜色

在 Flutter 中，ButtonStyle 中有两个属性可以控制 Elevated 按钮的颜色，分别是 backgroundColor 和 foregroundColor。其中 backgroundColor 控制按钮的背景色，foregroundColor 控制按钮的前景色（即文本颜色）。以下是一些常用的颜色值：

backgroundColor: MaterialStateProperty.resolveWith<Color>(
    (Set<MaterialState> states) {
  if (states.contains(MaterialState.pressed)) {
    return Colors.red;
  } else if (states.contains(MaterialState.disabled)) {
    return Colors.grey;
  }
  return Colors.blue;
}),
foregroundColor: MaterialStateProperty.resolveWith<Color>(
    (Set<MaterialState> states) {
  if (states.contains(MaterialState.pressed)) {
    return Colors.white;
  } else if (states.contains(MaterialState.disabled)) {
    return Colors.black;
  }
  return Colors.white;
}),

在这个例子中，按钮的默认背景色为 blue，按下时的背景色为 red，禁用时的背景色为 grey。按钮的默认文本颜色为 white，按下时的文本颜色为 white，禁用时的文本颜色为 black。

示例代码

下面是几个使用 Elevated 按钮的示例代码，其中包括了不同的颜色，以便程序员可以根据自己的需要进行修改和使用。

蓝色按钮

ElevatedButton(
  onPressed: () {},
  child: Text('蓝色按钮'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
  ),
),

红色按钮

ElevatedButton(
  onPressed: () {},
  child: Text('红色按钮'),
  style: ElevatedButton.styleFrom(
    primary: Colors.red,
    onPrimary: Colors.white,
  ),
),

绿色按钮

ElevatedButton(
  onPressed: () {},
  child: Text('绿色按钮'),
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    onPrimary: Colors.white,
  ),
),

以上三个例子中，都是通过 ElevatedButton.styleFrom() 方法来设置按钮的颜色，其中 primary 属性控制背景色，onPrimary 属性控制文本颜色。

总结

Elevated 按钮是 Flutter 中常用的用户界面元素之一，设置按钮的颜色可以通过 ButtonStyle 中的 backgroundColor 和 foregroundColor 属性实现。程序员可以根据自己的需要，选择适合的颜色来创建 Elevated 按钮。