主页 / coding / 问题 / 79092445
Accepted
GVG
Asked: 2024-10-16 12:14:31 +0800 CST

Jetpack Compose 行中的最后一个元素未显示

  • 772

我有以下聊天视图，但是行中的最后一个元素（KeyboardArrowRight 图标）没有显示。我无论如何也想不出为什么。任何对此有新见解的人都将不胜感激！

如果我对中间元素（包含个人资料名称、发送时间、最后一条消息和未读消息圆圈指示器的中间列）应用固定宽度修饰符，则会显示 KeyboardArrowRight 图标，但显然不想这样做，因为它在不同宽度的屏幕上看起来不太好

@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(
                    verticalArrangement = Arrangement.spacedBy(5.dp),
                    horizontalAlignment = Alignment.Start,
                ) {

                    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 = "null",
                    tint = Color.Gray,
                    modifier = Modifier.size(25.dp)
                )


            }

        }
    }

}
android-jetpack-compose

1 个回答

  1. Best Answer

    Jetpack Compose 按照可组合子项出现的顺序对其进行测量。由于您没有width为最顶层的 的子项指定任何修饰符Row，因此每个子项将隐式使用wrapContentWidth()。然后，Jetpack Compose 将为每个子项提供其请求的屏幕空间，在本例中，这会将最后一个Icon可组合项推离屏幕。

    您可以通过weight在中间应用修改器来解决这个问题Column，如下所示：

    Column(
    modifier = Modifier.weight(1f),
    verticalArrangement = Arrangement.spacedBy(5.dp),
    horizontalAlignment = Alignment.Start,
) {
    //...
}

    加权 Composable 是在测量所有未加权子项之后测量的。因此，所有未加权子项将占用其所需的宽度，而加权 ComposableColumn占用剩余的宽度。这可确保不会有任何内容被推离屏幕。

    输出：

    截屏

    • 2

相关问题