Flutter中如何使用GetX监听FocusNode 替代StatefulWidget实现

解决方案 #

完全可以不用StatefulWidget，用GetX监听FocusNode的实现比原生更简洁，这里提供两种常用实现方式：

方案1：轻量实现（无需单独定义Controller，适合单组件内使用） #

直接在StatelessWidget内定义可观察变量和FocusNode，借助GetX的自动生命周期管理释放资源：

class CustomTextField extends StatelessWidget {
  CustomTextField({super.key});

  final _isFocused = false.obs;
  final _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    // 绑定FocusNode监听事件，高版本GetX会在组件销毁时自动处理回调释放
    _focusNode.addListener(() => _isFocused.value = _focusNode.hasFocus);

    return Obx(() => CustomContainer(
      isFocused: _isFocused.value,
      child: TextField(
        focusNode: _focusNode,
      ),
    ));
  }
}

补充说明：如果你的GetX版本低于4.6.0，可将组件继承自GetView，或手动注册销毁回调处理资源释放，避免内存泄漏。

方案2：Controller封装（适合需要复用焦点逻辑、多组件共享状态的场景） #

先定义通用的焦点管理Controller：

class FocusController extends GetxController {
  final RxBool isFocused = false.obs;
  late final FocusNode focusNode;

  @override
  void onInit() {
    super.onInit();
    focusNode = FocusNode();
    focusNode.addListener(() => isFocused.value = focusNode.hasFocus);
  }

  @override
  void onClose() {
    focusNode.dispose();
    super.onClose();
  }
}

组件层直接使用，完全无状态：

class CustomTextField extends StatelessWidget {
  CustomTextField({super.key});

  final controller = Get.put(FocusController());

  @override
  Widget build(BuildContext context) {
    return Obx(() => CustomContainer(
      isFocused: controller.isFocused.value,
      child: TextField(
        focusNode: controller.focusNode,
      ),
    ));
  }
}

这种方式的优势是焦点逻辑完全和视图层解耦，多个输入框可以复用同一套逻辑，也可以在其他组件内直接访问当前输入框的焦点状态。

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