切换密码字段 jetpack compose
Toggle password field jetpack compose
-
android
-
material-design
-
android-textinputlayout
-
android-jetpack-compose
-
android-jetpack-compose-text
您好,我正在尝试在用户单击“查看密码”按钮时动态更改 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 = {})
)
}
}
}
检查这个:
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 = { })
您可以使用标准 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"
Hide/Show 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()
)
}
android
material-design
android-textinputlayout
android-jetpack-compose
android-jetpack-compose-text
您好,我正在尝试在用户单击“查看密码”按钮时动态更改 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 = {})
)
}
}
}
检查这个:
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 = { })
您可以使用标准 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"
Hide/Show 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()
)
}