Flutter如何在Text组件中嵌入if条件语句实现不同文本内容展示

结论 #

可以在Text()组件的文本参数中使用Dart的条件表达式实现需求，无需重复定义相同样式的Text组件。

实现方法 #

你可以直接在Text的文本参数位使用三目运算符完成多条件判断，修改后的代码如下：

children: [
  Text(
    // 条件判断逻辑
    browns && blacks && whites 
        ? 'Proporção: $browns agutis : $blacks pretos : $whites albinos'
        : yellows && blacks && whites 
            ? 'Proporção: $yellows dourados : $blacks pretos : $browns chocolates'
            : '', // 可根据需求修改两个条件都不满足时的兜底文本
    style: TextStyle(
        fontFamily: 'courier',
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
        height: 2.5,
        letterSpacing: 0.7),
  ),
],

补充说明 #

如果你觉得嵌套三目可读性不佳，也可以提前在外部定义变量存储最终显示的文本，再传入Text组件：

// 提前在build方法内定义显示文本
String get displayText {
  if (browns && blacks && whites) {
    return 'Proporção: $browns agutis : $blacks pretos : $whites albinos';
  } else if (yellows && blacks && whites) {
    return 'Proporção: $yellows dourados : $blacks pretos : $browns chocolates';
  }
  return ''; // 兜底内容
}

// 组件中直接传入变量
children: [
  Text(
    displayText,
    style: TextStyle(
        fontFamily: 'courier',
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
        height: 2.5,
        letterSpacing: 0.7),
  ),
],

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