小编典典

如何在 Flutter 中使用十六进制颜色字符串?

all

如何在 Flutter 中将 十六进制颜色字符串 转换为 #b74093 a ?Color

我想在 Dart 中使用 HEX 颜色代码。


阅读 197

收藏
2022-03-14

共1个答案

小编典典

在 Flutter 中, Color 该类只接受 _ 整数
作为参数_,或者可以使用命名构造函数fromARGBfromRGBO.

所以我们只需要将字符串转换#b74093为整数值。此外,我们需要尊重始终需要指定 不透明度。
255(完全)不透明度由十六进制值表示FF。这已经给我们留下了 0xFF. 现在,我们只需要像这样附加我们的颜色字符串:

const color = const Color(0xffb74093); // Second `const` is optional in assignments.

字母可以选择是否大写:

const color = const Color(0xFFB74093);

如果要使用 百分比不透明度值
,可以将第一个值替换为该表FF中的值(也适用于其他颜色通道)。

扩展类

从 Dart开始2.6.0,您可以extensionColor类创建一个允许您使用十六进制颜色字符串来创建Color对象的类:

extension HexColor on Color {
  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
  static Color fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
  }

  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
      '${alpha.toRadixString(16).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}

fromHex方法也可以在 a
mixinor中声明,class因为HexColor需要显式指定名称才能使用它,但扩展对于该toHex方法很有用,可以隐式使用。这是一个例子:

void main() {
  final Color color = HexColor.fromHex('#aabbcc');

  print(color.toHex());
  print(const Color(0xffaabbcc).toHex());
}

使用十六进制字符串的缺点

这里的许多其他答案显示了如何Color从十六进制字符串动态创建一个,就像我在上面所做的那样。但是,这样做意味着颜色不能是const.
理想情况下,您可以按照我在本答案第一部分中解释的方式分配颜色,这在大量实例化颜色时效率更高,这通常是 Flutter 小部件的情况。

2022-03-14