使用Jetpack Compose管理状态

Question

在我的viewModel中，我为每个屏幕都设置了“state”状态，例如：

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)
            }
        }

    }

}

- Wafi_ck

Answer 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") }
        )

    }
}

- Santanu Sur