5.20
4. 显示商品目录数据
在此任务中,您将收集和更新 HomeScreen
中的界面状态。
- 在
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)
)
- 在
HomeScreen
可组合函数中,添加一个名为homeUiState
的val
,以从HomeViewModel
收集界面状态。您将使用collectAsState
()
,它会从此StateFlow
收集值,并通过State
表示其最新值。
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
val homeUiState by viewModel.homeUiState.collectAsState()
- 更新
HomeBody()
函数调用,并将homeUiState.itemList
传入itemList
参数。
HomeBody(
itemList = homeUiState.itemList,
onItemClick = navigateToItemUpdate,
modifier = modifier.padding(innerPadding)
)
- 运行应用。请注意,如果您已在应用数据库中保存了商品,系统会显示商品目录列表。如果列表为空,请将一些商品目录商品添加到应用数据库。