Thread
#compose
    j

    julioromano

    1 year ago
    Is there a way to tell a
    Row
    to invert the order it lays out its content? (e.g. LTR instead of RTL)
    Zach Klippenstein (he/him) [MOD]

    Zach Klippenstein (he/him) [MOD]

    1 year ago
    You mean other than actually just changing the layout direction, I presume? (Not actually sure if doing so would even have that effect, but I would think)
    j

    julioromano

    1 year ago
    yes, but it has to be “local” somehow, i.e it shouldn’t affect other composables
    I mean… changing the
    LayoutDirection
    would be great, but can it be done for that
    Row
    only?
    Zach Klippenstein (he/him) [MOD]

    Zach Klippenstein (he/him) [MOD]

    1 year ago
    Change it back before adding the actual row children? Not very elegant, admittedly, but probably easier than reimplementing Row from scratch
    j

    julioromano

    1 year ago
    Sounds like I suck at explaining… lemme show an example
    with boolean param: false ||A|B|……|| with boolean param: true ||……|B|A|| (|| are the screen boundaries, the dots are just empty sapce)
    Zach Klippenstein (he/him) [MOD]

    Zach Klippenstein (he/him) [MOD]

    1 year ago
    eg
    val originalDirection = LocalLayoutDirection.current
    val flippedDirection = if (originalDirection == Ltr) Rtl else Ltr
    CompositionLocalProvider(LocalLayoutDirection provides flippedDirection) {
      Row(…) {
        CompositionLocalProvider(LocalLayoutDirection provides originalDirection) {
          // Row children here
        }
      }
    }
    j

    julioromano

    1 year ago
    oh super, sounds like a great place to start!
    Zach Klippenstein (he/him) [MOD]

    Zach Klippenstein (he/him) [MOD]

    1 year ago
    of course you could factor that all out into a custom
    Row
    if you needed to reuse it lots
    j

    julioromano

    1 year ago
    Thanks a bunch, leaving this here for whoever might come by:
    @Composable
    fun InvertibleRow(
      isInverted: Boolean,
      modifier: Modifier = Modifier,
      horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
      verticalAlignment: Alignment.Vertical = <http://Alignment.Top|Alignment.Top>,
      content: @Composable RowScope.() -> Unit
    ) {
      val layoutDirection: LayoutDirection = LocalLayoutDirection.current
      CompositionLocalProvider(
        LocalLayoutDirection provides if (isInverted) layoutDirection.invert() else layoutDirection
      ) {
        Row(
          modifier = modifier,
          horizontalArrangement = horizontalArrangement,
          verticalAlignment = verticalAlignment
        ) {
          CompositionLocalProvider(LocalLayoutDirection provides layoutDirection) {
            content()
          }
        }
      }
    }
    
    private fun LayoutDirection.invert(): LayoutDirection = when (this) {
      LayoutDirection.Ltr -> LayoutDirection.Rtl
      LayoutDirection.Rtl -> LayoutDirection.Ltr
    }
    cb

    cb

    1 year ago
    A much easier way is to use
    LazyRow
    and
    reverseLayout
    . This honors the layout direction:
    LazyRow(reverseLayout = true)