如何在GetX中监听变量变化并跳转新页面？

我有一个带有倒计时计时器的StatusManager，代码如下：

class StatusManager extends GetxController {
  factory StatusManager() => _getInstance();
  static StatusManager? _instance;

  Timer? _timer;
  var count = 60.obs;

  static _getInstance() {
    if (_instance == null) {
      _instance = StatusManager._();
    }
    return _instance;
  }

  StatusManager._() {}

  @override
  void onInit() {
    super.onInit();
    debugPrint('onInit');
  }

  @override
  void onClose() {
    debugPrint('onClose');
    super.onClose();
  }

  startTimer() {
    stopTimer();

    _timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
      fetchStatus();
    });
  }

  stopTimer() {
    _timer?.cancel();
  }

  fetchStatus() async {
    count--;
  }
}

现在想在某个Widget中监听剩余时间（count变量）的变化，不使用该变量构建Widget，仅在其变化后跳转至新页面，请问该如何实现？

可以通过GetX提供的监听API实现需求，无需将count绑定到Widget树中，具体有两种常用方式：

方式一：使用ever方法（推荐） #

在Widget的initState中调用ever方法，监听count的所有变化，满足跳转条件时执行页面跳转：

class YourWidget extends StatefulWidget {
  const YourWidget({super.key});

  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  final StatusManager _statusManager = StatusManager();

  @override
  void initState() {
    super.initState();
    // 监听count的每一次变化
    ever(_statusManager.count, (value) {
      // 根据需求设置跳转触发条件，比如倒计时归零时跳转
      if (value <= 0) {
        // 执行页面跳转，示例使用GetX的路由方法
        Get.to(() => const TargetPage());
        // 停止计时器，避免重复触发跳转
        _statusManager.stopTimer();
      }
    });
    // 启动倒计时计时器
    _statusManager.startTimer();
  }

  @override
  void dispose() {
    // 页面销毁时停止计时器，避免内存泄漏
    _statusManager.stopTimer();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 正常构建Widget，无需依赖count变量
    return Scaffold(
      appBar: AppBar(title: const Text("倒计时页面")),
      body: const Center(child: Text("倒计时中，请等待...")),
    );
  }
}

方式二：直接监听Observable的listen方法 #

也可以调用count自身的listen方法获取变化回调：

@override
void initState() {
  super.initState();
  // 直接订阅count的变化流
  final subscription = _statusManager.count.listen((value) {
    if (value <= 0) {
      Get.to(() => const TargetPage());
      _statusManager.stopTimer();
      // 取消订阅，避免内存泄漏
      subscription.cancel();
    }
  });
  _statusManager.startTimer();
}

注意事项 #

• 页面销毁时必须停止计时器，防止后台持续运行引发内存泄漏
• 跳转完成后要停止计时器，避免多次触发跳转逻辑
• 如果使用GetWidget，可以直接通过Get.find<StatusManager>()获取单例实例，无需手动创建

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