הצגה או הסתרה של הסיסמה על סמך מתג של משתמש

אתם יכולים ליצור סמל להסתרה או להצגה של סיסמה על סמך מתג משתמש כדי לשפר את האבטחה ואת חוויית המשתמש.

תוצאות

איור 1. הפעלה והשבתה של סמל הצגת הסיסמה.

תאימות גרסאות

כדי להטמיע את התכונה הזו, צריך להגדיר את minSDK של הפרויקט לרמת API‏ 21 ומעלה.

פניות קשורות

הצגה או הסתרה של סיסמה על סמך מתג משתמש

כדי להציג או להסתיר סיסמה על סמך מתג משתמש, יוצרים שדה להזנת קלט להזנת מידע ומשתמשים בסמל שאפשר ללחוץ עליו כדי להפעיל את המתג:

@Composable
fun PasswordTextField() {
    val state = remember { TextFieldState() }
    var showPassword by remember { mutableStateOf(false) }
    BasicSecureTextField(
        state = state,
        textObfuscationMode =
        if (showPassword) {
            TextObfuscationMode.Visible
        } else {
            TextObfuscationMode.RevealLastTyped
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(6.dp)
            .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))
            .padding(6.dp),
        decorator = { innerTextField ->
            Box(modifier = Modifier.fillMaxWidth()) {
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterStart)
                        .padding(start = 16.dp, end = 48.dp)
                ) {
                    innerTextField()
                }
                Icon(
                    if (showPassword) {
                        Icons.Filled.Visibility
                    } else {
                        Icons.Filled.VisibilityOff
                    },
                    contentDescription = "Toggle password visibility",
                    modifier = Modifier
                        .align(Alignment.CenterEnd)
                        .requiredSize(48.dp).padding(16.dp)
                        .clickable { showPassword = !showPassword }
                )
            }
        }
    )
}

מידע חשוב על הקוד

  • שומרת את מצב החשיפה של הסיסמה בshowPassword.
  • משתמש ברכיב BasicSecureTextField שאפשר להרכיב ממנו רכיבים אחרים להזנת סיסמה.
  • כולל סמל נגרר שאפשר ללחוץ עליו כדי להחליף את הערך של showPassword.
  • המאפיין textObfuscationMode מוגדר לפי המצב של showPassword, וגם המצב של הסמל האחרון (גלוי או לא גלוי).

אוספים שכוללים את המדריך הזה

המדריך הזה הוא חלק מאוספים של מדריכים מהירים בנושאים שקשורים ליעדים רחבים יותר בפיתוח ל-Android:

טקסט הוא חלק מרכזי בכל ממשק משתמש. כדאי לנסות דרכים שונות להצגת טקסט באפליקציה כדי לספק חוויית משתמש נעימה.
כאן מוסבר איך להטמיע דרכים שבהן המשתמשים יכולים לקיים אינטראקציה עם האפליקציה באמצעות הזנת טקסט ושימוש באמצעי קלט אחרים.

יש לך שאלות או משוב?

אפשר לעבור לדף השאלות הנפוצות שלנו כדי לקרוא מדריכים מהירים, או לפנות אלינו ולספר לנו מה דעתך.