Flutter中如何将三位十六进制颜色字符串转换为Color对象

失效原因说明 #

你之前使用Color(0xFF0ff)无效是因为：Flutter的Color类要求传入的是8位十六进制整数，结构为0x + 2位不透明度值 + 6位RGB色值，而你传入的0xFF0ff仅为5位，结构不符合要求。

转换规则 #

三位十六进制色值#RGB的标准转换逻辑是：将R、G、B三个通道的单个字符各重复1次，扩展为6位的#RRGGBB格式，再补全不透明度前缀即可。
以你提到的#0ff为例：

• R通道字符0重复为00
• G通道字符f重复为ff
• B通道字符f重复为ff
• 扩展后得到6位色值00ffff，加上默认不透明前缀0xFF，最终传入Color的值为0xFF00ffff

具体实现方案 #

方案1：手动转换（单次使用场景） #

直接按上述规则扩展后传入即可，示例：

// #0ff 转换后的写法
final cyanColor = Color(0xFF00ffff);

方案2：通用工具方法（批量处理场景） #

可以封装通用函数同时支持3位、6位十六进制色值字符串的转换：

Color hexToColor(String hexStr) {
  // 移除色值中的#号
  final cleanHex = hexStr.replaceFirst('#', '').toUpperCase();
  String fullHex;

  if (cleanHex.length == 3) {
    // 处理3位色值：逐字符重复扩展为6位
    fullHex = '${cleanHex[0]*2}${cleanHex[1]*2}${cleanHex[2]*2}';
  } else if (cleanHex.length == 6) {
    fullHex = cleanHex;
  } else {
    throw ArgumentError('色值格式错误，仅支持#RGB或#RRGGBB格式');
  }

  // 拼接不透明前缀后转整数传入Color
  return Color(int.parse('0xFF$fullHex'));
}

使用示例：

final color1 = hexToColor('#0ff'); // 等价于Color(0xFF00ffff)
final color2 = hexToColor('#f0f0f0'); // 支持6位色值直接转换

内容的提问来源于stack exchange，提问作者Balaji