开发 Flutter 碰到个需求,某个功能的颜色是从后台获取的,比如后台接口的颜色数值是 “42A5F5”
,我要在代码中获取该字符串的颜色 Color,并应用到代码。这个过程,对 Flutter 的使用,了解更多,今天总结到这,希望能帮到有需要的朋友。
获取颜色方法
Flutter 有好几种方法可以获取到颜色,但我就提几种使用到的,有的方法太冷门,我觉得没必要。
Flutter 提供了一系列预定义的颜色供我们使用,例如 Colors.red
、Colors.blue
等。
Color color1 = Colors.red;
使用十六进制代码:可以使用十六进制颜色代码来创建颜色。在 Flutter 中,颜色的格式为 ARGB(A 代表透明度,R 代表红色,G 代表绿色,B 代表蓝色)。
Color color2 = Color(0xFF42A5F5); // 这里的 0xFF 是透明度,42 是红色,A5 是绿色,F5 是蓝色。
使用 Color.fromARGB()
:此方法允许您为颜色指定透明度、红色、绿色和蓝色的值
Color color4 = Color.fromARGB(255, 66, 165, 245); // 这里的参数分别代表透明度、红色、绿色和蓝色。
这个方法我想重点说明这里面的数值,这几个数字的范围都是 0 到 255 ,而且都是十进制的数。第一个数字代表透明度,数值越高,颜色越不透明,如果透明度是 255,意味着颜色是完全不透明的。后面三个数字分别代表红绿蓝的成分,数字越高,成分越高,颜色越浓。
颜色转换
现在 Color.fromARGB(255, 66, 165, 245)
的数值含义我们知道了,但这个数值来源呢?其实,这几种颜色的表现形式可以互相转换,比如数字 255 ,转换成 16 进制就是 0xFF
,66 转换成 16 进制是 0x42
。
所以,将 Color.fromARGB(255, 66, 165, 245)
转换为 Color()
形式:
A(透明度):255 = 0xFF
R(红色):66 = 0x42
G(绿色):165 = 0xA5
B(蓝色):245 = 0xF5
这样我们再回到开头的问题,如何将字符串 “42A5F5”
转换成对应颜色 Color 。乍一看这很简单,直接用字符串拼接不就行了,这本身就是一个十六进制字符串。
Color color2 = Color(0xFF42A5F5);
但不是的,我们可以直观看出来这是一个十六进制字符串,但代码中这就是一个字符串。所以我们需要将字符串转换为十六进制颜色代码,再用 Color 构造:
String colorString = "42A5F5";
// 将字符串转换为十六进制颜色代码
int hexColor = int.parse("0xFF" + colorString);
// 使用 Color 构造函数创建颜色
Color color = Color(hexColor);
还有种方法,相对来说有点复杂,但更容易理解,对字符串截取,然后转成十进制整数,用 Color.fromARGB
构造。
String colorString = "42A5F5";
// 将字符串拆分为 R, G, B 部分
String redString = colorString.substring(0, 2);
String greenString = colorString.substring(2, 4);
String blueString = colorString.substring(4, 6);
// 将十六进制字符串转换为整数
int red = int.parse(redString, radix: 16);
int green = int.parse(greenString, radix: 16);
int blue = int.parse(blueString, radix: 16);
// 使用 Color.fromARGB() 方法创建颜色
Color color = Color.fromARGB(255, red, green, blue);
OK,以上就是我的分享。
本文由老郭种树原创,转载请注明:https://guozh.net/flutter-color-acquisition-and-hexadecimal-string-color-conversion/