Flutter使用GetX时如何监听GetxController值变化并在无状态组件触发导航

首先明确：Obx的作用是响应状态变化重建UI组件，如果你只需要监听状态变化触发跳转这类纯逻辑操作，更推荐用GetX内置的workers系列API，不需要依赖组件重建就能监听响应式变量的变动。

实现步骤 #

1. 定义Controller，声明响应式变量和异步任务逻辑 #

import 'package:get/get.dart';

class TaskController extends GetxController {
  // 声明异步任务结果的响应式变量，也可自定义实体类存储返回的完整数据
  final RxBool taskSuccess = false.obs;
  final Rx<dynamic> taskResult = null.obs;

  // 替换为实际异步任务逻辑
  Future<void> runAsyncTask() async {
    await Future.delayed(const Duration(seconds: 2));
    // 任务执行完成后更新响应式变量的值
    taskSuccess.value = true;
    taskResult.value = {"nextPageParams": "xxx"};
  }
}

2. 注册监听器（Worker），监听状态变化触发导航 #

推荐在Controller的onInit生命周期中注册worker，不需要依赖页面组件即可生效：

class TaskController extends GetxController {
  // 上述变量和方法省略

  @override
  void onInit() {
    super.onInit();
    // ever worker：每次监听的变量变化时都会触发回调
    ever(taskSuccess, (isSuccess) {
      if (isSuccess) {
        // 自定义跳转逻辑，可携带返回的任务数据
        Get.toNamed('/next_page', arguments: taskResult.value);
        // 跳转后重置状态，避免重复触发跳转
        taskSuccess.value = false;
      }
    });

    // 若仅需要监听第一次状态变化触发逻辑，可使用once worker
    // once(taskSuccess, (isSuccess) {
    //   if (isSuccess) Get.toNamed('/next_page');
    // });
  }
}

3. 页面使用示例 #

class TaskPage extends StatelessWidget {
  final TaskController controller = Get.put(TaskController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Obx(() => controller.taskSuccess.value 
            ? const Text("任务完成，即将跳转") 
            : ElevatedButton(
                onPressed: () => controller.runAsyncTask(),
                child: const Text("启动异步任务"),
              )
        ),
      ),
    );
  }
}

补充说明 #

• 若确实需要在UI组件内判断后跳转，也可以在Obx的builder方法中做判断，注意添加状态重置逻辑避免重复触发
• 除了ever、once之外，GetX还提供debounce（防抖）、interval（固定间隔限流）类型的worker，可根据业务场景选择
• 跳转前的权限校验、参数校验逻辑都可以放在worker的回调中处理

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