目前我的密码 TextFormField
如下所示:
TextFormField(
decoration: const InputDecoration(
labelText: 'Password',
icon: const Padding(
padding: const EdgeInsets.only(top: 15.0),
child: const Icon(Icons.lock),
)),
validator: (val) => val.length < 6 ? 'Password too short.' : null,
onSaved: (val) => _password = val,
obscureText: true,
);
我想要一个类似交互的按钮,它可以使密码可见和不可见。我可以在 TextFormField
内进行吗?或者我将不得不制作一个 Stack
小部件来获得我所需的 UI。以及关于 obscureText
真/假的条件将如何设置?
最佳答案
我按照@Hemanth Raj 创建了一个解决方案,但采用了更强大的方式。
首先声明一个bool
变量_passwordVisible
。
在initState()
_passwordVisible
为false
@override
void initState() {
_passwordVisible = false;
}
以下是 TextFormField
小部件:
TextFormField(
keyboardType: TextInputType.text,
controller: _userPasswordController,
obscureText: !_passwordVisible,//This will obscure text dynamically
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
// Here is key idea
suffixIcon: IconButton(
icon: Icon(
// Based on passwordVisible state choose the icon
_passwordVisible
? Icons.visibility
: Icons.visibility_off,
color: Theme.of(context).primaryColorDark,
),
onPressed: () {
// Update the state i.e. toogle the state of passwordVisible variable
setState(() {
_passwordVisible = !_passwordVisible;
});
},
),
),
);
关于android - 如何在 TextFormField 中显示/隐藏密码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49125064/