我如何转换一个十六进制的颜色字符串像#b74093在扑动的颜色?
我想在Dart中使用HEX颜色代码。
我如何转换一个十六进制的颜色字符串像#b74093在扑动的颜色?
我想在Dart中使用HEX颜色代码。
当前回答
import 'package:flutter/material.dart';
class HexToColor extends Color{
static _hexToColor(String code) {
return int.parse(code.substring(1, 7), radix: 16) + 0xFF000000;
}
HexToColor(final String code) : super(_hexToColor(code));
}
导入新类并像这样使用它:
HexToColor('#F2A03D')
其他回答
这就是我的解决方案:
String hexString = "45a3df";
Color(int.parse("0xff${hexString}"));
这是唯一不需要额外步骤的方法。
在Flutter中,Color类只接受整数作为参数,或者可以使用fromARGB和fromRGBO命名的构造函数。
因此,我们只需要将字符串#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开始,你可以为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方法也可以在mixin或类中声明,因为HexColor名称需要显式指定才能使用它,但是扩展对于可以隐式使用的toHex方法很有用。这里有一个例子:
void main() {
final Color color = HexColor.fromHex('#aabbcc');
print(color.toHex());
print(const Color(0xffaabbcc).toHex());
}
使用十六进制字符串的缺点
这里的许多其他答案展示了如何从十六进制字符串动态创建Color,就像我上面所做的那样。然而,这样做意味着颜色不能是const。 理想情况下,您应该按照我在回答的第一部分中解释的方式分配颜色,这种方式在大量实例化颜色时更有效,Flutter小部件通常就是这种情况。
在Flutter中,要从带alpha的RGB创建颜色,请使用:
return new Container(
color: new Color.fromRGBO(0, 0, 0, 0.5),
);
如何使用十六进制颜色:
return new Container(
color: new Color(0xFF4286f4),
);
// 0xFF -> the opacity (FF for opaque)
// 4286f4 -> the hexadecimal color
不透明的十六进制颜色:
return new Container(
color: new Color(0xFF4286f4).withOpacity(0.5),
);
//或改变“FF”值
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
要了解更多信息,请参阅官方文档页,Color类- dart:ui库- dart API。
文件utils.dart
///
/// Convert a color hex-string to a Color object.
///
Color getColorFromHex(String hexColor) {
hexColor = hexColor.toUpperCase().replaceAll('#', '');
if (hexColor.length == 6) {
hexColor = 'FF' + hexColor;
}
return Color(int.parse(hexColor, radix: 16));
}
示例使用
Text(
'Hello, World!',
style: TextStyle(
color: getColorFromHex('#aabbcc'),
fontWeight: FontWeight.bold,
)
)
你可以写一个小的控制台工具来转换字符串:
import 'dart:convert';
import 'dart:io';
void main() {
while (true) {
var line = stdin.readLineSync(encoding: utf8);
print(HexColor.fromHex(line!));
}
}
class HexColor {
static fromHex(String hexString) {
final buffer = StringBuffer();
if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
buffer.write(hexString.replaceFirst('#', ''));
return int.parse(buffer.toString(), radix: 16);
}
}