如何在Compose中交换行和列中的项目

huangapple go评论92阅读模式
英文:

How to swap the items inside Rows and Columns in Compose

问题

以下是翻译好的内容:

这段代码将有助于我们通过找到一些自定义的RowsColumnsArrangement来减少这个逻辑。

  1. Column() {
  2. val swap = someCalculation() // 或者 val swap = true
  3. if (swap) {
  4. TextView("底部", Color.Red)
  5. TextView("顶部", Color.Magenta)
  6. } else {
  7. TextView("顶部", Color.Red)
  8. TextView("底部", Color.Magenta)
  9. }
  10. }

我的意思是减少的代码类似于这样:

  1. Row(horizontalArrangement = CustomArrangement) {
  2. TextView("左侧", Color.Red)
  3. TextView("右侧", Color.Magenta)
  4. }
  5. Column(verticalArrangement = CustomArrangement) {
  6. TextView("顶部", Color.Red)
  7. TextView("底部", Color.Magenta)
  8. }

以展示这样的效果,首先是右边,然后是左边,或者首先是底部,然后是顶部。

英文:

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

  1. Column() {
  2. val swap = someCalculation() // or val swap = true
  3. if (swap) {
  4. TextView("Bottom", Color.Red)
  5. TextView("Top", Color.Magenta)
  6. } else {
  7. TextView("Top", Color.Red)
  8. TextView("Bottom", Color.Magenta)
  9. }
  10. }

I mean the reduced code something like this

  1. Row(horizontalArrangement = CustomArrangement) {
  2. TextView("Left", Color.Red)
  3. TextView("Right", Color.Magenta)
  4. }
  5. Column(verticalArrangement = CustomArrangement) {
  6. TextView("Top", Color.Red)
  7. TextView("Bottom", Color.Magenta)
  8. }

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

答案1

得分: 2

以下是您要翻译的内容:

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

在参考了这个来自HorizontalOrVerticalCenter后,创建了一个新的排列方式Reverse

  1. @Stable
  2. val Reverse = object : Arrangement.HorizontalOrVertical {
  3. override fun toString() = "Arrangement#Reverse"
  4. override fun Density.arrange(
  5. totalSize: Int,
  6. sizes: IntArray,
  7. layoutDirection: LayoutDirection,
  8. outPositions: IntArray,
  9. ) = if (layoutDirection == LayoutDirection.Ltr) {
  10. order(sizes, outPositions, reverseInput = true)
  11. } else {
  12. order(sizes, outPositions, reverseInput = true)
  13. }
  14. override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) {
  15. order(sizes, outPositions, reverseInput = true)
  16. }
  17. private fun order(size: IntArray, outPosition: IntArray, reverseInput: Boolean) {
  18. var current = 0
  19. size.forEachIndexed(reverseInput) { index, it ->
  20. outPosition[index] = current
  21. current += it
  22. }
  23. }
  24. private inline fun IntArray.forEachIndexed(reversed: Boolean, action: (Int, Int) -> Unit) {
  25. if (!reversed) {
  26. forEachIndexed(action)
  27. } else {
  28. for (i in (size - 1) downTo 0) {
  29. action(i, get(i))
  30. }
  31. }
  32. }
  33. }

我可以在内部使用它

  1. @Composable
  2. fun TextView(text: String, color: Color) {
  3. Column {
  4. Text(text = text, fontSize = 30.sp, color = color)
  5. }
  6. }
  7. Row(horizontalArrangement = Reverse) {
  8. TextView("Right", Color.Red)
  9. TextView("Left", Color.Blue)
  10. }
  11. Column(verticalArrangement = Reverse) {
  12. TextView("Right", Color.Red)
  13. TextView("Left", Color.Blue)
  14. }
英文:

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

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

  1. @Stable
  2. val Reverse = object : Arrangement.HorizontalOrVertical {
  3. override fun toString() = "Arrangement#Reverse"
  4. override fun Density.arrange(
  5. totalSize: Int,
  6. sizes: IntArray,
  7. layoutDirection: LayoutDirection,
  8. outPositions: IntArray,
  9. ) = if (layoutDirection == LayoutDirection.Ltr) {
  10. order(sizes, outPositions, reverseInput = true)
  11. } else {
  12. order(sizes, outPositions, reverseInput = true)
  13. }
  14. override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) {
  15. order(sizes, outPositions, reverseInput = true)
  16. }
  17. private fun order(size: IntArray, outPosition: IntArray, reverseInput: Boolean) {
  18. var current = 0
  19. size.forEachIndexed(reverseInput) { index, it ->
  20. outPosition[index] = current
  21. current += it
  22. }
  23. }
  24. private inline fun IntArray.forEachIndexed(reversed: Boolean, action: (Int, Int) -> Unit) {
  25. if (!reversed) {
  26. forEachIndexed(action)
  27. } else {
  28. for (i in (size - 1) downTo 0) {
  29. action(i, get(i))
  30. }
  31. }
  32. }
  33. }

I can use this inside

  1. @Composable
  2. fun TextView(text: String, color: Color) {
  3. Column {
  4. Text(text = text, fontSize = 30.sp, color = color)
  5. }
  6. }
  7. Row(horizontalArrangement = Reverse) {
  8. TextView("Right", Color.Red)
  9. TextView("Left", Color.Blue)
  10. }
  11. Column(verticalArrangement = Reverse) {
  12. TextView("Right", Color.Red)
  13. TextView("Left", Color.Blue)
  14. }

答案2

得分: 1

  1. // 通过在列表中添加可组合项并在需要时反转列表来解决此问题。
  2. val list = ArrayList<@Composable () -> Unit>()
  3. list.add @Composable {...}
  4. list.add @Composable {...}
  5. list.add @Composable {...}
  6. if(swap) {
  7. list.reverse()
  8. }
  9. list.forEach { item ->
  10. item.invoke()
  11. }
  12. // 因此,您的代码应该类似于:
  13. val list = ArrayList<@Composable () -> Unit>()
  14. list.add @Composable {
  15. TextView("Bottom", Color.Red)
  16. }
  17. list.add @Composable {
  18. TextView("Top", Color.Magenta)
  19. }
  20. if(swap) {
  21. list.reverse()
  22. }
  23. list.forEach { item ->
  24. item.invoke()
  25. }
英文:

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

  1. val list = ArrayList&lt;@Composable () -&gt; Unit&gt;()
  2. list.add @Composable {...}
  3. list.add @Composable {...}
  4. list.add @Composable {...}
  5. if(swap) {
  6. list.reverse()
  7. }
  8. list.forEach { item -&gt;
  9. item.invoke()
  10. }

So your code should look something like this:

  1. val list = ArrayList&lt;@Composable () -&gt; Unit&gt;()
  2. list.add @Composable {
  3. TextView(&quot;Bottom&quot;, Color.Red)
  4. }
  5. list.add @Composable {
  6. TextView(&quot;Top&quot;, Color.Magenta)
  7. }
  8. if(swap) {
  9. list.reverse()
  10. }
  11. list.forEach { item -&gt;
  12. item.invoke()
  13. }

huangapple
  • 本文由 发表于 2023年5月17日 20:27:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76272110.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定