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

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

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

כדי להטמיע את הקוד הזה, צריך להגדיר את 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.
  • משתמשים ב-composable של BasicSecureTextField להזנת סיסמה.
  • יש לו סמל נלווה שניתן ללחוץ עליו, שמאפשר להחליף את הערך של showPassword.
  • מגדיר את המאפיין textObfuscationMode ואת המצב הגלוי/הלא גלוי של הסמל העוקב לפי המצב של showPassword.

תוצאות

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

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

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

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

יש לכם שאלות או משוב

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