获取 ViewModel 以在 Jetpack Compose 中显示信息

Question

所以我对如何创建 ViewModel 并将其传递到我的可组合项中有点困惑，这样我就可以使用数据 Class 模型在 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 的新手，所以我的想法是应用视图模型，就像我应用常规 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。它最终完美地工作。

获取 ViewModel 以在 Jetpack Compose 中显示信息

Getting the ViewModel in to display information in Jetpack Compose

android

kotlin

android-viewmodel

android-jetpack-compose