使用 Jetpack Compose 实现密码显示/隐藏切换功能

在基于登录或注册的应用程序中，你一定注意到密码字段在输入时会显示为黑点。此外，通常还有一个眼睛形状的图标，点击它可以将密码以明文形式显示出来。这个图标起到了切换的作用，当用户对自己输入的密码不确定时，可以帮助用户显示已输入的内容。

!Toggle Password Field

因此，在本文中，我们将向你展示如何使用 Jetpack Compose 在 Android 中实现一个带有密码切换功能的 TextField。一旦你的 IDE 准备就绪，请遵循以下步骤操作。

分步实现

步骤 1：在 Android Studio 中创建新项目

若要在 Android Studio 中创建新项目，请参考 如何在 Android Studio 中创建/启动新项目。在选择模板时，请选择 Empty Compose Activity。如果找不到此模板，请尝试将 Android Studio 升级到最新版本。我们将使用 Kotlin 来演示此应用，因此在创建新项目时请确保选择 Kotlin 作为主要语言。

步骤 2：添加依赖 build.gradle (Module)

添加以下依赖项以从 Material UI 导入图标库。

Kotlin


CODEBLOCK_b4367ecb

步骤 3：使用 MainActivity.kt 文件

进入 MainActivity.kt 文件并参考以下代码。下面是 MainActivity.kt 文件的代码。代码内部添加了注释，以便更详细地理解代码。

Kotlin


“

package com.geeksforgeeks.passwordtoggle

import android.os.Bundle

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.compose.foundation.layout.*

import androidx.compose.foundation.text.KeyboardOptions

import androidx.compose.material.*

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.filled.Visibility

import androidx.compose.material.icons.filled.VisibilityOff

import androidx.compose.runtime.*

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.text.input.KeyboardType

import androidx.compose.ui.text.input.PasswordVisualTransformation

import androidx.compose.ui.text.input.VisualTransformation

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

// Creating a Simple Scaffold

// Layout for the application

Scaffold(

// Creating a Top Bar

topBar = { TopAppBar(title = { Text("GFG | Toggle Password", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },

// Creating Content

content = {

// Creating a Column Layout

Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {

// Creating a variable to store password

var password by remember { mutableStateOf("") }

// Creating a variable to store toggle state

var passwordVisible by remember { mutableStateOf(false) }

// Create a Text Field for giving password input

TextField(

value = password,

onValueChange = { password = it },

label = { Text("Password") },

singleLine = true,

placeholder = { Text("Password") },

visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),

keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),

trailingIcon = {

val image = if (passwordVisible)

Icons.Filled.Visibility

else Icons.Filled.VisibilityOff

// Localized description for accessibility services

val description = if (passwordVisible) "Hide password" else "Show password"

// Toggle button to hide or display password

IconButton(onClick = {passwordVisible = !passwordVisible}){

Icon(imageVector = image, description)