Jetpack Compose中两个Text组件仅显示一个的问题排查

我在开发TV端Jetpack Compose应用时遇到过完全一样的问题：用TvLazyVerticalGrid的item嵌套StandardCardLayout和ImageCard做电影卡片，内部放了AsyncImage和两个不同样式的Text组件，但不管怎么调Modifier.wrapContentHeight、height、aspectRatio这些属性，始终只能显示其中一个Text。试过把两个Text用换行合并成一个，但因为需要不同的文本样式，这个方案根本没法用。

折腾半天后才发现，问题根源出在外部的TvLazyVerticalGrid设置了fillMaxHeight()——这个修饰符会强制网格占满整个垂直空间，进而让每个卡片item的高度被不合理地限制，导致第二个Text被挤压出可视区域。

错误示例（导致问题的代码） #

TvLazyVerticalGrid(
    columns = GridCells.Fixed(3),
    modifier = Modifier.fillMaxHeight() // 这里是问题所在
) {
    items(movieList) { movie ->
        StandardCardLayout(
            modifier = Modifier.aspectRatio(16f/9f)
        ) {
            ImageCard(onClick = { /* 处理点击 */ }) {
                Column {
                    AsyncImage(
                        model = movie.posterUrl,
                        contentDescription = movie.title,
                        modifier = Modifier.fillMaxWidth()
                    )
                    Text(
                        text = movie.title,
                        style = MaterialTheme.typography.headlineSmall,
                        color = Color.White
                    )
                    Text(
                        text = movie.releaseYear,
                        style = MaterialTheme.typography.bodyMedium,
                        color = Color.Gray
                    )
                }
            }
        }
    }
}

修正后的代码 #

只需要移除TvLazyVerticalGrid上的fillMaxHeight()，改用fillMaxSize()或者根据布局需求使用wrapContentHeight()，就能让网格根据卡片的实际内容高度分配空间，两个Text组件就能正常显示了：

TvLazyVerticalGrid(
    columns = GridCells.Fixed(3),
    modifier = Modifier.fillMaxSize() // 替换fillMaxHeight()
) {
    items(movieList) { movie ->
        StandardCardLayout(
            modifier = Modifier.aspectRatio(16f/9f)
        ) {
            ImageCard(onClick = { /* 处理点击 */ }) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Bottom
                ) {
                    AsyncImage(
                        model = movie.posterUrl,
                        contentDescription = movie.title,
                        modifier = Modifier.fillMaxWidth()
                    )
                    Text(
                        text = movie.title,
                        style = MaterialTheme.typography.headlineSmall,
                        color = Color.White
                    )
                    Text(
                        text = movie.releaseYear,
                        style = MaterialTheme.typography.bodyMedium,
                        color = Color.Gray
                    )
                }
            }
        }
    }
}

补充说明 #

如果需要更精细地控制卡片内部的垂直布局，可以在Column里添加verticalArrangement参数（比如Arrangement.Bottom让文本靠底部显示），同时确保内部组件的修饰符不会过度限制空间。核心就是别让外部的网格组件强制占满垂直高度，给卡片内容留出足够的显示空间。

内容的提问来源于stack exchange，提问作者Michał Pawłowski