让 ViewModel 在 Jetpack Compose 中显示信息

Question

因此，我对如何创建 ViewModel 并将其传递到我的可组合项中有些困惑，以便我可以使用数据类模型在 textView 上显示。

这是代码

主要活动

private const val TAG = "MainActivity"
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val viewModel: PokemonListViewModel by viewModels()

        setContent {
//            val pokemon = viewModel.pokemon.value
          PokeDexComposeTheme {
              Surface(
                  modifier = Modifier.fillMaxSize(),
                  color = Color.Cyan) {

                PokemonListScreen()
              }
          }

        }
    }
}


@Composable
fun PokemonListScreen(viewModel: PokemonListViewModel){
 //Tried this method as well
 val pokemon by viewModel.pokemonLiveData.observeAsState("")
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            ClickableText(
                text = AnnotatedString(),
                onClick = {offset ->
                    Log.d(TAG, "PokemonListScreen: clicked")
                },
                )

            Divider(
                Modifier.padding(start = 24.dp, end = 24.dp),
                color = Color.Black,
                thickness = 2.dp
            )
        }
    }



@Composable
fun PokemonDetails(){
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 16.dp),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
           fontSize = 25.sp,
            text = "NAME: "
        )
        Text(
            fontSize = 50.sp,
            text = "NameModel"
        )
        Divider(
            modifier = Modifier.padding(start = 24.dp, end = 24.dp),
            color = Color.Black,
            thickness = 1.dp
        )
        Text(
            modifier = Modifier.padding(8.dp),
            fontSize = 25.sp,
            text = "HEIGHT: "
        )
        Text(
            fontSize = 50.sp,
            text = "HeightModel"
        )
        Divider(
            modifier = Modifier.padding(start = 24.dp, end = 24.dp),
            color = Color.Black,
            thickness = 1.dp
        )
        Text(
            modifier = Modifier.padding(8.dp),
            fontSize = 25.sp,
            text = "WEIGHT: "
        )
        Text(
            fontSize = 50.sp,
            text = "WeightModel"
        )
        Divider(
            modifier = Modifier.padding(start = 24.dp, end = 24.dp),
            color = Color.Black,
            thickness = 1.dp
        )

    }
}

视图模型

class PokemonListViewModel: ViewModel() {
    private val repository = PokemonRepository(PokemonApplication.pokemonListDatabase.pokemonDao)




init {
    fetchPokemonNames()
}


    private fun fetchPokemonNames(){
        viewModelScope.launch {
            val fetchPokeListEntity = repository.getAllPokemonNames()
                pokemon.value = fetchPokeListEntity
        }
    }


}

我对 Jetpack Compose 还是很陌生，所以我的想法是应用 viewModel 的方式与使用常规 XML 布局的方式相同。任何帮助将不胜感激。

Answer 1

于是就选了一些Udemy上的课程，StateFlow就是用来代替MutableLiveData的方法。

class PokemonListViewModel: ViewModel() {
    private val repository = PokemonRepository(PokemonApplication.pokemonListDatabase.pokemonDao)

    private val _pokemonStateData = MutableStateFlow<List<PokeListEntity>?>(emptyList())
    val pokemonStateData = _pokemonStateData.asStateFlow()


    init {
        fetchPokemonNames()
    }


    fun fetchPokemonNames(){
        viewModelScope.launch {
            val fetchPokeListEntity = repository.getAllPokemonNames()
            _pokemonStateData.value = fetchPokeListEntity
        }
    }


} 

我所要做的就是使用 StateFlow 并在 Composeable 中正确设置 ViewModel。它最终完美地工作。

@Composable
fun PokemonListPage(
    pokemonViewModel: PokemonListViewModel = viewModel(), //<- adding viewModel as a parameter 
    navController: NavController){

    val pokeList = pokemonViewModel.pokemonStateData.collectAsState().value //<- creating a variable for the StateFlow variable

    Surface(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(),
    ) {
        Scaffold(topBar =
        {
            TopAppBar(
                backgroundColor = Color.DarkGray,
                elevation = 0.dp,
            ) {
                Row(modifier = Modifier
                    .fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center
                ){
                    Text(
                        text = "POKEDEX",
                        fontWeight = FontWeight.Bold,
                        fontSize = 25.sp,
                        color = Color.Magenta
                    )
                }
            }
        }, backgroundColor = Color.DarkGray){
            PokemonCards(pokemons = pokeList!!, navController = navController) //<- setting that variable to another composable which is leveraging the info from the viewModel 
        }