I have been learning Jetpack Compose for a few days and I am stuck in this scenario. I have two TextField
s (username and password) and a CheckBox
(remember me) in a login page. Now, if I make three different mutable states for these three, it works fine. But I want to make a single class for holding these states and then use mapSaver
to save and restore the data it contains. But the problem is, I can't type into username and password now.
Here is my code:
Column(
modifier = Modifier
.fillMaxWidth()
) {
val state by rememberSaveable(
stateSaver = mapSaver(
save = {
mapOf(
"username" to it.username,
"password" to it.password,
"rememberPassword" to it.rememberPassword,
)
},
restore = { map ->
LoginPageState(
username = map["username"] as String,
password = map["password"] as String,
rememberPassword = map["rememberPassword"] as Boolean,
)
}
)
) {
mutableStateOf(LoginPageState(
"",
"",
false
))
}
LoginTextField(
hint = "Username",
value = state.username,
leadingIcon = {
Icon(
imageVector = Icons.Outlined.Person,
contentDescription = "Null",
tint = Color.White
)
}
) {
state.username = it
}
Spacer(modifier = Modifier.height(16.dp))
LoginTextField(
hint = "Password",
value = state.password,
isPassword = true,
leadingIcon = {
Icon(
imageVector = Icons.Outlined.Lock,
contentDescription = "Null",
tint = Color.White
)
},
) {
state.password = it
}
Spacer(modifier = Modifier.height(16.dp))
Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Checkbox(
checked = state.rememberPassword,
onCheckedChange = {
state.rememberPassword = it
},
)
Spacer(modifier = Modifier.width(8.dp))
Text("Remember me")
}
}
LoginPageState
is my state holder class.
If anyone can help me find and explain the problem in this code, it will be appreciated.
Thanks!
CodePudding user response:
I suppose you want something like this:
class LoginPageState(username: String) {
val username = mutableStateOf(TextFieldValue(username))
}
and then use it like
val state by rememberSaveable(
stateSaver = mapSaver(
save = {
mapOf("username" to it.username.value.text)
},
restore = { map ->
LoginPageState(username = map["username"] as String)
}
)
) {
mutableStateOf(
LoginPageState("")
)
}
TextField(value = state.username.value , onValueChange = {
state.username.value = it
})