Flutter中如何让if判断语句可被Obx正常监听？

Obx响应式监听生效的核心逻辑 #

Obx的依赖收集机制只会捕获自身传入的闭包执行过程中直接访问的.obs响应式变量，只有被捕获的变量变更时，才会触发Obx闭包重新执行、刷新对应的Widget

你给出的示例代码的问题 #

1. Obx要求传入的闭包必须返回一个Widget，你的写法里闭包仅包含if判断逻辑，没有合法返回值
2. 你调用Obx生成的实例没有被挂载到Widget树上，相当于代码执行完直接丢弃了Obx实例，自然不会触发监听

正确实现方式 #

场景1：整个页面的返回结果依赖响应式变量判断

直接把所有判断逻辑都放在Obx闭包内，将Obx作为build方法的返回值即可：

@override
Widget build(BuildContext context) {
  return Obx(() {
    // 注意：if判断的条件必须直接访问响应式变量的.value属性，不可提前在Obx外赋值
    if (controller.userInfo.value.isVip) {
      return const VipHomePage();
    } else if (controller.userInfo.value.isLogin) {
      return const NormalHomePage();
    } else {
      return const LoginPage();
    }
  });
}

场景2：仅局部Widget需要依赖响应式变量判断

只需要把需要响应更新的局部Widget用Obx包裹，判断逻辑放在该Obx的闭包内即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 静态不需要更新的公共头部
    appBar: AppBar(title: const Text('首页')),
    body: Column(
      children: [
        const Text('固定展示的说明文案'),
        // 仅该区域需要响应变量更新
        Obx(() {
          if (controller.showDiscount.value) {
            return const DiscountBanner();
          } else {
            return const SizedBox.shrink();
          }
        }),
        const Text('其他静态内容区域'),
      ],
    ),
  );
}

避坑注意 #

不要把响应式变量的访问放在Obx闭包之外，哪怕是提前赋值给临时变量，Obx也无法收集到依赖，不会触发更新：

错误写法示例

@override
Widget build(BuildContext context) {
  // 响应式变量在Obx外访问，不会被Obx捕获为依赖
  final showDiscount = controller.showDiscount.value;
  return Obx(() {
    if (showDiscount) { // 此处访问的是普通临时变量，不会触发依赖收集
      return const DiscountBanner();
    }
    return const SizedBox.shrink();
  });
}

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