[英]Manage state in Jetpack Compose
In my viewModel I have "state" for every single screen.在我的 viewModel 中,每个屏幕都有“状态”。 eg
例如
class MainState(val commonState: CommonState) {
val text = MutableStateFlow("text")
}
I pass viewModel to my JetpackCompose screen.我将 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") }
)
}
}
When I click button I change value of state and I expect UI will update but it does not.当我单击按钮时,我更改了 state 的值,我希望 UI 会更新,但它不会。 I have to click on TextField and then text in TextView updates.
我必须单击 TextField,然后单击 TextView 更新中的文本。
Any suggestion why UI does not update automatically?有什么建议为什么 UI 不会自动更新?
That's how I pass components and start whole screen in startActivity;这就是我在 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)
}
}
}
}
In this simple case u should use mutableStateOf("text")
in class MainState
instead of mutableStateFlow
在这个简单的情况下,您应该在 class
MainState
中使用mutableStateOf("text")
而不是mutableStateFlow
class MainState(val commonState: CommonState) {
val text = mutableStateOf("text")
}
Using MutableStateFlow使用可变状态流
To use MutableStateFlow
(which is not required in the current scenario), we need to collect the flow
.要使用
MutableStateFlow
(当前场景不需要),我们需要收集flow
。
Like the following:-像下面这样:-
val state = viewModel.mainState.text.collectAsState() // we can collect a stateflow as state in a composable function
Then we can use the observed state value in the Text
using:-然后我们可以使用在
Text
中观察到的 state 值使用:-
Text(text = state.value, ..)
Finally your composable function should look like:-最后,您的可组合 function 应该如下所示:-
@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") }
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.