时间戳

首页 > 解决方案 > Jetpack compose 中的自动镜像

android - Jetpack compose 中的自动镜像

问题描述

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

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

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

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

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

如何在 Compose 中实现 RTL 支持？

标签： androidandroid-jetpack-compose

解决方案

用于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")
}

见规模

推荐阅读