强制 Jetpack Compose 显示 2 个 Text() 组件，一个在下一个

Question

嗨，我有这样一段代码：它绘制电影卡。我遇到的问题是仅打印了两个文本组件之一。我尝试了很多版本的修改，但总是只有一篇文字。你能解释一下为什么吗？ :(

item {
    key(movie.id) {
        Box(contentAlignment = Alignment.CenterStart) {
            StandardCardLayout(
                modifier = Modifier
                    .aspectRatio(1.25f)
                    .padding(8.dp)
                    .then(
                        if (index == 0)
                            Modifier.focusOnInitialVisibility(isFirstItemVisible)
                        else Modifier
                    ),
                imageCard = {
                    CardLayoutDefaults.ImageCard(
                        shape = CardDefaults.shape(shape = JetStreamCardShape),
                        border = CardDefaults.border(
                            focusedBorder = Border(
                                border = BorderStroke(
                                    width = JetStreamBorderWidth,
                                    color = MaterialTheme.colorScheme.onSurface
                                ),
                                shape = JetStreamCardShape
                            ),
                            pressedBorder = Border(
                                border = BorderStroke(
                                    width = JetStreamBorderWidth,
                                    color = MaterialTheme.colorScheme.border
                                ),
                                shape = JetStreamCardShape
                            ),
                        ),
                        scale = CardDefaults.scale(focusedScale = 1f),
                        onClick = { onMovieSelected(movie) },
                        interactionSource = it
                    ) {
                        AsyncImage(
                            model = ImageRequest.Builder(LocalContext.current)
                                .data(movie.posterUri)
                                .crossfade(true)
                                .build(),
                            contentDescription = StringConstants
                                .Composable
                                .ContentDescription
                                .moviePoster(movie.name),
                            contentScale = ContentScale.Crop,
                            modifier = Modifier.fillMaxWidth().aspectRatio(1.77f)
                        )
                        Text(
                            text = movie.name.take(20),
                            style = MaterialTheme.typography.bodySmall.copy(
                                fontWeight = FontWeight.SemiBold,
                                lineHeight = 2.em
                            ),
                            textAlign = TextAlign.Center,
                            modifier = modifier
//                                                .alpha(1f)
                                .fillMaxWidth()
                                .wrapContentHeight(align = Alignment.Top, unbounded = true)
//                                                .padding(top = 26.dp)
                                .background(color = Color.Black)
                                .align(Alignment.TopCenter)
                            ,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis,
                            color = Color.White,
                            lineHeight = 15.sp,
                            fontSize = 10.sp,
                        )
                        Text(
                            text = "(${movie.stars}) " + movie.releaseDate,
                            style = MaterialTheme.typography.bodySmall.copy(
                                fontWeight = FontWeight.SemiBold
                            ),
                            textAlign = TextAlign.Center,
                            modifier = modifier
//                                                .alpha(1f)
                                .fillMaxWidth()
                                .wrapContentHeight(align = Alignment.Top, unbounded = true)
//                                                .padding(top = 26.dp)
                                .background(color = Color.Black)
                                .align(Alignment.BottomCenter)
                            ,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis,
                            color = Color.White,
                            lineHeight = 15.sp,
                            fontSize = 10.sp
                        )
                    }
                },
                title = {},
            )
        }
    }
}

我尝试使用：

Modifier.wrapContentHeight
Modifier.height
Modifier.aspectRatio
lineHeight
etc...

预览单个“项目”

正如您在图像上看到的，它只打印一个文本。 我知道，我可以用“ “转义序列，并使用一个文本组件，但我需要为每个文本使用不同的样式。

Answer 1

这完全取决于

CardLayoutDefaults.ImageCard

对为其最后一个参数提供的内容所做的操作。尽管有这个名称，但它似乎没有使用特定的策略来布局其子项，因此所有子项（即

AsyncImage

和两个

Text

）都放置在彼此之上。

即使不接触

CardLayoutDefaults.ImageCard

，也可以通过提供自己的布局组件轻松修复，具体取决于您希望这三个元素如何分布：如果它们应该垂直排列，您应该将三个组件包装在

Column

中。如果它们应该水平排列，请将它们包裹在

Row

中。

如果您想了解更多信息，文档有很多关于 Compose 布局的内容。