更改按钮的可见性清除textformfield

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),
);
}
}

显示错误的短视频：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) {
...
}
...