android - 如何在 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 :

Modifier.width(10.dp)会给你静态大小。

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 = "")
}

结果: