jetpack 中的自动镜像 compose 图标

Question

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

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

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

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

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

如何在 Compose 中实现 RTL 支持？

Answer 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 {
    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")
}

查看规模

Answer 2

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

• 创建修改器扩展。

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

• 然后在mirror()需要的地方使用。

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