如何显示或隐藏在 Flutter 中输入的密码

在密码输入字段中创建一个常见示例，单击眼睛图标可切换密码字符的显示或隐藏。

TextFormField 在本文中，我们将使用它来实现它，但你可以用 TextField 和 TextFormField 的相同方式实现它。

首先如何隐藏键入的字符？

方法很简单：设置 TextFormField 或 TextField 的 obscureText 为 true属性。

TextFormField(
obscureText: true
),

它看起来像这样。

在输入表单中显示图标

接下来，让我们在输入表单的右边缘显示一个图标。 若要在右边缘显示图标，请使用 InputDecoration 的 suffixIcon 属性。

TextFormField(
decoration: InputDecoration(
labelText: 'Password',
/* 从这里设置图标 */
suffixIcon: IconButton(
icon: Icon(Icons.visibility_off),
onPressed: () {},
),
),
),

现在您已经看到了输入表单，您需要做的就是在用户点击图标时切换输入值的显示。

obscureText 将输入值显示切换为星号或明文

bool _isObscure = true;
/* ... */
TextFormField(
obscureText: _isObscure,
decoration: InputDecoration(
labelText: 'Password',
suffixIcon: IconButton(
// 通过显示/隐藏文本来更改图标
icon: Icon(_isObscure ? Icons.visibility_off : Icons.visibility),
// 设置图标被点击时与当前状态相反的状态
onPressed: () {
setState(() {
_isObscure = !_isObscure;
});
},
),
),
),

效果如下

最后完整代码

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.light(),
home: MainPage(),
);
}
}

class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
bool _isObscure = true;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sample App'),
),
body: Padding(
padding: const EdgeInsets.all(32.0),
child: Center(
child: TextFormField(
obscureText: _isObscure,
decoration: InputDecoration(
labelText: 'Password',
suffixIcon: IconButton(
icon: Icon(_isObscure ? Icons.visibility_off : Icons.visibility),
onPressed: () {
setState(() {
_isObscure = !_isObscure;
});
},
),
),
),
),
),
);
}
}