Flutter 颜色(Color) 的获取和十六进制字符串颜色转换

开发 Flutter 碰到个需求,某个功能的颜色是从后台获取的,比如后台接口的颜色数值是 “42A5F5” ,我要在代码中获取该字符串的颜色 Color,并应用到代码。这个过程,对 Flutter 的使用,了解更多,今天总结到这,希望能帮到有需要的朋友。

获取颜色方法

Flutter 有好几种方法可以获取到颜色,但我就提几种使用到的,有的方法太冷门,我觉得没必要。

Flutter 提供了一系列预定义的颜色供我们使用,例如 Colors.redColors.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/

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注