android 在jetpack中自动镜像合成图标

hec6srdp  于 2022-12-09  发布在  Android
关注(0)|答案(2)|浏览(148)

我现在使用jetpack compose,我的应用程序有两个区域设置,其中一个是RTL,另一个是LTR。
当用户更改区域设置时,一切正常,整个布局将重新排列。
我遇到的唯一问题是Jetpack合成图标的镜像。我有一个这样的图标按钮:

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

用于向后导航。
我的问题是,当用户切换到RTL语言环境时,此图标不会被镜像。
在Compose之前,我导入了arrow_back矢量,它有一个auto mirroring复选框,用于RTL支持。
如何在Compose中实现RTL支持?

pzfprimi

pzfprimi1#

Use scale to mirror the icon:

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

If you want to do this throughout your app, you could just create a Modifier extension function. Here we'll call it mirror :

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

And then apply it:

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

See Scale

xoshrz7s

xoshrz7s2#

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

相关问题