在 Jetpack Compose 中管理状态答案

【问题标题】：Manage state in Jetpack Compose在 Jetpack Compose 中管理状态
【发布时间】：2021-08-03 18:28:21
【问题描述】：

在我的 viewModel 中，每个屏幕都有“状态”。例如

class MainState(val commonState: CommonState) {
    val text = MutableStateFlow("text")
}

我将 viewModel 传递到我的 JetpackCompose 屏幕。

@Composable
fun MainScreen(text: String, viewModel: HomeViewModel) {
    val textState = remember { mutableStateOf(TextFieldValue()) }
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = viewModel.state.mainState.text.value,
            color = Color.Blue,
            fontSize = 40.sp
        )

        Button(
            onClick = { viewModel.state.mainState.text.value = "New text" },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Green
            ),
            modifier = Modifier.padding(16.dp)

        ) {
            Text(text)
        }

        TextField(
            value = textState.value,
            onValueChange = { textState.value = it },
            label = { Text("Input text") }
        )
        
    }
}

当我单击按钮时，我会更改状态值，并且我希望 UI 会更新，但它不会。我必须点击 TextField，然后在 TextView 中更新文本。

关于 UI 不自动更新的任何建议？

这就是我在 startActivity 中传递组件并启动整个屏幕的方式；

class HomeActivity : ComponentActivity() {

    private val viewModel by viewModel<HomeViewModel>()
    private val homeState: HomeState get() = viewModel.state

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            RateMeAppTheme {
                ContentScreen(viewModel, homeState)
            }
        }

    }

}

【问题讨论】：

标签： android kotlin mvvm android-jetpack-compose clean-architecture

【解决方案1】：

在这个简单的例子中，你应该在 MainState 类中使用 mutableStateOf("text") 而不是 mutableStateFlow

class MainState(val commonState: CommonState) {
    val text = mutableStateOf("text")
}

使用 MutableStateFlow

要使用MutableStateFlow（当前场景不需要），我们需要收集flow。

如下：-

val state = viewModel.mainState.text.collectAsState() // we can collect a stateflow as state in a composable function

然后我们可以使用Text中观察到的状态值使用：-

Text(text = state.value, ..)

最后你的可组合函数应该是这样的：-

@Composable
fun MainScreen(text: String, viewModel: HomeViewModel) {
    val textState = remember { mutableStateOf(TextFieldValue()) }
    val state = viewModel.mainState.text.collectAsState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = state.value,
            color = Color.Blue,
            fontSize = 40.sp
        )

        Button(
            onClick = { viewModel.mainState.text.value = "New text" },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Green
            ),
            modifier = Modifier.padding(16.dp)

        ) {
            Text(text)
        }

        TextField(
            value = textState.value,
            onValueChange = { textState.value = it },
            label = { Text("Input text") }
        )

    }
}

【讨论】：