Q:

我如何在Flutter中把像"#b74093"这样的十六进制颜色字符串转换为Color ？

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

A1:

在Flutter中，Color类只接受整数作为参数，也可以使用命名构造函数fromARGB和fromRGBO。

因此我们只需要将字符串#b74093转换为一个整数值。另外，不透明度总是需要被指定的。
十进制255的不透明度用十六进制值FF表示。这让我们得到了0xFF。现在，我们只需要像这样附加我们的颜色字符串:

const color = const Color(0xffb74093);

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

const color = const Color(0xFFB74093);

从Dart 2.6.0开始，你可以为Color类创建一个扩展，可以让你使用十六进制颜色字符串来创建一个Color对象：

extension HexColor on Color {
  /// 字符串的格式为 "aabbcc "或 "faabbcc"，并有一个可选的前置 "#"
  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));
  }

  /// 如果[leadingHashSign]设置为 "true"（默认为 "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 或类中声明，因为HexColor名称需要显式指定才能使用，但扩展对toHex方法很有用，它可以隐式使用。下面是一个例子:

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

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

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

其他答案显示了如何从一个十六进制字符串动态地创建一个Color，就像我上面做的那样。然而，这样做意味着颜色不能是一个const。
理想情况下，你会用我在这个答案的第一部分解释的方式来分配颜色，这在大量实例化颜色时更有效率，这通常是Flutter widgets的情况。

A2:

Color类期望一个ARGB整数。由于你试图用RGB值来使用它，所以将它表示为int，并在其前缀上0xff。

Color mainColor = Color(0xffb74093);

如果你对此感到恼火而仍然希望使用字符串，则可以扩展Color并添加字符串构造函数：

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

用法

Color color1 = HexColor("b74093");
Color color2 = HexColor("#b74093");
Color color3 = HexColor("#88b74093"); // 如果你想使用ARGB格式

视频课程

如需要获取博主完整的Flutter全栈式开发课程，请 点击跳转

关注我的公众号：编程之路从0到1