Переключить поле пароля составить реактивный ранец

Question

Привет, я пытаюсь динамически изменять visualTransformation, когда пользователь нажимает кнопку просмотра пароля. Мне удалось отфильтровать пароль, но не удалось отобразить его в виде обычного текста. Есть идеи по этому поводу? Вот что у меня получилось.

      fun UserInputText(
    keyboardType: KeyboardType = KeyboardType.Text,
    onTextChanged: (TextFieldValue) -> Unit,
    textFieldValue: TextFieldValue,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    borderColor: Color = editTextBorderColor,
    keyboardShown: Boolean,
    onTextFieldFocused: (Boolean) -> Unit,
    focusState: Boolean,
    placeholder: String = "",
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier.border(
            width = 2.dp,
            color = borderColor,
            shape = RoundedCornerShape(16.dp)
        )
    ) {
        var lastFocusState by remember { mutableStateOf(FocusState.Inactive) }
        val focusRequester = FocusRequester()
        val focusRequesterModifier = Modifier.focusRequester(focusRequester)

        BasicTextField(
            value = textFieldValue,
            onValueChange = { onTextChanged(it) },
            modifier =
            modifier.focus().then(focusRequesterModifier)
                .align(Alignment.TopStart)
                .focusObserver { state ->
                    if (lastFocusState != state) {
                        onTextFieldFocused(state == FocusState.Active)
                    }
                    lastFocusState = state
                },
            keyboardOptions = KeyboardOptions(
                keyboardType = keyboardType,
                imeAction = ImeAction.Send
            ),
            visualTransformation = visualTransformation,
            maxLines = 1,
            cursorColor = inputTextColor,
            textStyle = MaterialTheme.typography.body1.copy(color = inputTextColor)
        )
        if(keyboardType == KeyboardType.Password) {
            Image(
                vectorResource(id = R.drawable.ic_icons_watch_count_24), modifier = Modifier
                    .align(Alignment.TopEnd)
                    .padding(end = 16.dp, top = 16.dp).clickable(onClick = {})
            )
        }
    }
}

Answer 1

Проверь это:

          var passwordVisibility: Boolean by remember { mutableStateOf(false) }
    TextField(value = "Enter Password",
        visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
        leadingIcon = {
            IconButton(onClick = {
                passwordVisibility = !passwordVisibility
            }) {
                Icon(imageVector = vectorResource(id = R.drawable.ic_icons_watch_count_24))
            }
        },
        onValueChange = { })
    

Answer 2

С участием 1.0.0-beta04 ты можешь использовать:

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

val image = if (passwordVisibility)
    painterResource(id = R.drawable.design_ic_visibility)
else
    painterResource(id = R.drawable.design_ic_visibility_off)



TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Password") },
        placeholder = { Text("Password") },
        visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
        trailingIcon = {
            IconButton(onClick = {
                passwordVisibility = !passwordVisibility
            }) {
                Icon(painter = image, "")
            }
        }
 )

где значки те же, что и в библиотеке компонентов материалов.

design_ic_visibility является:

      <vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="NewApi"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"
    android:width="24dp">

  <path
      android:fillColor="@android:color/white"
      android:pathData="M12,4.5C7,4.5 2.73,7.61 1,12c1.73,4.39 6,7.5 11,7.5s9.27,-3.11 11,-7.5c-1.73,-4.39 -6,-7.5 -11,-7.5zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z"/>

</vector>

а также design_ic_visibility_off является

      <vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="NewApi"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24"
    android:width="24dp">

  <path
      android:fillColor="@android:color/white"
      android:pathData="M12,7c2.76,0 5,2.24 5,5 0,0.65 -0.13,1.26 -0.36,1.83l2.92,2.92c1.51,-1.26 2.7,-2.89 3.43,-4.75 -1.73,-4.39 -6,-7.5 -11,-7.5 -1.4,0 -2.74,0.25 -3.98,0.7l2.16,2.16C10.74,7.13 11.35,7 12,7zM2,4.27l2.28,2.28 0.46,0.46C3.08,8.3 1.78,10.02 1,12c1.73,4.39 6,7.5 11,7.5 1.55,0 3.03,-0.3 4.38,-0.84l0.42,0.42L19.73,22 21,20.73 3.27,3 2,4.27zM7.53,9.8l1.55,1.55c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.66 1.34,3 3,3 0.22,0 0.44,-0.03 0.65,-0.08l1.55,1.55c-0.67,0.33 -1.41,0.53 -2.2,0.53 -2.76,0 -5,-2.24 -5,-5 0,-0.79 0.2,-1.53 0.53,-2.2zM11.84,9.02l3.15,3.15 0.02,-0.16c0,-1.66 -1.34,-3 -3,-3l-0.17,0.01z"/>

</vector>

Answer 3

Скрыть/показать пароль в джетпаке

       @Composable
    fun CommonTextFieldPassword(
        text: MutableState<String>,
        placeholder: String,
        trailingIcon: Int = R.drawable.eye,
        visibility: MutableState<Boolean> = remember { mutableStateOf(false) }
    ) {
        TextField(
            value = text.value,
            onValueChange = { text.value = it },
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.White,
                focusedLabelColor = fadedTextColor,
                textColor = headingColor,
                unfocusedLabelColor = fadedTextColor,
                unfocusedIndicatorColor = fadedTextColor,
                focusedIndicatorColor = headingColor
            ),
            label = { Text(text = placeholder) },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = trailingIcon),
                    contentDescription = "",
                    modifier = Modifier
                        .size(25.dp)
                        .clickable {
                            visibility.value = !visibility.value
                        },
                    tint = if (visibility.value) titleColor else fadedTextColor
                )
            },
            modifier = Modifier.fillMaxWidth(),
            visualTransformation = if (visibility.value) VisualTransformation.None else PasswordVisualTransformation()
        )
    }