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)
)
  1. 在 HomeScreen 可组合函数中,添加一个名为 homeUiState 的 val,以从 HomeViewModel 收集界面状态。您将使用 collectAsState(),它会从此 StateFlow 收集值,并通过 State 表示其最新值。
 
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue

val homeUiState by viewModel.homeUiState.collectAsState()
  1. 更新 HomeBody() 函数调用,并将 homeUiState.itemList 传入 itemList 参数。
 
HomeBody(
    itemList = homeUiState.itemList,
    onItemClick = navigateToItemUpdate,
    modifier = modifier.padding(innerPadding)
)
  1. 运行应用。请注意,如果您已在应用数据库中保存了商品,系统会显示商品目录列表。如果列表为空,请将一些商品目录商品添加到应用数据库。

显示商品目录商品的手机屏幕

 
 
posted @ 2024-06-19 22:17  混沌武士丞  阅读(2)  评论(0编辑  收藏  举报