Flutter开发中如何根据文本的实际值动态调整文字的显示颜色

实现方案 #

要实现根据文本值动态修改文字颜色，需做以下两步改造：

1. 替换原有的单Text组件为RichText，支持为不同文本片段单独设置样式
2. 封装归一化颜色匹配方法，消除字母顺序对匹配结果的影响，保证AABb和AAbB判定为同一类，匹配相同颜色

1. 编写颜色匹配方法 #

// 传入原始文本，返回对应显示颜色
Color getTextColor(String text) {
  // 归一化处理：对字符排序，消除顺序影响，AABb和AAbB处理后得到的key完全一致
  var chars = text.split('')..sort();
  String normalizedKey = chars.join('');
  
  // 按照业务需求配置不同key对应的颜色
  switch(normalizedKey) {
    case 'AABB':
      return Colors.red; // 可替换为你需要的AABB对应颜色
    case 'AABb':
      return Colors.green; // 可替换为你需要的AABb对应颜色
    // 按需添加其余场景的颜色映射规则
    default:
      return Colors.black; // 未匹配到规则时的默认颜色
  }
}

2. 替换原有渲染代码 #

将原先单个Text组件替换为RichText，为每个结果单独设置颜色：

body: Center(
  child: Container(
    child: RichText(
      text: TextSpan(
        // 公共样式保留原有配置
        style: TextStyle(
          fontSize: 20.0,
          height: 2.5,
          letterSpacing: 0.7,
        ),
        children: [
          TextSpan(text: '${widget.result} ', color: getTextColor(widget.result)),
          TextSpan(text: '${widget.result2} ', color: getTextColor(widget.result2)),
          TextSpan(text: '${widget.result3} ', color: getTextColor(widget.result3)),
          TextSpan(text: '${widget.result4} ', color: getTextColor(widget.result4)),
          TextSpan(text: '${widget.result5} ', color: getTextColor(widget.result5)),
          TextSpan(text: '${widget.result6} ', color: getTextColor(widget.result6)),
          TextSpan(text: '${widget.result7} ', color: getTextColor(widget.result7)),
          TextSpan(text: '${widget.result8} ', color: getTextColor(widget.result8)),
          TextSpan(text: '${widget.result9} ', color: getTextColor(widget.result9)),
          TextSpan(text: '${widget.result10} ', color: getTextColor(widget.result10)),
          TextSpan(text: '${widget.result11} ', color: getTextColor(widget.result11)),
          TextSpan(text: '${widget.result12} ', color: getTextColor(widget.result12)),
          TextSpan(text: '${widget.result13} ', color: getTextColor(widget.result13)),
          TextSpan(text: '${widget.result14} ', color: getTextColor(widget.result14)),
          TextSpan(text: '${widget.result15} ', color: getTextColor(widget.result15)),
          TextSpan(text: '${widget.result16} ', color: getTextColor(widget.result16)),
        ],
      ),
    ),
  ),
)

优化写法（可选） #

如果后续结果数量会变动，可以把所有结果存入列表循环生成TextSpan，减少重复代码：

// 统一收集所有结果
List<String> resultList = [
  widget.result, widget.result2, widget.result3, widget.result4,
  widget.result5, widget.result6, widget.result7, widget.result8,
  widget.result9, widget.result10, widget.result11, widget.result12,
  widget.result13, widget.result14, widget.result15, widget.result16
];

// 批量生成TextSpan
List<TextSpan> spanList = resultList.map((item) {
  return TextSpan(
    text: '$item ',
    color: getTextColor(item)
  );
}).toList();

// 直接将spanList传给RichText的children参数即可

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