Flutter如何在TextSpan内部调用checkProportion()实现动态样式配置

这个需求完全可以实现，TextSpan的text、style等所有属性都支持传入函数的返回值，只要返回值类型匹配属性要求即可，你可以按以下步骤实现：

1. 实现checkProportion()颜色判定函数 #

按照你给出的颜色规则，先定义函数逻辑：

import 'package:flutter/material.dart';

Color checkProportion(String resultText, [dynamic predominantParam]) {
  // 若需要用到原代码中的predominant参数，可以放到入参里调用
  if (resultText.contains('A') && resultText.contains('P')) {
    return Colors.brown;
  } else if (resultText.contains('A') && resultText.contains('pp')) {
    return Colors.black;
  } else if (resultText.contains('aa')) {
    return Colors.white;
  }
  // 兜底默认颜色，可自行调整
  return Colors.grey;
}

2. 在TextSpan中直接调用函数 #

修改你现有的RichText代码，在需要的位置直接调用函数即可：

child: RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: widget.result + '  ',
        style: TextStyle(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          // 直接调用自定义函数，传入需要的参数
          color: checkProportion(widget.result, widget.predominant),
          height: 2.5,
          letterSpacing: 0.7,
        ),
      ),
      // 其余TextSpan子项代码
    ],
  ),
)

注意事项 #

• 如果需要动态调整TextSpan的文本内容，直接把text属性的值替换为checkProportion()返回的字符串即可，只要函数返回String类型就可以正常识别
• 当widget.result等参数发生变化时，只要所属widget触发重绘，文本颜色、内容会自动按照规则更新，不需要额外监听
• 你可以根据需求拓展checkProportion()的入参和逻辑，适配更多动态规则

效果参考 #

• 示例1：
• 示例2：

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