Flutter系列之《样式篇》 - Color

“Color（颜色）”是我们在设置应用程序界面样式时最常用到的属性。

Flutter 中颜色设置的方式有很多种，其中最常用的有下列几种：

Color c1 = Color(0xFF0099ff);
Color c2 = Color.fromRGBO(60, 170, 250, 1);
Color c3 = Color.fromARGB(255, 60, 170, 250);
Color c4 = Colors.blue;
Color c5 = Colors.red[300];

这里面涉及到了两个类：Color 和 Colors。

1. Color

Color 是 Flutter 提供的一个颜色类。

1.1 Color()

调用 Color 构造函数时，传入一个颜色的 ARGB 值，即可设置对应的颜色。示例代码如下：

Color c1 = Color(0xFF0099ff);

• FF 是透明度的十六进制表示方式，取值范围是：00 ～ FF（透明 ～ 不透明）；
• 0099ff 是颜色 RGB(red/green/blue) 值的十六进制表示方式，不同的颜色对应的值也不一样，建议通过取色器软件等进行取色。

1.2 Color.fromRGBO()

Color 类的身上有一个 fromRGBO() 的方法，该方法接受 4 个参数，分别与 RGBO 对应：red、green、blue、opacity。示例代码如下：

Color c2 = Color.fromRGBO(60, 170, 250, 1);

• RGB 表示红绿蓝三种颜色，取值范围是：0 ～ 255；
• O 表示颜色透明度，取值范围是：0 ～ 1（透明 ～ 不透明）；

1.3 Color.fromARGB()

Color 类的身上还有一个 fromARGB() 的方法，该方法同样接收 4 个参数，与 ARGB 对应的也是：alpha、red、green、blue。示例代码如下：

Color c3 = Color.fromARGB(255, 60, 170, 250);

• A 表示颜色透明度，取值范围是：0 ～ 255；
• RGB 表示红绿蓝三种颜色，取值范围是：0 ～ 255（透明 ～ 不透明）；

2. Colors

Colors 实际上就是 Material 库中对 Color 的进一步封装。它将一些常用颜色的十六进制值封装成了我们更熟悉的英文单词形式。示例代码如下：

Color c4 = Colors.red;
Color c5 = Colors.white;

Color c6 = Colors.red[50];
Color c6 = Colors.blue[900];

颜色后面的中括号是用来设置当前颜色的深浅度，可取的值有 10 种：50、100、200 ... 900，值越大，对应的颜色越深。500 就等同于当前颜色自身。

注：并不是所有的颜色英文单词都能用，只能使用 Material 中封装了的颜色。