إظهار كلمة المرور أو إخفاؤها استنادًا إلى خيار تبديل لدى المستخدم

يمكنك إنشاء رمز لإخفاء كلمة المرور أو إظهارها استنادًا إلى زر تبديل يختاره المستخدم لتحسين الأمان وتعزيز تجربة المستخدم.

النتائج

الشكل 1. تبديل رمز إظهار كلمة المرور وإخفائها

التوافق مع الإصدارات

يتطلّب هذا التنفيذ ضبط minSDK لمشروعك على مستوى واجهة برمجة التطبيقات 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:

النص هو جزء أساسي من أي واجهة مستخدم. تعرَّف على الطرق المختلفة التي يمكنك من خلالها عرض النص في تطبيقك لتوفير تجربة ممتعة للمستخدم.
تعرَّف على كيفية تنفيذ طرق تفاعل المستخدمين مع تطبيقك من خلال إدخال النص واستخدام وسائل إدخال أخرى.

هل لديك أسئلة أو ملاحظات؟

انتقِل إلى صفحة الأسئلة الشائعة وتعرَّف على "الأدلة السريعة" أو تواصَل معنا وأخبرنا بأفكارك.