You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.17 09:10:17