Как поменять местами элементы внутри строк и столбцов в Compose

Будет полезно, если мы сможем уменьшить эту логику, найдя несколько пользовательских Arrangement for RowsandColumns, чтобы поменять местами порядок элементов.

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

Я имею в виду сокращенный код примерно так

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

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

чтобы показать это справа сначала и слева во-вторых или внизу сначала и вверху во-вторых.

ответит на мой вопрос, так как я получил то, что я точно знаю, экспериментируя часами.

J.K 17.05.2023 19:34
1
1
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я исправляю это, добавляя составные элементы в список и реверсируя список, если это необходимо.

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

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

if (swap) {
    list.reverse()
}

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

Итак, ваш код должен выглядеть примерно так:

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()
}

Хорошо. Я проголосую MESP. Цените свои усилия.

J.K 17.05.2023 19:36

@ J.K Это сработало для вас?

MESP 19.05.2023 10:06

Я получил Arrangement Mesp. Можете ли вы проверить мой ответ, сообщите свой отзыв.

J.K 19.05.2023 10:22
Ответ принят как подходящий

Аранжировка https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Аранжировка

После ссылки на это Center от HorizontalOrVertical создал новую аранжировку 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))
            }
        }
    }
}

Я могу использовать это внутри

@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)
}

Выглядит как очень хорошее решение с аранжировкой

Thracian 17.05.2023 19:37

Другие вопросы по теме