在 Jetpack Compose 中管理状态

Question

在我的 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)
            }
        }

    }

}

Answer 1

在这种简单的情况下，您应该在 class 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") }
        )

    }
}

在 Jetpack Compose 中管理状态

Manage state in Jetpack Compose

android

mvvm

kotlin

clean-architecture

android-jetpack-compose