نمایش یا پنهان کردن رمز عبور بر اساس تغییر کاربری

برای بهبود امنیت و بهبود تجربه کاربری، می‌توانید نمادی برای پنهان کردن یا نمایش رمز عبور براساس تغییر کاربری ایجاد کنید.

سازگاری نسخه

این پیاده سازی مستلزم آن است که 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 تعریف می کند.

نتایج

شکل 1. تغییر دادن نماد رمز عبور نمایش و پنهان کردن.

مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

متن بخش مرکزی هر رابط کاربری است. روش های مختلفی را بیابید که می توانید متن را در برنامه خود ارائه دهید تا تجربه کاربری لذت بخشی را ارائه دهید.
بیاموزید که چگونه با وارد کردن متن و استفاده از سایر ابزارهای ورودی، راه‌هایی را برای تعامل کاربران با برنامه‌تان پیاده‌سازی کنید.

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.