Jetpack Compose Icons如何实现RTL布局下的自动镜像功能？

共有两种常用实现方式，可根据你的使用场景选择： #

方式1：适配内置Material Icons图标 #

针对你当前使用的Icons.Filled.ArrowBack这类官方内置图标，通过Modifier结合布局方向动态翻转即可实现效果，代码如下：

import androidx.compose.foundation.layout.LocalLayoutDirection
import androidx.compose.foundation.layout.LayoutDirection

// 在你的Composable函数中使用
val layoutDirection = LocalLayoutDirection.current
IconButton(onClick = { backView(true) }) {
    Icon(
        Icons.Filled.ArrowBack,
        contentDescription = "back",
        modifier = Modifier.graphicsLayer {
            // RTL布局时水平翻转图标
            scaleX = if (layoutDirection == LayoutDirection.Rtl) -1f else 1f
        }
    )
}

如果项目中需要镜像的图标较多，可以把这个逻辑封装为Modifier扩展函数，复用更方便：

import androidx.compose.foundation.layout.LocalLayoutDirection
import androidx.compose.foundation.layout.LayoutDirection
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.graphicsLayer

fun Modifier.autoMirrorForRtl(): Modifier = composed {
    val layoutDirection = LocalLayoutDirection.current
    this.graphicsLayer {
        scaleX = if (layoutDirection == LayoutDirection.Rtl) -1f else 1f
    }
}

使用时直接给Icon添加该Modifier即可：

Icon(
    Icons.Filled.ArrowBack,
    contentDescription = "back",
    modifier = Modifier.autoMirrorForRtl()
)

方式2：适配自定义导入的矢量图标 #

如果你是自行导入的矢量图资源，和原生View体系的适配逻辑一致：

1. 打开矢量图对应的XML文件，在根节点添加android:autoMirrored="true"属性
   示例：

<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">
    <!-- 路径内容省略 -->
</vector>

2. 在Compose中通过painterResource(R.drawable.你的图标id)加载该图标时，系统会自动根据布局方向处理镜像，无需额外代码。

备注：高版本Compose Material库（≥1.3.0）已经默认给部分导航类内置图标添加了RTL镜像适配，但手动添加上述翻转逻辑兼容性更强，不受版本差异影响。

内容的提问来源于stack exchange，提问作者Mohammad Derakhshan