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

Question

我正在尝试将

ViewModel

与 Jetpack Compose 一起使用，

通过增加数字。

但它不起作用。也许我没有以正确的方式使用视图模型。

这是我的主要活动代码

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() {
    JetpackcomposepracticeTheme {
        Greeting()
    }
}

这是我的 Viewmodel 类。

它与 xml 配合得很好。

如何创建视图模型的对象：

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

Answer 1

当一些状态可变的值容器发生变化时，Compose 可以重新组合。您可以使用

mutableStateOf()

、

mutableStateListOf()

等手动创建它，或者通过包装

Flow

/

LiveData

。

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

    fun addNumber(){
        number++
    }
}

我建议您从撰写文档中的状态开始，包括这个 youtube 视频，它解释了基本原理。

Answer 2

我将 Hilt 与视图模型一起使用。这是另一种使用方法

@Composable
fun PokemonListScreen(
    navController: NavController
) {

    val viewModel = hiltViewModel<PokemonListVm>()
    val lazyPokemonItems: LazyPagingItems<PokedexListEntry> = viewModel.pokemonList.collectAsLazyPagingItems()

   
}

我使用此可组合项而不是片段，并且在父级中保留对可组合项的一个引用