Jetpack Compose：LazyColumn内IconButton点击事件失效问题求助

我尝试在IconButton中设置如下点击事件，期望点击后跳转至搜索页面：

IconButton(onClick = {
    navController?.navigate(NavigationScreen.Search.route)
}) {
    Icon(
        painter = painterResource(id = R.drawable.hamburger_setting),
        "UserTweetSetting",
        modifier = Modifier
            .size(12.dp)
            .align(Alignment.CenterVertically),
        tint = Color.DarkGray
    )
}

但由于在Home组件中调用了TweetContentCardRecyclerView，导致TweetContentCard中的IconButton点击事件无法触发。请问是否可以在TweetContentCard中直接设置有效点击事件，还是必须在TweetContentCardRecyclerView中进行设置？

@Composable
fun Home(navController: NavHostController? = null) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
    ) {
        TweetContentCardRecyclerView()
    }
}

@Composable
fun TweetContentCard(
    navController: NavHostController? = null,
    userProfilePicture: Int = 0,
    userFullName: String = "",
    userName: String = "",
    tweetTime: String = "",
    tweetTextContent: String = "",
    tweetImageContent: Int = 0,
    totalComment: String = "",
    totalReTweet: String = "",
    totalLike: String = ""
) {
    Spacer(modifier = Modifier.height(10.dp))

    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 10.dp, end = 10.dp)
            .widthIn(min = 20.dp, max = 500.dp)
            .background(MaterialTheme.colors.background)
    ) {
        Row(modifier = Modifier.padding(top = 5.dp)) {
            // User Profile Picture
            SetImage(
                image = userProfilePicture,
                height = 50,
                width = 50,
                roundCorner = 50
            )
            Spacer(modifier = Modifier.width(10.dp))

            Row(verticalAlignment = Alignment.CenterVertically) {
                // User Full Name
                SetText(text = "$userFullName ", weight = FontWeight.Medium)
                SetText(
                    text = "@",
                    weight = FontWeight.Light,
                    size = 11,
                    color = Color.DarkGray,
                    bottomPadding = 2
                )
                // UserName
                SetText(
                    text = userName,
                    weight = FontWeight.Light,
                    size = 13,
                    color = Color.DarkGray,
                    bottomPadding = 2
                )
                SetText(
                    text = " * ",
                    weight = FontWeight.ExtraLight,
                    size = 10
                )
                // Tweet Post Time
                SetText(
                    text = tweetTime,
                    weight = FontWeight.Light,
                    size = 11,
                    color = Color.DarkGray,
                    bottomPadding = 2
                )

                Spacer(modifier = Modifier.width(40.dp))

                // 点击此处应跳转至搜索页面
                IconButton(onClick = {
                    navController?.navigate(NavigationScreen.Search.route)
                }) {
                    Icon(
                        painter = painterResource(id = R.drawable.hamburger_setting),
                        "UserTweetSetting",
                        modifier = Modifier
                            .size(12.dp)
                            .align(Alignment.CenterVertically),
                        tint = Color.DarkGray
                    )
                }
            }
        }

        Column(modifier = Modifier.padding(top = 5.dp)) {
            if (tweetTextContent.isNotEmpty() and (tweetImageContent != 0)) {
                TweetText(tweetTextContent)
                TweetImage(tweetImageContent)
            } else if (tweetTextContent.isNotEmpty() and (tweetImageContent == 0))
                TweetText(tweetTextContent)
            else
                TweetImage(tweetImageContent)

            Row(modifier = Modifier.padding(top = 5.dp)) {
                TweetReactionItem(
                    icon = R.drawable.tweet_comment,
                    contentDesc = "Comment",
                    text = totalComment
                )
                TweetReactionItem(
                    icon = R.drawable.retweet,
                    contentDesc = "Retweet",
                    text = totalReTweet
                )
                TweetReactionItem(
                    icon = R.drawable.tweet_like,
                    contentDesc = "Like",
                    text = totalLike
                )
            }
            Spacer(modifier = Modifier.height(10.dp))
            Divider(color = Color.Gray, thickness = 0.2.dp)
        }
    }
}

