flutter - 在 Flutter 的 TextFormField 中显示/隐藏密码
问题描述
我正在使用 TextFormField 来接受密码。我已将后缀图标设置为具有 IconButton 子项以检测点击事件并切换 TextFormField 的 obscuretext 属性。iconButton 的回调函数被调用,但 TextFormField 没有被重新绘制。关于如何解决这个问题的任何想法?
static Widget buildTextFormField(String id,
FormFieldValidator<String> validateField,
FormFieldSetter<String> saveField,
InputDecoration decoration,
EdgeInsetsGeometry paddingInfo,
EdgeInsetsGeometry marginInfo,
TextInputType keyboardType,
{bool obscureField:false, double width:328.0,
TextEditingController controller}
){
return Container(
padding: paddingInfo,
margin: marginInfo,
width: width,
child: TextFormField(
key: Key(id),
obscureText: obscureField,
validator: validateField,
onSaved: saveField,
keyboardType: keyboardType,
decoration: decoration,
controller: controller,
),
);
}
InputDecoration passwordDecoration = InputDecoration(
hintText: 'Password',
labelText: 'Enter your password',
suffixIcon:
IconButton(
icon: Icon(
_passwordVisible ? Icons.visibility : Icons.visibility_off,
semanticLabel: _passwordVisible ? 'hide password' : 'show password',
),
onPressed: () {
setState(() {
_passwordVisible ^= true;
//print("Icon button pressed! state: $_passwordVisible"); //Confirmed that the _passwordVisible is toggled each time the button is pressed.
});
}),
labelStyle: TextStyle(
fontFamily: 'Roboto Medium',
fontSize: 12.0,
color: Color(0x99000000),
letterSpacing: 0.4,
),
);
final passwordPaddingInfo = const EdgeInsets.only(top: 15.0, bottom:15.0,
left: 22.0, right:25.0);
this._passwordField = AdministrationComponents.
buildTextFormField('passwordField', validatePassword,
(value) => _password = value, passwordDecoration, passwordPaddingInfo,
null, null, controller:_passwordController,
obscureField: !_passwordVisible);
解决方案
试试这个
bool _showPassword = false;
void _togglevisibility() {
setState(() {
_showPassword = !_showPassword;
});
}
文本表单域代码
child: TextFormField(
controller: _passwordController,
obscureText: !_showPassword,
cursorColor: Colors.red,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: "Password",
border: InputBorder.none,
suffixIcon: GestureDetector(
onTap: () {
_togglevisibility();
},
child: Icon(
_showPassword ? Icons.visibility : Icons
.visibility_off, color: Colors.red,),
),
),
),
推荐阅读
- flyway - Flywaydb 用于迁移的多个配置文件失败
- vba - 使用 msoFileDialogFolderPicker 获取文件夹路径
- python - 加快numpy解决
- java - Java 8 Streams 查找元素并将其添加到新列表的开头
- android - recyclerview notifyDataSetChanged 停止检测 recyclerview 的分页结束
- java - 在 Android Studio 中连接到数据库的基本 URL
- java - JTableModel 行错误添加
- swift - Xcode 9 中的 Swift 4 - 如何轻量级 Core Data 迁移?
- python - Sum together certain values in a row
- forms - 发送 Angular 6 表单,包括不使用模板驱动表单的复选框值