如何在Flutter中使用十六进制颜色字符串？ [英] How do I use hexadecimal color strings in Flutter?

问题描述

如何将十六进制颜色字符串（例如 ＃b74093 ）转换为颜色在Flutter吗？

How do I convert a hexadecimal color string like #b74093 to a Color in Flutter?

我想在Dart中使用十六进制颜色代码。

I want to use a HEX color code in Dart.

推荐答案

在Flutter中， Color 类 仅接受 integers 作为参数，或者可以使用命名构造函数< a href = https://docs.flutter.io/flutter/dart-ui/Color/Color.fromARGB.html rel = noreferrer> fromARGB 和 fromRGBO 。

In Flutter the Color class only accepts integers as parameters, or there is the possibility to use the named constructors fromARGB and fromRGBO.

因此我们只需要将字符串＃b74093 转换为整数值。此外，我们还需要尊重始终需要指定 opacity 。

255 （完全）不透明度由十六进制表示值 FF 。这已经给我们留下了 0xFF 。现在，我们只需要像这样添加颜色字符串即可：

So we only need to convert the string #b74093 to an integer value. Also we need to respect that opacity always needs to be specified.
255 (full) opacity is represented by the hexadecimal value FF. This already leaves us with 0xFF. Now, we just need to append our color string like this:

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

可以选择是否将字母大写：

The letters can by choice be capitalized or not:

const color = const Color(0xFFB74093);

---

从Dart 2.6.0 开始，您可以创建扩展名 Color 类的a>，可让您使用十六进制颜色字符串创建 Color 对象：

---

Starting with Dart 2.6.0, you can create an extension for the Color class that lets you use hexadecimal color strings to create a Color object:

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 方法也可以在 mixin 或 class 中声明，因为 HexColor 名称需要明确指定才能使用，但是扩展名对于 toHex 方法很有用，该方法可以隐式使用。下面是一个示例：

The fromHex method could also be declared in a mixin or class because the HexColor name needs to be explicitly specified in order to use it, but the extension is useful for the toHex method, which can be used implicitly. Here is an example:

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

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

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

这里的许多其他答案显示了如何像上面我一样从十六进制字符串动态创建 Color 。但是，这样做意味着颜色不能是 const 。

理想情况下，您将按照我在本文第一部分中说明的方式分配颜色答案，在大量实例化颜色时效率更高，通常是Flutter小部件。

Disadvantage of using hex strings

Many of the other answers here show how you can dynamically create a Color from a hex string, like I did above. However, doing this means that the color cannot be a const.
Ideally, you would assign your colors the way I explained in the first part of this answer, which is more efficient when instantiating colors a lot, which is usually the case for Flutter widgets.

这篇关于如何在Flutter中使用十六进制颜色字符串？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！