如何在值上使用 GetX？答案

【问题标题】：How to use GetX on a value?如何在值上使用 GetX？
【发布时间】：2021-07-30 01:09:43
【问题描述】：

我想做一个Password TextField，其中的内容可见性可以通过后缀图标来控制。

代码可能是这样的：

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

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

class TestGetX extends StatelessWidget {
  var eyeClosed = true.obs;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Test GetX"),
        ),
        body: Align(
          alignment: Alignment.center,
          child: Padding(
            padding: EdgeInsets.all(20),
            child: TextFormField(
              obscureText: eyeClosed.value,
              decoration: InputDecoration(
                icon: Icon(
                  Icons.security,
                  color: Colors.purple,
                ),
                hintText: "Your Password",
                hintStyle: TextStyle(color: Colors.grey),
                suffix: Obx(
                  () => InkWell(
                    child: eyeClosed.value
                        ? Icon(Icons.visibility_off, color: Colors.grey)
                        : Icon(Icons.visibility, color: Colors.purple),
                    onTap: () {
                      eyeClosed.value = !eyeClosed.value;
                    },
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

后缀图标可以通过Obx()来控制，但是obscureText不起作用。直接的方法是在TextFormField上使用Obx()，但我认为这不是最好的方法。

结果如下：

【问题讨论】：

标签： flutter dart textfield flutter-getx

【解决方案1】：

我已尝试使用您的代码，只需稍作改动即可正常工作

class LoginPage extends GetView<LoginController>

还将整个 textFormField 包装在 Obx(()=>) 中

我扩展了一个控制器，用于在 Getx 中获取值和调用方法。如果需要，我可以分享我的完整代码。

【讨论】：

好的，谢谢。将整个 TextFormField 包裹在 Obx 中是最好的方法。但我只是想知道为什么 getx 不能观察属性的变化，我的意思是为什么 Obx() 的参数必须是一个构建器返回一个小部件，而不是一个值？如果可能的话，我可以这样做Obx(() => eyeClosed.value)。

【解决方案2】：

你需要将 Obx() 包裹在 TextFormField 中

Obx(() => TextFormField(...))

【讨论】：

【解决方案3】：

为您的登录屏幕创建一个控制器

class LoginController extends GetxController {
  RxBool hidePassword = true.obs;
  final passwordTextController = TextEditingController();
}

从 GetWidget 扩展您的登录屏幕小部件

class LoginScreen extends GetWidget<LoginController> { 
  final LoginController controller = Get.find<LoginController>();
  @override
  Widget build(BuildContext context) {
   return(); //Define your widget
  }
}

在 Obx(()=> ) 中包装您的文本字段

Obx(() => FormBuilderTextField(
  name: 'password',
  controller: controller.passwordTextController,
  obscureText: controller.hidePassword.value,
  decoration: InputDecoration(
     suffixIcon: IconButton(
       icon: controller.hidePassword.value ? Icon(Icons.visibility_off) 
       : Icon(Icons.visibility),
       onPressed: () {
          controller.hidePassword.value = !controller.hidePassword.value;
       },
     ),
  ),
),

【讨论】：

【解决方案4】：

当您的状态发生变化时，您应该使用 StatefulWidget。此外，您无需“获取”包即可达到您想要的相同结果。我在这里给你举个例子：

import 'package:flutter/material.dart';

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
  bool hidePassword = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 15),
          child: TextFormField(
            obscureText: hidePassword, // which is true by default
            decoration: InputDecoration(
                hintText: "Enter Password",
                suffixIcon: IconButton(
                  icon: hidePassword == false
                      ? Icon(
                          Icons.visibility_rounded,
                          color: Colors.purple,
                        )
                      : Icon(
                          Icons.visibility_off_rounded,
                          color: Colors.grey,
                        ),
                  onPressed: () {
                    setState(() {
                      // here we change the value
                      // if it's false, it gets true
                      // and if it's true, it gets false
                      hidePassword = !hidePassword;
                    });
                  },
                ),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

是的，这是正常的解决方案。但我计划在我的项目中使用 GetX，为了保持一致性，我想尝试使用 GetX 方式。