JetpackComposeで上下左右の位置関係を反転できるレイアウトを作る

qiita.com
これの「子を右から左に配置したい」のところを参考にして上下も変更可能にカスタムした。

@Composable
fun InversionLayoutExample(
    layoutDirection: LayoutDirection = LayoutDirection.Ltr,
    idStart: Boolean = true) {
    Column(modifier = Modifier.width(200.dp)) {
        ProvideLayoutDirection(layoutDirection = layoutDirection) {
            InversionLayout(idStart)
        }
    }
}

@Composable
private fun ProvideLayoutDirection(
    layoutDirection: LayoutDirection,
    content: @Composable () -> Unit,
) {
    CompositionLocalProvider(
        LocalLayoutDirection provides layoutDirection,
        content = content,
    )
}

@Composable
private fun InversionLayout(isStart: Boolean = true) {
    Row(
        modifier = Modifier
            .padding(16.dp)
            .width(200.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Box(
            modifier = Modifier
                .width(100.dp)
                .height(200.dp)
                .background(Color.Red),
            contentAlignment = if (isStart) {
                Alignment.TopStart
            } else {
                Alignment.BottomStart
            }
        ) {
            Text(
                text = "AAA",
                textAlign = TextAlign.End
            )
        }
        Box(
            modifier = Modifier
            .width(100.dp)
            .height(200.dp)
            .background(Color.Blue)
        )
    }
}

パラメータのパターンによる違いは以下の通り
InversionLayoutExample(LayoutDirection.Ltr, true)

InversionLayoutExample(LayoutDirection.Ltr, false)

InversionLayoutExample(LayoutDirection.Rtl, true)

InversionLayoutExample(LayoutDirection.Rtl, false)

中心点から対象に配置したいとかそういうときに使えるかも