jetpack compose 圖標中的自動鏡像

Question

我現在正在使用 Jetpack Compose，我的應用程序有兩個語言環境，其中一個是 RTL，另一個是 LTR。
當用戶更改語言環境時一切正常，整個布局將重新排列。

我遇到的唯一問題是 Jetpack Compose 圖標的鏡像。 我有一個像這樣的 IconButton：

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

用於向后導航。
我的問題是當用戶切換到 RTL Locale 時，這個圖標不會被鏡像。

在 Compose 之前，我導入了arrow_back向量，它有一個用於auto mirroring以支持 RTL 的復選框。

如何在 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 {
    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")
}

見規模

Answer 2

使用 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">

Answer 3

注意：此答案基於@Johann 的回答。 但是這個答案在較新的撰寫版本中效果更好。

• 創建修改器擴展。

   @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() )