如何使用 Flutter 根据其结果更改文本颜色？答案

【问题标题】：How to change text color based on its result using Flutter?如何使用 Flutter 根据其结果更改文本颜色？
【发布时间】：2021-11-08 03:15:52
【问题描述】：

我想根据文本的值更改文本颜色，但我不知道该怎么做，因为值可能会改变。

例如，如果文本是'AABB'，那么它应该具有特定的颜色。如果是 'AABb' 应该是另一种颜色（'AABb' = 'AAbB' 因为大写字母的顺序无关紧要）等等...

以下是这些文本（每一个都是结果）在屏幕上的显示方式：

 body: Center(
          child: Container(
            child: Text(
              '${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} ',
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.black,
                height: 2.5,
                letterSpacing: 0.7,
              ), 
            ),

【问题讨论】：

标签： android flutter dart mobile

【解决方案1】：

要为不同的单词设置不同样式的文本，可以使用 RichText，它允许您将文本划分为具有自己样式的 textSpan。要根据输入更改颜色，您可以使用函数根据文本获取颜色：


Color getTextColor(String text) {
   // Some logic
   return TheRightColor;
}
body: Center(
          child: Container(
            child: RichText(
                text: TextSpan(children: [
                  TextSpan(
                      text: "${widget.result1} ",
                      style: TextStyle(fontSize: 20.0,
                      color: getTextColor(widget.result1),
                      height: 2.5,
                      letterSpacing: 0.7,)),
                  TextSpan(
                      text: "${widget.result2} ",
                      style: TextStyle(fontSize: 20.0,
                      color: getTextColor(widget.result2),
                      height: 2.5,
                      letterSpacing: 0.7,))
                ]),
                //...
      )));

另外，如果你想简化代码，你应该把 widget.result 放在一个列表中，并使用 for 循环来显示 TextSpans

【讨论】：

这段代码唯一的问题是结果之间没有空格了。它们紧挨着。
已修复。您可以在文本跨度的末尾放置一个空格，它可以根据需要工作。