Jetpack Compose图标的自动镜像功能

Question

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

我唯一遇到的问题是Jetpack Compose图标的镜像。 我有一个像这样的IconButton：

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

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

在使用Compose之前，我导入了arrow_back矢量图标，并且它有一个复选框用于支持RTL的自动镜像。

我如何在Compose中实现RTL支持？

- Mohammad Derakhshan

Answer 1

使用 scale 来镜像图标：

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

如果您想在整个应用程序中进行此操作，您可以创建一个Modifier扩展函数。这里我们将其称为mirror：

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

然后应用它：

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

请参见缩放

- Johann

---

我正要提到这一点，但您看，先生，对于没有垂直对称的图标来说，这是行不通的，因为旋转会让它们看起来像是倒置的。它适用于箭头，但是这个问题应该寻求更普遍的答案。 - Richard Onslow Roper

应该可以了。 - Richard Onslow Roper

谢谢您的答案。这个方法很好，但我需要在使用图标的所有位置检查区域设置。（而通常情况下，也就是不使用Compose时，您不需要检查）。有没有办法可以自动基于区域设置镜像过程？（就像在添加新向量时勾选“支持RTL”复选框一样）@Johann - Mohammad Derakhshan

@Mohammad 我更新了我的回复。只需使用自定义修饰符，如果启用RTL，则应用缩放。 - Johann

更新：此问题已在1.2.0-alpha06版本中得到修复并发布：https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.2.0-alpha06。您还需要在矢量文件中添加“android:autoMirrored =“true””。 - dumbfingers

Answer 2

注意：本答案基于@Johann的回答。但是这个答案在更新的Compose版本中效果更好。

• Create a Modifier extension.

  @Stable
  fun Modifier.mirror(): Modifier = composed {
      if (LocalLayoutDirection.current == LayoutDirection.Rtl)
          this.scale(scaleX = -1f, scaleY = 1f)
      else
          this
  }
  

• Then use the mirror() where you need.

  Icon(
      imageVector = Icons.Default.ArrowBack,
      contentDescription = null,
      modifier = Modifier.mirror()
  )
  

- Ali Moghadam

Answer 3

这样做不会镜像图标，但是有效：
我添加了扩展材料图标的依赖，并使用了ArrowForward而不是ArrowBack。

implementation("androidx.compose.material:material-icons-extended:1.5.0")

- Hamed

Answer 4

使用Compose版本1.2.0，您只需要将autoMirrored属性添加到矢量可绘制对象中即可。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:autoMirrored="true"
    android:viewportWidth="24"
    android:viewportHeight="24">

- Viktor Yakunin

Answer 5

这是修饰符的更新版本。

@Stable
fun Modifier.mirror(): Modifier = composed {
   if (LocalLayoutDirection.current.ordinal == LayoutDirection.RTL)
      this.scale(scaleX = -1f, scaleY = 1f)
   else
     this
}

- svg

Answer 6

添加implementation("androidx.compose.material:material-icons-core:1.6.0-beta01")并使用：

Icons.AutoMirrored.Filled.ArrowBack

这将反映RTL中的箭头返回图标。请查看this以获取更多信息。

- Ebrahim Byagowi