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

شما می‌توانید بر اساس دکمه‌ی فعال/غیرفعال کردن رمز عبور، یک آیکون برای مخفی کردن یا نمایش آن ایجاد کنید تا امنیت و تجربه‌ی کاربری بهبود یابد.

نتایج

شکل ۱. فعال و غیرفعال کردن آیکون نمایش و مخفی کردن رمز عبور.

سازگاری نسخه

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

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

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

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

سوالی یا بازخوردی دارید؟

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