Jetpack Compose中Row最后一个KeyboardArrowRight图标不显示求助
解决Jetpack Compose聊天视图中右侧箭头图标不显示的问题
问题出在外层Row布局里:中间包含用户名、消息内容的Column没有设置权重,它会默认占用尽可能多的空间,直接把最右侧的KeyboardArrowRight图标挤出了屏幕范围。
只要给中间的Column添加Modifier.weight(1f),就能让它自动填充Row中除了头像和右侧图标之外的剩余空间,同时内部的Spacer(modifier = Modifier.weight(1F))也能正常工作,完全不用设置固定宽度,适配所有屏幕尺寸。
修改后的完整代码如下:
@Composable fun ChatView() { val configuration = LocalConfiguration.current val screenWidth = configuration.screenWidthDp.dp val chatIsNew = true val chats = 4 LazyVerticalGrid( columns = GridCells.Fixed(1), contentPadding = PaddingValues(30.dp), verticalArrangement = Arrangement.spacedBy(10.dp), ) { items(chats) { chat -> Row( horizontalArrangement = Arrangement.spacedBy(10.dp), verticalAlignment = Alignment.CenterVertically, modifier = Modifier .fillMaxWidth() .border( width = 1.dp, color = Color.Black, shape = RoundedCornerShape(5.dp) ) .padding(10.dp) ) { //Profile image Box( contentAlignment = Alignment.Center, modifier = Modifier .size( screenWidth / 4.25F, screenWidth / 4.25F ) .background( color = Color.Black.copy(alpha = 0.1F), shape = CircleShape ) ) { } // 关键改动:给Column添加weight(1f) Column( verticalArrangement = Arrangement.spacedBy(5.dp), horizontalAlignment = Alignment.Start, modifier = Modifier.weight(1f) ) { Row( verticalAlignment = Alignment.CenterVertically ) { //Profile Name Text( text = "Profile Name", style = TextStyle( fontSize = 18.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center, color = if (isSystemInDarkTheme()) { Color.White } else { Color.Black }, ), maxLines = 1 ) Spacer(modifier = Modifier.weight(1F)) //Sent time Text( text = "10:00", style = TextStyle( fontSize = 14.sp, textAlign = TextAlign.Center, color = Color.Gray, ) ) } Row( verticalAlignment = Alignment.CenterVertically ) { //Last message Text( text = "Last message to go here", style = TextStyle( fontSize = 14.sp, textAlign = TextAlign.Start, color = Color.Gray, ), maxLines = 2, overflow = TextOverflow.Ellipsis, ) Spacer(modifier = Modifier.weight(1F)) //New chat and unread message circle indicator if (chatIsNew == true) { Box( contentAlignment = Alignment.Center, modifier = Modifier .size(12.dp) .background( color = Color.Blue.copy(alpha = 0.75F), shape = CircleShape ) ) { } } } } Icon( imageVector = Icons.Rounded.KeyboardArrowRight, contentDescription = "进入聊天", tint = Color.Gray, modifier = Modifier.size(25.dp) ) } } } }
另外顺便优化了图标的contentDescription,从"null"改成有意义的文本,符合无障碍开发规范。
内容的提问来源于stack exchange,提问作者GVG
相关产品推荐
相关产品推荐

