How to swap the items inside Rows and Columns in Compose

It will be helpful if we can reduce this logic by finding some custom Arrangement for RowsandColumns` to swap the order of items.

Column() {
    val swap = someCalculation() //  or val swap = true
    if (swap) {
        TextView("Bottom", Color.Red)
        TextView("Top", Color.Magenta)
    } else {
        TextView("Top", Color.Red)
        TextView("Bottom", Color.Magenta)
    }
}

I mean the reduced code something like this

Row(horizontalArrangement = CustomArrangement) {
    TextView("Left", Color.Red)
    TextView("Right", Color.Magenta)
}

Column(verticalArrangement = CustomArrangement) {
    TextView("Top", Color.Red)
    TextView("Bottom", Color.Magenta)
}

to show this Right first and Left Second or Bottom first and Top second.

> Arrangement https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement

After referring this Center from HorizontalOrVertical created a new Arrangement Reverse.

@Stable
val Reverse = object : Arrangement.HorizontalOrVertical {

   override fun toString() = "Arrangement#Reverse"
 
   override fun Density.arrange(
        totalSize: Int,
        sizes: IntArray,
        layoutDirection: LayoutDirection,
        outPositions: IntArray,
    ) = if (layoutDirection == LayoutDirection.Ltr) {
        order(sizes, outPositions, reverseInput = true)
    } else {
        order(sizes, outPositions, reverseInput = true)
    }

    override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) {
        order(sizes, outPositions, reverseInput = true)
    }

    private fun order(size: IntArray, outPosition: IntArray, reverseInput: Boolean) {
        var current = 0
        size.forEachIndexed(reverseInput) { index, it ->
            outPosition[index] = current
            current += it
        }
    }

    private inline fun IntArray.forEachIndexed(reversed: Boolean, action: (Int, Int) -> Unit) {
        if (!reversed) {
            forEachIndexed(action)
        } else {
            for (i in (size - 1) downTo 0) {
                action(i, get(i))
            }
        }
    }
}

I can use this inside

@Composable
fun TextView(text: String, color: Color) {
    Column {
        Text(text = text, fontSize = 30.sp, color = color)
    }
}

 Row(horizontalArrangement = Reverse) {
    TextView("Right", Color.Red)
    TextView("Left", Color.Blue)
}

Column(verticalArrangement = Reverse) {
    TextView("Right", Color.Red)
    TextView("Left", Color.Blue)
}

I fix this by adding composable items in a list and reversing the list if needed.

val list = ArrayList<@Composable () -> Unit>()

list.add @Composable {...}
list.add @Composable {...}
list.add @Composable {...}

if(swap) {
    list.reverse()
}

list.forEach { item ->
    item.invoke()
}

So your code should look something like this:

val list = ArrayList<@Composable () -> Unit>()

list.add @Composable {
    TextView("Bottom", Color.Red)
}
list.add @Composable {
    TextView("Top", Color.Magenta)
}

if(swap) {
    list.reverse()
}

list.forEach { item ->
    item.invoke()
}