如何成功地从 ListItem 屏幕导航到 Details 屏幕（Jetpack Compose）

Question

我正在练习撰写导航。我制作了一个显示带有图像的 ListItem 的应用程序，在我称之为 HomeScreen 的地方，当单击特定项目时，它会导航到包含更多信息/详细信息的目的地，在我称之为 HomeInfoScreen 的地方.为此，我使用了 Navigation compose Arugments。我基本上是通过对Android Developers Rally Compose 进行基准测试来做到这一点的。

但问题是每当我单击任何行时，它都会将我带到第一个项目的详细信息，无论我单击哪一个。

我相信问题来自 HomeScreen（请记住，我说过这是我要导航的目的地）

我之前研究过，并得到了将我的模型对象作为参数传递的想法。 但我认为我做错了什么，因为我得到了错误，我不知道如何解决它。

请理解，我以这种格式安排了多个可组合的代码；
SecondBodyElement -> SecondBodyGrid ------> HomeContentScreen

最后，我在HomeScreen 上致电HomeContentScreen。

第二身体元素；

@Composable
fun SecondBodyElement(
    @StringRes text: Int,
    @DrawableRes drawable: Int,
    modifier: Modifier = Modifier,
    onHomeCardClick: (Int) -> Unit
) {

    Surface(
        shape = MaterialTheme.shapes.small,
        elevation = 10.dp,
        modifier = modifier
            .padding(horizontal = 12.dp, vertical = 12.dp)
            .clip(shape = RoundedCornerShape(corner = CornerSize(8.dp)))
            .clickable { onHomeCardClick(drawable) }
    ) {
        Column(
            horizontalAlignment = Alignment.Start,
            modifier = Modifier
        ) {
            Image(
                painter = painterResource(drawable),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(300.dp)
            )
            Text(
                text = stringResource(text),
                style = MaterialTheme.typography.h3,
                maxLines = 3,
                modifier = Modifier.padding(horizontal = 8.dp, vertical = 16.dp)
            )
        }

    }
}

第二体网格；

@Composable
fun SecondBodyGrid(
    onHomeCardClick: (Int) -> Unit = {},
) {

    LazyVerticalGrid(
        columns = GridCells.Fixed(1),
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier
            .height(1450.dp)
        //.disabledVerticalPointerInputScroll()
    ) {
        items(SecondBodyData) { item ->
            SecondBodyElement(
                onHomeCardClick = onHomeCardClick,
                drawable = item.drawable,
                text = item.text,
                modifier = Modifier
                    .height(380.dp)
                    .clickable { onHomeCardClick(item.drawable + item.text) }
            )
        }
    }
}

主页内容屏幕；

@Composable
fun HomeContentScreen(
    modifier: Modifier = Modifier,
    onHomeCardClick: (String) -> Unit,
    accountType: String? = HomeInfoModel.homeInfoModelList.first().title
) {
    val homeInfo = remember(accountType) { HomeInfoModel.getHomeInfo(accountType) }
    Column(
        modifier
            .verticalScroll(rememberScrollState())
            .padding(vertical = 16.dp)
    ) {
        HomeQuote()
        HomeTitleSection(title = R.string.favorite_collections) {
            SecondBodyGrid { onHomeCardClick(homeInfo.title) }
        }
    }
}

最后是主屏幕；

@Composable
fun HomeScreen(onHomeCardClick: (String) -> Unit) {
    HomeContentScreen(onHomeCardClick = onHomeCardClick)
}

请像我说的那样我正在练习，我不知道你需要什么。但我将添加我的 NavHost（导航图）和模型文件，以防万一，如果您需要任何其他东西，我很乐意提供。

模型，家庭信息模型；

data class HomeInfoData(
    val id: Int,
    val title: String,
    val sex: String,
    val age: Int,
    val description: String,
    val homeInfoImageId: Int = 0
)


object HomeInfoModel {
    val homeInfoModelList = listOf(
        HomeInfoData(
            id = 1,
            title = "There's Hope",
            sex = "Male",
            age = 14,
            description = "Monty enjoys chicken treats and cuddling while watching Seinfeld.",
            homeInfoImageId = R.drawable.ab1_inversions
        ),
        ....
    )

    fun getHomeInfo(accountName: String?): HomeInfoData {
        return homeInfoModelList.first { it.title == accountName }
    }
}

我的 NavHost（导航图）；

....

        composable(route = Home.route) {
            HomeScreen(
                onHomeCardClick = { accountType ->
                    navController.navigateToHomeInfoScreen(accountType)
                }
            )
        }
        composable(
            route = HomeInfoDestination.routeWithArgs,
            arguments = HomeInfoDestination.arguments,
        ) { navBackStackEntry ->
            // Retrieve the passed argument
            val accountType =
                navBackStackEntry.arguments?.getString(HomeInfoDestination.accountTypeArg)

            // Pass accountType
            HomeInfoScreen(accountType)

        }

        ....
    }
}

....

private fun NavHostController.navigateToHomeInfoScreen(accountType: String) {
    this.navigateSingleTopTo("${HomeInfoDestination.route}/$accountType")
}

我认为问题出在主屏幕上，但我真的不知道，所以我要添加 HomeInfoScreen，抱歉不再提出这个问题。

主页信息屏幕；

@Composable
fun HomeInfoScreen(
    accountType: String? = HomeInfoModel.homeInfoModelList.first().title
) {
    DisplayHomeInfo(accountType)
}

@Composable
fun WelcomeText() {
    Text(
        text = "Welcome, to Home Information",
        style = MaterialTheme.typography.h3,
        modifier = Modifier.padding(horizontal = 12.dp, vertical = 18.dp)
    )
}

@Composable
fun HomeInfoDetails(
    accountType: String? = HomeInfoModel.homeInfoModelList.first().title
) {
    val homeInfo = remember(accountType) { HomeInfoModel.getHomeInfo(accountType) }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
    ) {
        Image(
            painter = painterResource(id = homeInfo.homeInfoImageId),
            contentDescription = null,
            modifier = Modifier
                .fillMaxWidth()
                .clip(shape = RoundedCornerShape(topEnd = 4.dp, bottomEnd = 4.dp)),
            contentScale = ContentScale.Crop
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(
            text = homeInfo.title,
            style = MaterialTheme.typography.h3
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(
            text = homeInfo.description,
            style = MaterialTheme.typography.h5
        )
    }
}


// Step: Home screen - Scrolling
@Composable
fun DisplayHomeInfo(
    accountType: String? = HomeInfoModel.homeInfoModelList.first().title
) {
    Column(
        Modifier
            .verticalScroll(rememberScrollState())
            .padding(vertical = 16.dp)
    ) {
        WelcomeText()
        HomeInfoDetails(accountType)
    }
}

为了清楚起见；在成功屏幕上单击时，如何导航到确切的项目。
我会真诚地感谢任何帮助。非常感谢您的帮助。

Answer 1

如果有人需要这个，我已经能够做到这一点。我遵循了一个网站的Developer's Breach 教程。