切换密码字段jetpack compose答案

【问题标题】：Toggle password field jetpack compose切换密码字段jetpack compose
【发布时间】：2020-12-15 10:39:41
【问题描述】：

您好，当用户单击查看密码按钮时，我正在尝试动态更改 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 = {})
            )
        }
    }
}

【问题讨论】：

标签： android material-design android-textinputlayout android-jetpack-compose android-jetpack-compose-text

【解决方案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"

【讨论】：

很好的解决方案。太棒了！
对内容描述使用空字符串是一个坏习惯，最好将其设置为 null 以表明它纯粹是装饰性的，或者在您的示例中提供一个实际的字符串，以便人们理解它存在的原因。我不确定屏幕阅读器如何使用 PasswordVisualTransform 与 Compose TextField 一起操作，但我不会指望这个 contentDescription 是不必要的。
@omiwrench 这只是一个例子。无论如何，由于答案显示了如何实现密码字段，因此管理描述的方法也是正确的。答案已更新。感谢您的反馈。

【解决方案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 = { })

【讨论】：

【解决方案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()
        )
    }

【讨论】：