Есть ли в Jetpack Compose эквивалент поля пароля с паролем, видимым пользователю?

Question

• Продукт: приложение для Android
• Язык программирования: котлин

При использовании XML для создания пользовательского интерфейса. Есть опция для поля пароля с паролем, видимым пользователю. Все, что нужно сделать разработчику, - это установить inputType = TYPE_TEXT_VARIATION_VISIBLE_PASSWORD

В Jetpack Compose есть возможность создать textField(). Тогда пройдите в чтобы текст превратился в точки. Однако он не просматривает буквы в течение нескольких секунд, прежде чем превратиться в точки, как это было с XML.

Было интересно, есть ли эквивалентная функция создания реактивного ранца для поля пароля с паролем, видимым пользователю в течение нескольких секунд, прежде чем он превратится в точку.

Спасибо

Answer 1

В inputTypeнастраивает тип отображаемой клавиатуры, допустимые символы и внешний вид редактируемого текста.
С участием 1.0.0-beta04 чтобы иметь поле пароля, вы можете использовать TextField с KeyboardType.Password:

keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)

Также проверьте этот билет для дальнейшей настройки.

Чтобы использовать поле пароля с visualTransformation(вместо исходного текста используется символ маски):

      var password by rememberSaveable { mutableStateOf("") }
TextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Enter password") },
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
)

Чтобы использовать поле пароля, видимое пользователю, просто удалите visualTransformation(и используйте значение по умолчанию VisualTransformation.None):

      var password by rememberSaveable { mutableStateOf("") }
TextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Enter password") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
)

Если вы хотите переключаться между двумя вариантами:

      var passwordVisibility by remember { mutableStateOf(false) }

TextField(
   //...
   keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
   visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
)

Answer 2

используйте три переменные:

      var password by rememberSaveable { mutableStateOf("") }
var valueChanged by remember { mutableStateOf(false) } 
var transforms by remember { mutableStateOf(false) } 

затем для параметров TextField используйте что-то вроде:

      value = password,
visualTransformation =
                if (transforms) {
                    PasswordVisualTransformation('*')
                } else VisualTransformation.None,
onValueChange = { newValue ->
                if (...) {
                    password = newValue 
                    valueChanged = true
                    transforms = false
                }                    
            }.also {
                LaunchedEffect(it) {
                    if (valueChanged) {
                        delay(500)  // delay of half a second
                        transforms = true
                        valueChanged = false
                    }
                }
            }