Jetpack compose 中的自动镜像答案

【问题标题】：Auto mirroring in jetpack compose IconsJetpack compose 中的自动镜像
【发布时间】：2021-11-05 07:05:04
【问题描述】：

我现在正在使用 jetpack compose，我的应用有两个语言环境，其中一个是 RTL，另一个是 LTR。
当用户更改语言环境时一切正常，整个布局将重新排列。

我唯一的问题是 Jetpack Compose Icons 的镜像。我有一个这样的图标按钮：

IconButton(onClick = { backView(true) }) {
    Icon(Icons.Filled.ArrowBack, contentDescription = "back")
}

用于返回导航。
我的问题是当用户切换到 RTL 语言环境时，这个图标不会被镜像。

在 Compose 之前，我导入了 arrow_back 向量，它有一个用于支持 RTL 的 auto mirroring 复选框。

如何在 Compose 中实现 RTL 支持？

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

使用scale镜像图标：

IconButton(onClick = { backView(true) }) {
    Icon(modifier = Modifier.scale(scaleX = -1f, scaleY = 1f), 
    imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
}

如果您想在整个应用中执行此操作，您只需创建一个修饰符扩展函数即可。这里我们称之为mirror：

@Stable
fun Modifier.mirror(): Modifier {
    if (Locale.getDefault().layoutDirection == LayoutDirection.RTL)
        return this.scale(scaleX = -1f, scaleY = 1f)
    else
        return this
}

然后应用它：

IconButton(onClick = { backView(true) }) {
    Icon(modifier = Modifier.mirror(), 
    imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
}

见Scale

【讨论】：

我正要提到这一点，但是您知道先生，这对于没有垂直对称的图标不起作用，因为旋转会使它们看起来像是倒置的。虽然它适用于箭头，但这个问题应该吸引更普遍的答案。
我更新了我的解决方案。使用 scaleX 参数设置为 -1 的比例。使用负值缩放会产生镜像。
是的，应该这样做。
感谢您的回答。这种方法效果很好，但是我需要在使用图标的任何地方检查语言环境。（虽然以通常的方式，我的意思是什么时候不使用 Compose，但你不需要）。有什么方法可以自动进行镜像过程并基于语言环境？（就像您在添加新向量时选中“支持 RTL”复选框一样）@Johann
@Mohammad 我更新了我的回复。如果启用 RTL，只需使用自定义修饰符即可应用缩放。