切换Jetpack Compose密码字段

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 = {})
            )
        }
    }
}

- clouddy

Answer 1

您可以使用标准的TextField组合：

var password by rememberSaveable { mutableStateOf("") }
var passwordVisible by rememberSaveable { mutableStateOf(false) }

TextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    singleLine = true,
    placeholder = { Text("Password") },
    visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
    trailingIcon = {
        val image = if (passwordVisible)
            Icons.Filled.Visibility
        else Icons.Filled.VisibilityOff

        // Please provide localized description for accessibility services
        val description = if (passwordVisible) "Hide password" else "Show password"

        IconButton(onClick = {passwordVisible = !passwordVisible}){
            Icon(imageVector  = image, description)
        }
    }
)

注意：要使用Icons.Filled.Visibility和Icons.Filled.VisibilityOff，请添加以下依赖项：implementation "androidx.compose.material:material-icons-extended:$compose_version"

- Gabriele Mariotti

---

好的解决方案。太棒了！ - Gary Chen

使用空字符串作为内容描述是一个不好的习惯，最好将其设置为null以表示它纯粹是装饰性的，或者在您的示例中提供实际的字符串，以便人们理解为什么需要它。我不确定使用PasswordVisualTransform的Compose TextField如何操作屏幕阅读器，但我不会指望这个contentDescription是不必要的。 - omiwrench

@omiwrench 这只是一个例子。无论如何，由于答案展示了如何实现密码字段，因此管理描述的方法是正确的。答案已更新。感谢您的反馈。 - Gabriele Mariotti

Answer 2

检查这个：

    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 = { })
    

- Mohammad Sianaki

Answer 3

在Jetpack Compose中隐藏/显示密码

 @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()
        )
    }

- Jayant Kumar