GetX下TextField的onChanged无法正常工作及多输入框实现咨询

你的代码存在两个核心错误导致没有打印输出、数据绑定失效：

1. 主页面的TextField中重新创建了临时的TextEditingController实例，没有使用MyController中已经初始化并绑定了监听器的_controller，两者完全独立，输入操作无法触发MyController中的监听回调。
2. onChange中调用的changeText方法读取的是未绑定到输入框的_controller的文本值，自然没有预期的同步和打印效果。

主页面代码 #

import 'package:flutter/material.dart';
import 'package:flutter_application_1/controller.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final mycontroller = Get.put(MyController());

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Container(
          child: TextField(
            // 直接绑定控制器中预初始化的TextEditingController
            controller: mycontroller.inputController,
          )
        )
      )
    );
  }
}

控制器代码 #

import 'package:flutter/material.dart';
import 'package:get/get_rx/src/rx_types/rx_types.dart';
import 'package:get/get_state_manager/get_state_manager.dart';

class MyController extends GetxController {
  final _text = "".obs;
  final TextEditingController _controller = TextEditingController();

  // 暴露控制器给页面使用
  TextEditingController get inputController => _controller;
  // 外部读取响应式文本的getter
  String get text => _text.value;

  @override
  void onInit() {
    super.onInit();
    // 设置初始默认值
    _controller.text = "Hello World";
    _text.value = "Hello World";
    // 绑定监听回调
    _controller.addListener(changeText);
  }

  void changeText() {
    _text.value = _controller.text;
    print(_text.value);
  }

  // 销毁控制器避免内存泄漏
  @override
  void onClose() {
    _controller.dispose();
    super.onClose();
  }
}

如果需要实现两个TextField，每个输入框对应一个独立的TextEditingController实例，分别绑定对应的监听回调即可，不需要给同一个控制器添加多个监听：

多输入框控制器示例 #

class MyController extends GetxController {
  final _firstText = "".obs;
  final _secondText = "".obs;
  final TextEditingController _firstController = TextEditingController();
  final TextEditingController _secondController = TextEditingController();

  TextEditingController get firstController => _firstController;
  TextEditingController get secondController => _secondController;
  String get firstText => _firstText.value;
  String get secondText => _secondText.value;

  @override
  void onInit() {
    super.onInit();
    _firstController.text = "默认值1";
    _secondController.text = "默认值2";
    // 每个控制器绑定自己的监听回调
    _firstController.addListener(changeFirstText);
    _secondController.addListener(changeSecondText);
  }

  void changeFirstText() {
    _firstText.value = _firstController.text;
    print("第一个输入框内容：${_firstText.value}");
  }

  void changeSecondText() {
    _secondText.value = _secondController.text;
    print("第二个输入框内容：${_secondText.value}");
  }

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

页面绑定示例 #

Column(
  children: [
    TextField(controller: mycontroller.firstController),
    TextField(controller: mycontroller.secondController),
  ],
)

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