无法让 onChanged 与 GetX 一起正常工作答案

【问题标题】：Can't get onChanged properly work with GetX无法让 onChanged 与 GetX 一起正常工作
【发布时间】：2021-08-26 07:43:09
【问题描述】：

我正在学习 GetX。我正在尝试编写显示文本字段并允许对其进行编辑的简单应用程序。所以用户可以点击默认文本并继续编辑它。

但我对 onChange 动作和控制器感到困惑。我不确定我是否正确使用它们，因为下一个代码不会在控制台中打印注释，所以TextEditingController 似乎没有与数据绑定。

这里复制过去的代码：

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


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

class MyApp extends StatelessWidget {
  var 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(
              controller: TextEditingController(text: mycontroller.text),
              onChanged: (value) {
                mycontroller.changeText();
              }
      ))
    ));
  }
}

控制器：

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

class MyController extends GetxController {

    var _text = "".obs;
    TextEditingController _controller;

    get text => this._text.value;
    set text(value) => this._text.value = value;
    
    @override
    void onInit() async  {
      super.onInit();
      _controller = TextEditingController();
      _text.value = "Hello World"; 

       _controller.addListener(changeText);
    }

    changeText() {
      _text.value = _controller.text;
      print(_text.value); // nothing is printed on Console!
    }

}

还有第二个问题。如果我需要两个文本字段，我需要如何组织代码？我需要不同的_controller.addListener(changeText); 比如：_controller.addListener(changeText1); _controller.addListener(changeText2);吗？

【问题讨论】：

标签： flutter dart flutter-getx

【解决方案1】：

德米特里，

我也在学习 GetX，所以还没有 100% 掌握它。

作为初学者，您似乎正在使用两个不同的 TextEditingControllers！ MyController 中的一个和 MyApp 中的一个可能需要将 MyController 设为非私有并在 MyApp 上使用它。

第二个问题很简单，您可以/应该为每个文本字段创建一个 TextEditingController。

【讨论】：

【解决方案2】：

可以通过使用 Textfieldcontroller 以及使用 onchanged 方法在文本字段更改时获取它的值，您将在代码中部署它们，这不是必需的。您可以通过任何一种方式监控文本字段值。在此处阅读更多内容 https://flutter.dev/docs/cookbook/forms/text-field-changes.

如果你想使用 Textfieldcontroller，它（Textfieldcontroller）需要在 MyController 中创建，这有点复杂，我不使用这种方法。下面提到了如何将 onchanged 与 GetX 一起使用。

mycontroller.dart

var _text = "".obs;

get getText => _text.value;
set setText(String screenvalue) => _text.value = screenvalue;

// there is no need of initiating textcontroller here in mycontroller.dart

yourscreen.dart

class MyApp extends StatelessWidget {
  final mycontroller = Get.put(MyController());
  // intiate TextEditingController in screen
  var textValueController = TextEditingController();

home: Scaffold(
  body: 
  
Column(
children: [  
  
  Container(child: TextField(
    // initiate TextEditingController normally in screen itself 
    // if you wish to use it for purpose of submitting form data
    // or for validation purpose
    controller: textValueController,
    onChanged: (value) {
      mycontroller.setText (value);
    }
  )),

  Obx(() {
    return Text(
      'Your text updated as typed = ${mycontroller.getText}',
    );
  }),
  
],
))}

【讨论】：