如何将 ViewModel 与 Jetpack Compose 结合使用？

Question

我正在尝试通过进行数字增量来将ViewModel与 Jetpack Compose 结合使用。

它不起作用。也许我没有以正确的方式使用 ViewModel。

这是我的活动代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting()
        }
    }
}

@Composable
fun Greeting(
    helloViewModel: ViewModel = viewModel()
) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = helloViewModel.number.toString(),
            fontSize = 60.sp,
            fontWeight = FontWeight.Bold
        )
        Button(onClick = { helloViewModel.addNumber() }) {
            Text(text = "Increment Number ${helloViewModel.number}")
        }

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    AppTheme {
        Greeting()
    }
}

这是我的视图模型代码：

class ViewModel: ViewModel() {
    var number : Int = 0
    fun addNumber(){
        number++
    }
}

有什么想法我做错了吗？

Answer 1

除非该值包含在State对象中，否则您的Composable将不会获取值的更改。您可以使用mutableStateOf()或mutableIntStateOf()将值包装在可变State属性中，如下所示：ViewModel.number

class ViewModel: ViewModel() {
    var number : Int by mutableIntStateOf(0)
        private set

    fun addNumber(){
        number++
    }
}

或者，您可以将该属性声明为LiveData或Flow，然后使用LiveData.observeAsState()或Flow.collectAsState扩展函数将该值引用为Composable中的State对象。

我建议您从State 和 Jetpack Compose文档以及Jetpack Compose：State YouTube 视频开始。这两个资源解释了基本原理。