[英]Toggle password field jetpack compose
Hi I am trying to change visualTransformation dynamically when the user click on see password button.您好我正在尝试在用户单击“查看密码”按钮时动态更改 visualTransformation。 I can manage to filter password but couldn't achive to show in plain text.我可以设法过滤密码,但无法以纯文本形式显示。 Any idea for that?有什么想法吗? Here is what I got so far.这是我到目前为止得到的。
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 = {})
)
}
}
}
Check this:检查这个:
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 = { })
With 1.0.0
(tested with 1.0.0-rc02
) you can use:使用1.0.0
(使用1.0.0-rc02
测试),您可以使用:
var password by rememberSaveable { mutableStateOf("") }
var passwordVisibility by remember { mutableStateOf(false) }
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 = {
val image = if (passwordVisibility)
Icons.Filled.Visibility
else Icons.Filled.VisibilityOff
IconButton(onClick = {
passwordVisibility = !passwordVisibility
}) {
Icon(imageVector = image, "")
}
}
)
Note: to use Icons.Filled.Visibility
and Icons.Filled.VisibilityOff
add in the dependencies: implementation "androidx.compose.material:material-icons-extended:$compose_version"
注意:要使用Icons.Filled.Visibility
和Icons.Filled.VisibilityOff
添加依赖项: implementation "androidx.compose.material:material-icons-extended:$compose_version"
Hide/Show password in jetpack compose在 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()
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.