Flutter中如何给文本设置颜色？BMI计算结果超重偏瘦文本标红实现

你可以通过两种方案实现需求，优先推荐第一种，逻辑和视图分层更清晰：

方案1：修改CalculatorBrain类新增颜色判断逻辑 #

在现有逻辑层里新增对应结果的颜色获取方法，和现有BMI判断规则对齐，后续修改规则只需要调整逻辑层代码即可，无需改动UI层。

第一步：修改CalculatorBrain代码 #

修改后的完整代码如下：

import 'dart:math';
import 'package:flutter/material.dart'; // 导入依赖使用Color类

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.';
    }
  }

  // 新增：获取结果文本对应的颜色
  Color getResultColor() {
    if (_bmi >= 25 || _bmi <= 18.5) {
      return Colors.red; // 超重/偏瘦返回红色
    } else {
      return Colors.green; // 正常返回绿色，也可以根据需求改成其他颜色
    }
  }
}

第二步：UI层调用 #

在你显示结果的Text组件中直接调用该方法设置颜色即可，示例代码：

// 假设你已经实例化了CalculatorBrain对象，名为calc
Text(
  calc.getResults(),
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: calc.getResultColor(), // 直接调用方法获取颜色
  ),
)

方案2：无需修改逻辑层，直接在UI层判断 #

如果你不想改动现有逻辑层代码，可以直接在UI层根据返回的结果字符串判断颜色，实现更简单：

// 假设你已经获取到了getResults()的返回值，名为result
Text(
  result,
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: (result == 'Overweight' || result == 'Underweight') ? Colors.red : Colors.green,
  ),
)

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