android - Jetpack Compose 水平对齐问题

Question

我需要将图像和文本视图定位到卡片的开头，子列水平居中对齐，但是正如您从照片中看到的那样，列以某种方式被拉伸了放置图像的屏幕宽度和中心的文本视图。任何人都可以看到我的代码有任何问题吗？

@Composable
fun TrainerCard(profile: TrainerProfile) {
Card(modifier = Modifier
    .height(180.dp)
    .fillMaxWidth()
    .padding(4.dp)) {
    Column(modifier = Modifier
        .fillMaxHeight()
        .width(120.dp)
        .border(1.dp, color = Color.Red),
        horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            modifier = Modifier
                .size(120.dp)
                .padding(top = 4.dp, start = 4.dp),
            painter = painterResource(R.drawable.pokepals_logo),
            contentDescription = null
        )
        Text(
            text = profile.trainerName,
            style = MaterialTheme.typography.subtitle1)
        }
    }
}    

标签： androidandroid-jetpack-compose

Answer 1

在您Column添加wrapContentWidth(Alignment.Start)修饰符：

    Column(modifier = Modifier
        .fillMaxHeight()
        .width(120.dp)
        .wrapContentWidth(Alignment.Start)
        .border(1.dp, color = Color.Red),
        horizontalAlignment = Alignment.CenterHorizontally
        )