Flutter如何在单个Container内实现三种条件判断UI

问题描述 #

开发UI界面时，需要在同一个Container中切换展示三种状态。目前仅通过布尔变量makePayment实现了两种状态的切换，无法扩展到第三种。现有代码使用三元表达式控制Column切换：

bool makePayment = false;

makePayment ? Column( 
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [                                                   
    const Text('Quick actions'),
    const SizedBox(height: 16),
    Row(),
    Row()
  ])  : Column()

目标UI效果为点击触发不同状态切换，点击关闭按钮恢复初始状态。

解决方案 #

用枚举类型替代布尔变量，枚举可清晰定义三种互斥状态，避免多布尔变量的逻辑冲突。

1. 定义状态枚举

// 定义三种UI状态：初始、快速操作、支付
enum UIState { initial, quickActions, payment }
// 当前状态初始化为初始态
UIState currentState = UIState.initial;

2. 用Switch-Case实现状态切换UI

在Container中通过switch匹配当前状态，返回对应UI：

Container(
  child: switch(currentState) {
    UIState.initial => Column(
        // 初始状态UI，比如默认展示的内容
        children: [
          // 示例：添加触发切换的文本按钮
          GestureDetector(
            onTap: () => setState(() => currentState = UIState.quickActions),
            child: const Text('切换到快速操作'),
          )
        ],
      ),
    UIState.quickActions => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('Quick actions'),
          const SizedBox(height: 16),
          Row(
            children: [
              // 示例：支付按钮，切换到支付状态
              GestureDetector(
                onTap: () => setState(() => currentState = UIState.payment),
                child: const Text('去支付'),
              ),
              // 关闭按钮，回到初始状态
              GestureDetector(
                onTap: () => setState(() => currentState = UIState.initial),
                child: const Text('×'),
              )
            ],
          ),
          Row(/* 其他快速操作内容 */),
        ],
      ),
    UIState.payment => Column(
        // 支付状态UI，对应目标效果中的支付界面
        children: [
          const Text('支付界面'),
          // 关闭按钮，回到初始状态
          GestureDetector(
            onTap: () => setState(() => currentState = UIState.initial),
            child: const Text('×'),
          ),
          /* 支付相关输入、按钮等内容 */
        ],
      ),
  },
)

3. 状态切换逻辑

• 点击触发元素（如初始态的文本）：调用setState将currentState改为对应状态（如UIState.quickActions）
• 点击支付按钮：切换到UIState.payment
• 点击关闭按钮：切换回UIState.initial

优势说明 #

枚举类型的状态是互斥的，不会出现多个布尔变量同时为true的逻辑混乱问题，代码可读性和可维护性更强。

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