Jetpack Compose 水平对齐问题

alf*_*tap 4 android android-jetpack-compose

在此输入图像描述

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

@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)
        }
    }
}    
Run Code Online (Sandbox Code Playgroud)

Gab*_*tti 6

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

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

在此输入图像描述