5.20

4. 显示商品目录数据

在此任务中，您将收集和更新 HomeScreen 中的界面状态。

1. 在 HomeScreen.kt 文件的 HomeScreen 可组合函数中，添加类型为 HomeViewModel 的新函数参数并对其进行初始化。

 

import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.inventory.ui.AppViewModelProvider

@Composable
fun HomeScreen(
    navigateToItemEntry: () -> Unit,
    navigateToItemUpdate: (Int) -> Unit,
    modifier: Modifier = Modifier,
    viewModel: HomeViewModel = viewModel(factory = AppViewModelProvider.Factory)
)

2. 在 HomeScreen 可组合函数中，添加一个名为 homeUiState 的 val，以从 HomeViewModel 收集界面状态。您将使用 collectAsState()，它会从此 StateFlow 收集值，并通过 State 表示其最新值。

 

import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue

val homeUiState by viewModel.homeUiState.collectAsState()

3. 更新 HomeBody() 函数调用，并将 homeUiState.itemList 传入 itemList 参数。

 

HomeBody(
    itemList = homeUiState.itemList,
    onItemClick = navigateToItemUpdate,
    modifier = modifier.padding(innerPadding)
)

4. 运行应用。请注意，如果您已在应用数据库中保存了商品，系统会显示商品目录列表。如果列表为空，请将一些商品目录商品添加到应用数据库。