如何在 Flutter 中为文本着色

Posted 2023-02-23

【中文标题】如何在 Flutter 中为文本着色

【英文标题】：How to color a text in Flutter

【发布时间】：2021-11-19 02:07:32

【问题描述】：

我试图用红色为我的超重和体重不足添加颜色。你能帮我告诉我该怎么做吗？

代码如下：

import 'dart:math';

class CalculatorBrain 
   CalculatorBrain(this.height, this.weight);

  final int height;
  final int weight;

  double _bmi;

  String calculateBMI() 
    _bmi = weight / pow(height / 100, 2);
    return _bmi.toStringAsFixed(1);
  

  String getResults()
    if (_bmi >= 25) 
      return 'Overweight';
     else if (_bmi > 18.5) 
      return 'Normal';
     else 
      return 'Underweight';
    
  

  String getInterpretation () 
    if (_bmi >= 25) 
      return 'You have a higher than normal weight. Try to exercise more.';
     else if (_bmi > 18.5) 
      return 'You have a normal body weight. Good job!';
     else 
      return 'You have a lower than normal body weight. You can eat a bit more.';
    
  

【问题讨论】：

请明确在超重和超重时要显示为红色的内容。

对于超重和减重我想使用红色

【参考方案1】：

您可以参考下面的共享代码并根据您的要求进行更改

Widget getTextWidget(String text)
   Color textColor;
   if(text.toLowerCase().contains("overweight") || text.toLowerCase().contains("underweight"))
       textColor=Colors.red;
   else textColor=Colors.black;

   return Text(text, 
          style:TextStyle(color: textColor));

在您要显示文本的窗口小部件树中调用 getTextWidget("your text here") 窗口小部件函数

【参考方案2】：

当你声明一个Text 小部件时，你也可以通过TextStyle 类声明它的style。

这里是一个例子：

Text(
 "Hello world!",
  style: TextStyle(
    color: Colors.red,
  )
)

您可以为文本声明其他样式，例如fontWeight、textAlign 等。您可以在docs查看所有内容

在您的情况下，您可以创建另一个返回 TextStyle 或仅返回文本颜色的函数。

Color getResultColor()
    if (_bmi >= 25) 
      return Colors.red;
     else if (_bmi > 18.5) 
      return Colors.black;
     else 
      return Colors.red;
    
  

最后，你的Text 会是这样的：

Text(
 getResults(),
  style: TextStyle(
    color: getResultsColor(),
  )
)

【讨论】：

嘿！我已经更新了我的代码，你能告诉我如何在我的代码中使用它吗？

【参考方案3】：

在颤动中，字符串本身不能有颜色。如果要添加可见颜色，可以使用 Text 小部件。文本小部件需要一个字符串，然后你也可以给它一些样式：

return Text(
  getResults(),
    style: TextStyle(
      color: Colors.red,
   ),
);

【讨论】：

你能告诉我如何在我的代码中使用它吗？如果我尝试以下代码，我会遇到错误？

好的，你能描述一下代码执行时的错误吗？

实际上，我在我的应用程序中定义了一个常量页面，我在其中定义了所有常量值，但是当我尝试导入 getResultsColor 代码时，它说当我创建我时已经在我的大脑页面中完成了，它不会从那里导入代码： const kResultTextStyle = TextStyle(color: getResultsColor(), fontSize: 22.0, fontWeight: FontWeight.bold, );

问题是一个常数，顾名思义，自代码执行开始以来始终相同且不能变化。问题是，当你调用一个函数时，它不是常量，因为如果函数条件例如_bmi 发生变化，常量的值也应该这样做，但它不是因为它是一个常量。因此，您可以使用 final，而不是使用 const。代码：最终 kResultTextStyle = TextStyle( color: getResultsColor(), fontSize: 22.0, fontWeight: FontWeight.bold, );希望对你有帮助，抱歉回答晚了，继续学习flutter?