如何在Dart中按色相对8位ARGB整数颜色列表排序？

你有一个8位ARGB整数颜色列表：

List<int> listOfColors = [-2350809, -5980676, -8722497, -2380289, -30596, -272549, -18312];

需求是按色相排序（红色调从深到浅连续排列，接着是绿色调、蓝色调等），已经能将颜色转换为HSV格式，但不清楚排序逻辑，以下是具体解决方向：

核心思路 #

利用HSV颜色模型中的**色相（Hue）作为排序的核心依据，色相值范围是0-360，对应红→橙→黄→绿→青→蓝→紫的色彩顺序；同色相的颜色，再通过明度（Value）或饱和度（Saturation）**实现深浅排序（深到浅对应明度降序）。

具体实现步骤 #

1. 转换为HSV颜色对象：你已经用到的HSVColor.fromColor(Color(colorInt))可以完成ARGB到HSV的转换，这是排序的基础。
2. 自定义排序规则：在List.sort()方法中传入比较函数，先按色相升序排列，色相相同时按明度降序排列：
3. 完整代码示例：

import 'package:flutter/material.dart';

void main() {
  List<int> listOfColors = [-2350809, -5980676, -8722497, -2380289, -30596, -272549, -18312];
  
  // 按色相+明度排序
  listOfColors.sort((a, b) {
    final hsvA = HSVColor.fromColor(Color(a));
    final hsvB = HSVColor.fromColor(Color(b));
    
    // 第一步：按色相升序，实现红→绿→蓝的色彩顺序
    final hueDiff = hsvA.h.compareTo(hsvB.h);
    if (hueDiff != 0) return hueDiff;
    
    // 第二步：色相相同时，按明度降序，实现同色调从深到浅
    return hsvB.v.compareTo(hsvA.v);
  });
  
  // 输出验证结果
  for (final color in listOfColors) {
    final hsv = HSVColor.fromColor(Color(color));
    print("ARGB: $color | H: ${hsv.h.toStringAsFixed(2)}, V: ${hsv.v.toStringAsFixed(2)}");
  }
}

进阶调整 #

如果需要同色调内的排序更精准（比如优先饱和度高的深色），可以在色相相同后先按饱和度降序，再按明度降序：

listOfColors.sort((a, b) {
  final hsvA = HSVColor.fromColor(Color(a));
  final hsvB = HSVColor.fromColor(Color(b));
  
  final hueDiff = hsvA.h.compareTo(hsvB.h);
  if (hueDiff != 0) return hueDiff;
  
  // 优先按饱和度降序
  final saturationDiff = hsvB.s.compareTo(hsvA.s);
  if (saturationDiff != 0) return saturationDiff;
  
  // 再按明度降序
  return hsvB.v.compareTo(hsvA.v);
});

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