Custom class for holding multiple states in Jetpack Compose-CodePudding

I have been learning Jetpack Compose for a few days and I am stuck in this scenario. I have two TextFields (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
})