@Composable
fun TweetContentCardRecyclerView() {
    val tweetContent = remember { DataProvider.tweetContent }

    LazyColumn {
        items(tweetContent) { content ->
            TweetContentCard(
                userProfilePicture = content.userProfilePicture,
                userFullName = content.userFullName,
                userName = content.userName,
                tweetTime = content.tweetTime,
                tweetTextContent = content.tweetTextContent,
                tweetImageContent = content.tweetImageContent,
                totalComment = content.totalComment,
                totalReTweet = content.totalReTweet,
                totalLike = content.totalLike
            )
        }
    }
}

问题的核心是**navController没有在组件间正确传递**：Home组件持有navController，但没有传给TweetContentCardRecyclerView，而TweetContentCardRecyclerView也没有把navController传递给TweetContentCard，导致TweetContentCard中的navController始终为null，点击事件中的navController?.navigate自然不会执行。

你有两种可行的解决方式：

方式一：直接传递navController #

通过在组件层级中传递navController，让TweetContentCard拿到有效的导航实例：

1. 修改TweetContentCardRecyclerView，添加navController参数：

@Composable
fun TweetContentCardRecyclerView(navController: NavHostController? = null) {
    val tweetContent = remember { DataProvider.tweetContent }

    LazyColumn {
        items(tweetContent) { content ->
            TweetContentCard(
                navController = navController, // 传递navController
                userProfilePicture = content.userProfilePicture,
                userFullName = content.userFullName,
                userName = content.userName,
                tweetTime = content.tweetTime,
                tweetTextContent = content.tweetTextContent,
                tweetImageContent = content.tweetImageContent,
                totalComment = content.totalComment,
                totalReTweet = content.totalReTweet,
                totalLike = content.totalLike
            )
        }
    }
}

2. 在Home组件中调用TweetContentCardRecyclerView时传入navController：

@Composable
fun Home(navController: NavHostController? = null) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
    ) {
        TweetContentCardRecyclerView(navController = navController) // 传入navController
    }
}

这样修改后，TweetContentCard中的navController就能拿到有效实例，点击事件即可正常触发跳转。

方式二：使用回调函数（解耦组件） #

如果想降低组件间的耦合度，可以通过定义回调函数的方式，把点击逻辑交给上层组件处理：

1. 修改TweetContentCard，添加onSettingClick回调参数，并替换原点击逻辑：

@Composable
fun TweetContentCard(
    onSettingClick: () -> Unit, // 新增回调参数
    userProfilePicture: Int = 0,
    userFullName: String = "",
    userName: String = "",
    tweetTime: String = "",
    tweetTextContent: String = "",
    tweetImageContent: Int = 0,
    totalComment: String = "",
    totalReTweet: String = "",
    totalLike: String = ""
) {
    // ... 其他代码不变 ...
    IconButton(onClick = onSettingClick) { // 使用回调
        Icon(
            painter = painterResource(id = R.drawable.hamburger_setting),
            "UserTweetSetting",
            modifier = Modifier
                .size(12.dp)
                .align(Alignment.CenterVertically),
            tint = Color.DarkGray
        )
    }
    // ... 其他代码不变 ...
}

2. 修改TweetContentCardRecyclerView，添加onSettingClick参数并传递给TweetContentCard：

@Composable
fun TweetContentCardRecyclerView(onSettingClick: () -> Unit) {
    val tweetContent = remember { DataProvider.tweetContent }

    LazyColumn {
        items(tweetContent) { content ->
            TweetContentCard(
                onSettingClick = onSettingClick, // 传递回调
                userProfilePicture = content.userProfilePicture,
                // 其他参数...
            )
        }
    }
}

3. 在Home组件中处理跳转逻辑：

@Composable
fun Home(navController: NavHostController? = null) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
    ) {
        TweetContentCardRecyclerView(
            onSettingClick = {
                navController?.navigate(NavigationScreen.Search.route)
            }
        )
    }
}

这种方式的优势是TweetContentCard不需要依赖NavHostController，组件职责更单一，耦合度更低，更符合Compose的组件设计理念。

内容的提问来源于stack exchange，提问作者Siam Chowdhury