首页 > 解决方案 > 如何在值上使用 GetX?

问题描述

我想制作一个密码文本字段,其中内容可见性可以由后缀图标控制。

代码可能是这样的:

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不起作用。直接的方法是在 上使用 Obx() TextFormField,但我认为这不是最好的方法。

结果如下:

在此处输入图像描述

标签: flutterdarttextfieldflutter-getx

解决方案


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

class LoginPage extends GetView<LoginController>

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

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


推荐阅读