如何通过添加 if-else 语句动态改变结果文本的颜色？目前我无法在文本小部件中添加 if-else

Question

这是我将结果文本发送到结果的地方 class:

calculateButton(
                    btnColor: _BtnColor,
                    txtColor: Colors.white,
                    text: buttonText,
                    width: ScreenUtil().screenWidth,
                    height: 0.06.sh,
                    size: 21.0.ssp,
                    callback: () {
                      BMILogic calculate = BMILogic(height: height, weight: weight);

                      Navigator.push(context, MaterialPageRoute(
                          builder: (context) => BMIResult(
                            bmiResult: calculate.calculateBMI(),
                            bmiDisplay: calculate.displayBMIinText(),
                            bmiInText: calculate.printResult(),
                          )));
                    }
                ),

我将上面的代码发送到结果屏幕：结果 Class:

Container(
                  color: _Containercolor,
                  width: ScreenUtil().screenWidth,
                  height: 0.6.sh,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      text(text1: bmiDisplay, size: 22.ssp,
                          if(bmiDisplay == "Overweight"){ // here for 'if' it is dispaying as Expected an identifier. Expected to find ')'
                            color: _red,
                            }
                          ),
                      text(text1: bmiResult, size: 44.ssp, color: _white),
                      text(text1: bmiInText, size: 22.ssp, color: _white)
                    ],
                  ),
                )

这是我定义逻辑的地方：

class BMILogic{

  final int height;
  final int weight;
  double _bmi;

  BMILogic({this.height, this.weight});

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

  String displayBMIinText(){
    return (_bmi >= 25) ? "Overweight"
        : (_bmi > 18.5) ? "Normal"
        : "Underweight" ;
  }

  String printResult(){
    if (_bmi >= 25){
      return 'You have a higher than normal body weight. Try to avoid carbs, sugar and exercise more.';
    }else if (_bmi >= 18.5) {
      return 'You have a normal body weight. Maintain the same, Good job!';
    } else {
      return 'You have a lower than normal body weight. Eat a bit more and exercise.';
    }
  }
}

我需要根据超重、体重不足和正常体重更改文本颜色。我怎样才能做到这一点，这是我坚持使用的应用程序的最后一部分。请查看代码。

Answer 1

简单的解决方案是在您的代码中使用三元运算符：

color: bmiDisplay == 'Overweight'? Colors.red : bmiDisplay == 'Underweight'?  Colors.yellow : Colors.green

Answer 2

我会为您的 BMI 建议另一种实施方式 class:

enum BmiType {
  underweight,
  normal,
  overweight,
}

extension BmiTypeX on BmiType {
  String get name => describeEnum(this);
}

class BMI {

  final int height;
  final int weight;

  double get score => weight / pow(height / 100, 2);
  String get scoreStr => score.toStringAsFixed(1);

  BmiType get bmiType => score >= 25
      ? BmiType.overweight
      : score > 18.5
          ? BmiType.normal
          : BmiType.underweight;
  String get bmiTypeStr => bmiType.name;

  String get bmiDescription {
    switch (bmiType) {
      case BmiType.overweight:
        return 'You have a higher than normal body weight. Try to avoid carbs, sugar and exercise more.';
      case BmiType.normal:
        return 'You have a normal body weight. Maintain the same, Good job!';
      case BmiType.underweight:
        return 'You have a lower than normal body weight. Eat a bit more and exercise.';
      default:
        return 'Unknown type';
    }
  }

  BMI({@required this.height, @required this.weight});
}

我定义了一个 BmiType 枚举，而不是计算 BMI 的方法，我只使用吸气剂。

然后您可以按如下方式为您的 BMI 定义颜色：

Map<BmiType, Color> colors = {
  BmiType.overweight: Colors.red.shade300,
  BmiType.normal: Colors.green.shade300,
  BmiType.underweight: Colors.blue.shade300,
}

并且您的 BMIDisplay 小部件已简化为：

class BMIDisplay extends StatelessWidget {
  final BMI bmi;

  const BMIDisplay({
    Key key,
    this.bmi,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(bmi.scoreStr,
            style: TextStyle(fontSize: 22, color: colors[bmi.bmiType])),
        Text(bmi.bmiTypeStr, style: TextStyle(fontSize: 44)),
        Text(bmi.bmiDescription, style: TextStyle(fontSize: 22)),
      ],
    );
  }
}

完整源代码：

import 'dart:math' show pow;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(16.0),
        child: BMIDisplay(bmi: BMI(height: 180, weight: 78)),
      ),
    );
  }
}

Map<BmiType, Color> colors = {
  BmiType.overweight: Colors.red.shade300,
  BmiType.normal: Colors.green.shade300,
  BmiType.underweight: Colors.blue.shade300,
};

class BMIDisplay extends StatelessWidget {
  final BMI bmi;

  const BMIDisplay({
    Key key,
    this.bmi,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          bmi.scoreStr,
          style: TextStyle(fontSize: 22, color: colors[bmi.bmiType]),
        ),
        const SizedBox(height: 16.0),
        Text(
          bmi.bmiTypeStr,
          style: TextStyle(fontSize: 44),
        ),
        const SizedBox(height: 16.0),
        Text(
          bmi.bmiDescription,
          style: TextStyle(fontSize: 22),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

enum BmiType {
  underweight,
  normal,
  overweight,
}

extension BmiTypeX on BmiType {
  String get name => describeEnum(this);
}

class BMI {
  final int height;
  final int weight;

  double get score => weight / pow(height / 100, 2);
  String get scoreStr => score.toStringAsFixed(1);

  BmiType get bmiType => score >= 25
      ? BmiType.overweight
      : score > 18.5
          ? BmiType.normal
          : BmiType.underweight;
  String get bmiTypeStr => bmiType.name;

  String get bmiDescription {
    switch (bmiType) {
      case BmiType.overweight:
        return 'You have a higher than normal body weight. Try to avoid carbs, sugar and exercise more.';
      case BmiType.normal:
        return 'You have a normal body weight. Maintain the same, Good job!';
      case BmiType.underweight:
        return 'You have a lower than normal body weight. Eat a bit more and exercise.';
      default:
        return 'Unknown type';
    }
  }

  BMI({@required this.height, @required this.weight});
}

如何通过添加 if-else 语句动态改变结果文本的颜色？目前我无法在文本小部件中添加 if-else

How to change the color of result text dynamically by adding if-else statement? currently I am not able to add if-else inside text widget

if-statement

dart

flutter

flutter-test

flutter-layout

完整源代码：