更改按钮清除文本表单字段的可见性

Question

我在 https://stackoverflow.com/a/54040162/15233845 中实现了密码的显示/隐藏。问题是，当我单击显示/隐藏密码按钮时，它会清除该字段并且图标不会改变。 我不确定我做错了什么，因为链接中的答案几乎是 1:1。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';

class RegistrationPage extends StatefulWidget {
  final String email;

  const RegistrationPage({Key? key, required this.email}) : super(key: key);

  @override
  _RegistrationPage createState() => _RegistrationPage();
}

class _RegistrationPage extends State<RegistrationPage> {
  @override
  Widget build(BuildContext context) {
    final emailController = TextEditingController();
    final passwordController = TextEditingController();
    final repeatedPasswordController = TextEditingController();
    final phoneNumberController = TextEditingController();
    final usernameController = TextEditingController();
    var _passwordVisible = false;

    @override
    void dispose() {
      emailController.dispose();
      passwordController.dispose();
      repeatedPasswordController.dispose();
      phoneNumberController.dispose();
      usernameController.dispose();
      super.dispose();
    }

    @override
    void initState() {
      _passwordVisible = false;
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("Zarejestruj się"),
        centerTitle: true,
        elevation: 6.0,
        shape: ContinuousRectangleBorder(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(90.0),
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(20.0),
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              FlutterLogo(size: 80),
              SizedBox(
                height: 30.0,
              ),
              Text(
                'Witamy na pokładzie!',
                style: TextStyle(
                  fontSize: 20,
                  color: Color(0xff000000),
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 10.0,
              ),
              Text(
                'Utwórz nowe konto',
                style: TextStyle(
                  fontSize: 17,
                  color: Color(0xff000000),
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 30.0,
              ),
              Form(
                child: Column(
                  children: <Widget>[
                    TextFormField(
                      controller: emailController..text = widget.email,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Adres e-mail',
                        fillColor: Color(0xffffffff),
                        filled: true,
                        prefixIcon: Icon(Icons.mail),
                      ),
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return 'Please enter an email';
                        } else if (!EmailValidator.validate(value)) {
                          return 'Please enter proper mail';
                        }
                        return null;
                      },
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    TextFormField(
                      controller: phoneNumberController,
                      keyboardType: TextInputType.phone,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Numer telefonu',
                        fillColor: Color(0xffffffff),
                        filled: true,
                        prefixIcon: Icon(Icons.phone),
                      ),
                      validator: (value) {},
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    TextFormField(
                      controller: usernameController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Nazwa użytkownika',
                        fillColor: Color(0xffffffff),
                        filled: true,
                        prefixIcon: Icon(Icons.account_circle),
                      ),
                      validator: (value) {},
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    TextFormField(
                      controller: passwordController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Hasło',
                        fillColor: Color(0xffffffff),
                        filled: true,
                        prefixIcon: Icon(Icons.password),
                      ),
                      validator: (value) {
                        return null;
                      },
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    TextFormField(
                      controller: repeatedPasswordController,
                      obscureText: !_passwordVisible,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Powtórz hasło',
                        fillColor: Color(0xffffffff),
                        filled: true,
                        prefixIcon: Icon(Icons.password),
                        suffixIcon: IconButton(
                          icon: Icon(
                            _passwordVisible
                                ? Icons.visibility
                                : Icons.visibility_off,
                            color: Theme.of(context).primaryColorDark,
                          ),
                          onPressed: () {
                            setState(() {
                              print(repeatedPasswordController.text);
                              _passwordVisible = !_passwordVisible;
                            });
                          },
                        ),
                      ),
                      validator: (value) {
                        return null;
                      },
                    ),
                    SizedBox(
                      height: 15.0,
                    ),
                    ConstrainedBox(
                      constraints:
                          BoxConstraints.tightFor(width: 240, height: 60),
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text('Zarejestruj',
                            style: TextStyle(
                              fontSize: 30,
                              color: Color(0xffffffff),
                            ),
                            textAlign: TextAlign.center),
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all<Color>(
                            Color(0xFF2F45C6),
                          ),
                          shape:
                              MaterialStateProperty.all<RoundedRectangleBorder>(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(25.0),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
      backgroundColor: const Color(0xFEF9F9FC),
    );
  }
}

显示错误的短视频g：https://streamable.com/oem3ej

Answer 1

您在每次重建时都将_passwordVisible 变量设置为false，因为您在build 方法中调用了var _passwordVisible = false;。您可以看到，在您提供的示例中，_obscureText 变量在 build 方法之外设置为 false。此外，所有TextEditingController 对象都应在build 方法之外进行初始化。

类似这样的：

class _RegistrationPage extends State<RegistrationPage> {

final emailController = TextEditingController();
  final passwordController = TextEditingController();
  final repeatedPasswordController = TextEditingController();
  final phoneNumberController = TextEditingController();
  final usernameController = TextEditingController();
  var _passwordVisible = false;
  @override
  Widget build(BuildContext context) {
    ...
  }
...