Answers:
在Flutter中,Color
该类仅接受整数作为参数,或者可以使用命名的构造函数fromARGB
和fromRGBO
。
因此,我们只需要将字符串转换为#b74093
整数值即可。此外,我们需要尊重始终需要指定不透明度。
255
(完全)不透明度由十六进制值表示FF
。这已经给我们留下了0xFF
。现在,我们只需要像这样添加颜色字符串即可:
const color = const Color(0xffb74093); // Second `const` is optional in assignments.
可以选择是否将字母大写:
const color = const Color(0xFFB74093);
从Dart开始2.6.0
,您可以创建一个extension
为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
或中声明class
因为HexColor
要使用该名称需要显式指定名称,但是该扩展名对该toHex
方法很有用,可以隐式使用。这是一个例子:
void main() {
final Color color = HexColor.fromHex('#aabbcc');
print(color.toHex());
print(const Color(0xffaabbcc).toHex());
}
这里的许多其他答案都显示了如何Color
像上面我一样从十六进制字符串动态创建a 。但是,这样做意味着颜色不能为const
。
理想情况下,您将按照我在此答案第一部分中说明的方式分配颜色,这在大量实例化颜色时效率更高(通常是Flutter小部件)。
HexColor.fromHex
可以,但Color.fromHex
不能)。
0x
只是表示后面的数字将被解析为十六进制🙃
本Color
类期待一个ARGB整数。由于您尝试将其与RGB
value 一起使用,因此将其表示为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
如果要使用#123456格式的十六进制颜色代码,则非常易于使用,请创建Color类型的A变量,并为其分配以下值。
Color myHexColor = Color(0xff123456)
// her you notice I use the 0xff and that is opacity or transparency of the color
// and you can also change these value .
使用myhexcolor,就可以开始使用了。
如果要直接从十六进制代码更改颜色的不透明度,则将0xff中的ff值更改为下表中的相应值。
十六进制不透明度值
100%— FF
95%-F2
90%— E6
85%— D9
80%— CC
75%—高炉
70%— B3
65%— A6
60%— 99
55%— 8摄氏度
50%— 80
45%— 73
40%— 66
35%— 59
30%— 4D
25%— 40
20%— 33
15%— 26
10%— 1A
5%— 0天
0%-00
要将十六进制String转换为int,请执行以下操作:
int hexToInt(String hex)
{
int val = 0;
int len = hex.length;
for (int i = 0; i < len; i++) {
int hexDigit = hex.codeUnitAt(i);
if (hexDigit >= 48 && hexDigit <= 57) {
val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
} else if (hexDigit >= 65 && hexDigit <= 70) {
// A..F
val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
} else if (hexDigit >= 97 && hexDigit <= 102) {
// a..f
val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
} else {
throw new FormatException("Invalid hexadecimal value");
}
}
return val;
}
通话示例:
Color color=new Color(hexToInt("FFB74093"));
一个不使用类的简单函数:
Color _colorFromHex(String hexColor) {
final hexCode = hexColor.replaceAll('#', '');
return Color(int.parse('FF$hexCode', radix: 16));
}
您可以像这样使用它:
Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");
Color(int.parse('#000000'.replaceAll('#', '0xff')))
还有另一种解决方案。如果您将颜色存储为普通的十六进制字符串,并且不想为其添加透明度(以FF开头):1)将十六进制字符串转换为int要将十六进制字符串转换为整数,请执行以下操作之一:
var myInt = int.parse(hexString, radix: 16);
要么
var myInt = int.parse("0x$hexString");
作为0x(或-0x)前缀将使int.parse默认为基数16。
2)通过代码为您的颜色添加不透明度
Color color = new Color(myInt).withOpacity(1.0);
ThemeData
。
在Flutter中,它使用RGB从带有alpha的颜色创建颜色,使用
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 hex-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
有关更多信息,请访问官方链接https://api.flutter.dev/flutter/dart-ui/Color-class.html
///
/// 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,
)
)
供一般参考。有一种使用Supercharged库的简单方法。尽管您可以在所有提到的解决方案中使用扩展方法,但是您会找到实用的用户库工具包。
"#ff00ff".toColor(); // painless hex to color
"red".toColor(); // supports all web color names
比较容易,对吧?
"#b74093"
?好...
int getColorHexFromStr(String colorStr)
{
colorStr = "FF" + colorStr;
colorStr = colorStr.replaceAll("#", "");
int val = 0;
int len = colorStr.length;
for (int i = 0; i < len; i++) {
int hexDigit = colorStr.codeUnitAt(i);
if (hexDigit >= 48 && hexDigit <= 57) {
val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
} else if (hexDigit >= 65 && hexDigit <= 70) {
// A..F
val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
} else if (hexDigit >= 97 && hexDigit <= 102) {
// a..f
val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
} else {
throw new FormatException("An error occurred when converting a color");
}
}
return val;
}
您可以单击Color Widget,它会在更深入的信息中告诉您这些字母的含义。您也可以使用Color.fromARGB()方法来创建自定义颜色,这对我来说要容易得多。使用Flutter Doctor拾色器网站可以为扑打应用选择所需的任何颜色。
您可以使用此包from_css_color得到Color
一个十六进制字符串的出来。它支持三位和六位RGB十六进制表示法。
Color color = fromCSSColor('#ff00aa')
为了优化起见,请为每种颜色创建一次Color实例,并将其存储在某个地方以备后用。