提问者:小点点

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


如何在Flutter中将#B74093这样的十六进制颜色字符串转换为color

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


共2个答案

匿名用户

在Flutter中,color类只接受整数作为参数,或者可以使用命名构造函数fromargbfromrgbo

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

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

字母可以选择大写或不大写:

const color = const Color(0xFFB74093);

从Dart2.6.0开始,您可以为color类创建一个扩展,它允许您使用十六进制颜色字符串创建一个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方法也可以在mixinclass中声明,因为需要显式指定hexcolor名称才能使用它,但扩展名对tohex方法很有用,它可以隐式使用。这里有一个例子:

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

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

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

匿名用户

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"); // if you wish to use ARGB format