如何在 Jetpack Compose 中对齐按钮内的不同元素？

Question

我正在尝试构建以下组件，

以下是我的代码，

Button(onClick = { /*TODO*/ }, modifier = Modifier.fillMaxWidth()) {
    Image(painter = painterResource(id = R.drawable.ic_check_circle) , contentDescription = "")
    Text(text = "John Doe", textAlign = TextAlign.Start)
    Image(painter = painterResource(id = R.drawable.ic_arrow_forward), contentDescription = "",
        alignment = Alignment.TopEnd)
}

Answer 1

您可以使用Spacer：

1. Modifier.width(10.dp)会给你静态尺寸。

2. Modifier.weight(1f))将填满所有可用空间。

Button(onClick = { /*TODO*/ }, modifier = Modifier.fillMaxWidth()) {
    Image(painter = painterResource(id = R.drawable.ic_undo) , contentDescription = "")
    Spacer(modifier = Modifier.width(10.dp))
    Text(text = "John Doe")
    Spacer(modifier = Modifier.weight(1f))
    Image(painter = painterResource(id = R.drawable.ic_redo), contentDescription = "")
}

结果：

Answer 2

用 a 将组件包裹在按钮撰写函数中，Row并将horizontalArrangement设为Arrangement.SpaceBetween。请参阅下面的代码片段的修改版本。

       Button(onClick = { /*TODO*/ }, modifier = Modifier.fillMaxWidth()) {
    Row(modifier = Modifier
        .align(alignment = Alignment.CenterVertically)
        .fillMaxWidth(0.9f)) {
        Image(painter = painterResource(id = R.drawable.ic_baseline_subject_24),
            contentDescription = "", alignment = Alignment.CenterStart)
        Spacer(modifier = Modifier.width(10.dp))
        Text(text = "John Doe", textAlign = TextAlign.Start, modifier = Modifier.align(alignment = Alignment.CenterVertically))
    }
    Image(painter = painterResource(id = R.drawable.ic_baseline_subject_24),
        contentDescription = "")
}