我如何转换一个十六进制的颜色字符串像#b74093在扑动的颜色?
我想在Dart中使用HEX颜色代码。
我如何转换一个十六进制的颜色字符串像#b74093在扑动的颜色?
我想在Dart中使用HEX颜色代码。
当前回答
一个不使用类的简单函数:
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 _colorFromHex(String hexColor) {
final hexCode = hexColor.replaceAll('#', '');
return Color(int.parse('FF$hexCode', radix: 16));
}
你可以这样使用它:
Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");
由于Color构造函数不支持十六进制字符串,所以我们应该寻找其他替代方法。
有几种可能性:
1-第一个是创建一个小函数,允许您将颜色十六进制字符串转换为颜色对象。
代码:
Color colorFromHex(String hexColor) {
final hexCode = hexColor.replaceAll('#', '');
if (hexColor.length == 6) {
hexColor = 'FF' + hexColor; // FF as the opacity value if you don't add it.
}
return Color(int.parse('FF$hexCode', radix: 16));
}
用法:
Container(
color: colorFromHex('abcdff'),
child: Text(
'Never stop learning',
style: TextStyle(color: colorFromHex('bbffffcc')),
),
)
2-第二种可能是使用增压包。supercharge为所有Flutter开发人员带来了Kotlin等语言的所有舒适特性。
添加附加依赖:^1.X。X(找到最新版本)到你的项目,并开始在所有地方使用supercharge:
import 'package:supercharged/supercharged.dart';
现在,将任何字符串转换为颜色
代码:
"#ff00ff".toColor(); // Painless hex to color
"red".toColor(); // Supports all web color names
你也可以使用六色包装,这也是很棒的。
在文件中添加此函数
Color parseColor(String color) {
String hex = color.replaceAll("#", "");
if (hex.isEmpty) hex = "ffffff";
if (hex.length == 3) {
hex = '${hex.substring(0, 1)}${hex.substring(0, 1)}${hex.substring(1, 2)}${hex.substring(1, 2)}${hex.substring(2, 3)}${hex.substring(2, 3)}';
}
Color col = Color(int.parse(hex, radix: 16)).withOpacity(1.0);
return col;
}
然后像-一样使用它
Container(
color: parseColor("#b74093")
)
//调用这一行来设置颜色 颜色:HexColor (HexColor.Primarycolor)
我已经创建了一个类HexColor和玷污所有的颜色在这个类。这是100%工作的代码
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);
}
static var Primarycolor="FF3E3F";
static var Accentcolor="b74093";
static var white="b74093";
static var black="b74093";
HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}
在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小部件通常就是这种情况。