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

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

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

يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 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.

النتائج

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

المجموعات التي تتضمّن هذا الدليل

هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:

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

إذا كانت لديك أسئلة أو ملاحظات

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