I am trying to set onClick() in IconButton like this
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
)
}
}
I call the TweetContentCardRecyclerView() funtion in Home(). For that reason, onClick() where i set in IconButton is not working. Can i set onClick() in another way in TweetContentCard() so that it can work or I have to set onClick() in TweetContentCardRecyclerView() ?
sorry for my poor english
@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))
**If user click this, he should to the Search Screen**
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
)
}
}
}
>Solution :
you’ve defined navController arg optional and you don’t pass it to TweetContentCard(). As a result it’s null and because of your null check before navigate (navController?.) it doesn’t be executed at all.
fun TweetContentCard(
navController: NavHostController? = null,// OPTIONAL
It can be solved by passing navController:
fun TweetContentCardRecyclerView(navController:NavHostController) {
LazyColumn {
items(tweetContent) { content ->
TweetContentCard(
navController = navController,
userProfilePicture = content.userProfilePicture,
userFullName = content.userFullName,
....
But it’s good practice to pass the onClick as lambda to your item. No need to pass navController
@Composable
fun TweetContentCard(
modifier: Modifier = Modifier,
onClick: () -> Unit,
...
) {
...
IconButton(onClick = { onClick() }) {
...