Flutter中为三元运算符添加第三个选项的实现方法

针对三个页面的颜色切换需求，你可以用以下几种方法替代原来的二元三元运算符：

1. 嵌套三元运算符（最直接但可读性一般） #

直接在原有三元结构里嵌套另一个三元，判断第三个页面的情况：

Container(
  decoration: BoxDecoration(
    color: (page == _currentPage)
        ? Colors.blue.shade800
        : (page == 1) // 替换成你实际用来标记第二个页面的变量值
            ? Colors.green.shade600
            : Colors.orange.shade500, // 第三个页面的目标颜色
  ),
)

2. 使用Switch表达式（Dart 3.0+推荐，可读性更好） #

如果你的Dart版本是3.0及以上，用switch表达式结构更清晰，还能处理默认情况：

Container(
  decoration: BoxDecoration(
    color: switch(page) {
      0 => Colors.blue.shade800, // 第一个页面的颜色
      1 => Colors.green.shade600, // 第二个页面的颜色
      2 => Colors.orange.shade500, // 第三个页面的颜色
      _ => Colors.grey.shade400, // 未匹配到页面时的默认颜色
    },
  ),
)

3. 用Map映射（扩展更方便） #

如果后续可能增加更多页面，用Map维护页面与颜色的对应关系会更灵活：

// 先定义页面-颜色映射表
final pageColorMap = {
  0: Colors.blue.shade800,
  1: Colors.green.shade600,
  2: Colors.orange.shade500,
};

// 在Container中调用
Container(
  decoration: BoxDecoration(
    color: pageColorMap[page] ?? Colors.grey.shade400, // 找不到对应值时用默认色
  ),
)

其中switch表达式和Map映射的可读性、扩展性都优于嵌套三元，更推荐使用这两种方案。

内容的提问来源于stack exchange，提问作者SEYRAM EMMANUEL AGBANYO