android 更改可组合对象的布局方向

jei2mxaa  于 2023-03-27  发布在  Android
关注(0)|答案(5)|浏览(124)

我想将特定组合的方向设置为RTL

@Composable
fun ViewToBeChanged() {
  Row {
     Image()
     Column {
        Text("Title")
        Text("Subtitle")
    }
  }
}

有可能吗?
Jetpack composeLayout documentation提到LocalLayoutDirection
通过更改LocalLayoutDirection compositionLocal来更改可组合项的布局方向。
但是我不知道如何在一个组合物中使用它才能起作用。

bq3bfh9z

bq3bfh9z1#

您可以使用CompositionLocalProvider提供自定义**LocalLayoutDirection**。
比如:

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl ) {
    Column(Modifier.fillMaxWidth()) {
        Text("Title")
        Text("Subtitle")
    }
}
bis0qfac

bis0qfac2#

因为我没有你的形象,我调整你的组合:

@Composable
fun ViewToBeChanged() {
  Row {
    Text("Foo", modifier = Modifier.padding(end = 8.dp))

    Column {
      Text("Title")
      Text("Subtitle")
    }
  }
}

这给我们:

切换到RTL的一种方法是使用CompositionLocalProviderLocalLayoutDirection

@Composable
fun RtlView() {
  CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
    Row {
      Text("Foo", modifier = Modifier.padding(end = 8.dp))

      Column {
        Text("Title")
        Text("Subtitle")
      }
    }
  }
}

在这里,我们说我们正在覆盖CompositionLocalProvider()的尾部lambda的内容的布局方向的CompositionLocal。这给了我们:

这会改变可组合树的这个分支所使用的布局方向,因为可组合本身。英语仍然是一种LTR语言,所以文本不受影响。

xwbd5t1u

xwbd5t1u3#

作为对其他答案的概括,如果在不同的Composable中需要,我们可以定义以下内容

@Composable
fun RightToLeftLayout(content: @Composable () -> Unit) {
    CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
        content()
    }
}

然后简单地使用

RightToLeftLayout {
    ViewToBeChanged()
}

RightToLeftLayout {
    Row {
        ...
    }
}
wnvonmuf

wnvonmuf4#

具体来说,对于Row,您可以使用horizontalArrangement参数来影响RTL / LTR行为。默认值为Arrangement.Start,它会考虑布局方向。使用Arrangement.Absolute中的一个,您可以给予忽略布局方向的排列。
在您的示例中:

@Composable
fun ViewToBeChanged() {
  Row(horizontalArrangement = Arrangement.Right) {
     Image()
     Column {
        Text("Title")
        Text("Subtitle")
    }
  }
}
clj7thdc

clj7thdc5#

使用CompositionLocalProvider更改方向有可能导致所有子布局更改方向,这可能不是我们所期望的。使用LazyColumn或LazyRow可以反转布局,但子布局的功能将受到限制,并且存在一些奇怪的限制,因此这里是我的解决方案

@Composable
fun ReversibleRow(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    reverseLayout: Boolean = false,
    content: @Composable RowScope.() -> Unit
) {
    val originDirection = LocalLayoutDirection.current
    val direction = when {
        reverseLayout -> when (originDirection) {
            LayoutDirection.Rtl -> LayoutDirection.Ltr
            else -> LayoutDirection.Rtl
        }
        else -> originDirection
    }
    CompositionLocalProvider(LocalLayoutDirection provides direction) {
        Row(modifier, horizontalArrangement, verticalAlignment) {
            CompositionLocalProvider(LocalLayoutDirection provides originDirection) {
                content()
            }
        }
    }
}

使用ReversibleRow替换Row。

相关问题