喷气背包在方向改变时组成保存状态 [英] Jetpack Compose saving state on orientation change

问题描述

我正在使用Android Jetpack的Compose，一直在尝试如何保存状态以备方向更改。

我的思路是让一个类成为一个视图模型。因为当我使用Android的传统API时，这通常是有效的。

当信息发生更改时，我使用了Memory{}和muableState{}来更新用户界面。 请验证我的理解是否正确...

记住=保存变量并允许通过.value进行访问，这允许对值进行缓存。但它的主要用途是不在更改时重新赋值变量。

muableState=在发生更改时更新变量。

许多博客文章都说要使用@Model，然而，在尝试该方法时，导入会给出错误。 因此，我添加了一个：ViewModel()

但是，我相信我的记忆{}阻止了这项工作按预期进行？

我能得到正确方向的点吗？

@Composable
fun DefaultFlashCard() {

    val flashCards = remember { mutableStateOf(FlashCards())}
    

    Spacer(modifier = Modifier.height(30.dp))

    MaterialTheme {


        val typography = MaterialTheme.typography
        var question = remember { mutableStateOf(flashCards.value.currentFlashCards.question) }



        Column(modifier = Modifier.padding(30.dp).then(Modifier.fillMaxWidth())
                .then(Modifier.wrapContentSize(Alignment.Center))
                .clip(shape = RoundedCornerShape(16.dp))) {
            Box(modifier = Modifier.preferredSize(350.dp)
                    .border(width = 4.dp,
                            color = Gray,
                            shape = RoundedCornerShape(16.dp))
                    .clickable(
                            onClick = {
                                question.value = flashCards.value.currentFlashCards.answer })
                    .gravity(align = Alignment.CenterHorizontally),
                    shape = RoundedCornerShape(2.dp),
                    backgroundColor = DarkGray,
                    gravity = Alignment.Center) {
                Text("${question.value}",
                        style = typography.h4, textAlign = TextAlign.Center, color = White
                )
            }
        }

        Column(modifier = Modifier.padding(16.dp),
                horizontalGravity = Alignment.CenterHorizontally) {

            Text("Flash Card application",
                    style = typography.h6,
                    color = Black)

            Text("The following is a demonstration of using " +
                    "Android Compose to create a Flash Card",
                    style = typography.body2,
                    color = Black,
                    textAlign = TextAlign.Center)

            Spacer(modifier = Modifier.height(30.dp))
            Button(onClick = {
                flashCards.value.incrementQuestion();
                question.value = flashCards.value.currentFlashCards.question },
                    shape = RoundedCornerShape(10.dp),
                    content = { Text("Next Card") },
                    backgroundColor = Cyan)
        }
    }
}


data class Question(val question: String, val answer: String) {
}


class FlashCards: ViewModel() {

    var flashCards = mutableStateOf( listOf(
            Question("How many Bananas should go in a Smoothie?", "3 Bananas"),
            Question("How many Eggs does it take to make an Omellete?", "8 Eggs"),
            Question("How do you say Hello in Japenese?", "Konichiwa"),
            Question("What is Korea's currency?", "Won")
    ))

    var currentQuestion = 0

    val currentFlashCards
        get() = flashCards.value[currentQuestion]

    fun incrementQuestion() {
        if (currentQuestion + 1 >= flashCards.value.size) currentQuestion = 0 else currentQuestion++
    }
}

推荐答案

还有一种方法可以在Compose中处理配置更改，它是rememberSaveable。ASdocs says：

虽然remember可帮助您在重新组合时保留状态，但不会在配置更改时保留状态。为此，您必须使用rememberSaveable。rememberSaveable自动保存可以保存在包中的任何值。对于其他值，您可以传入一个自定义保护程序对象。

Mohammad's solution似乎更健壮，但这个似乎更简单。

这篇关于喷气背包在方向改变时组成保存状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！