【Android】Jetpack Compose の Row で View の一部を右に寄せる

イメージ

実装方法

Rowの要素を「色が付いた円と色の名前」「選択中」の2要素に分け、horizontalArrangementにArrangement.SpaceBetweenをセットします。

@Composable
fun ColorItem() {
    Row(
        modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            CircleColor()
            ColorName()
        }
        SelectedText()
    }
}

@Composable
private fun CircleColor() {
    Box(
        modifier = Modifier
            .size(30.dp)
            .clip(CircleShape)
            .background(Color(0xFFff6f60))
    )
}

@Composable
private fun ColorName() {
    Text(
        modifier = Modifier.padding(start = 20.dp),
        text = "レッド",
        color = Color(0xFF333333)
    )
}

@Composable
private fun SelectedText() {
    Text(
        text = "選択中",
        modifier = Modifier.padding(end = 15.dp),
        color = Color(0xFF333333)
    )
}

@Preview(showBackground = true)
@Composable
private fun Preview() {
    ColorItem()
}