Compose中的国际化与本地化、暗黑模式与夜间模式

开篇闲谈

这两年负责的都是面向海外（欧美、中东等）的项目，之前在View的时代下总结了一套国际化与本地化的经验，见《Android 国际化与本地化探索》，文中事无巨细的从 语言翻译 、 UI设计 、 代码规范 三个方面阐述了我的解决方案。

切换到到Compose后，又完全处理了一遍国际化的流程。同时发现在适配暗黑模式中Compose提供了开箱即用的支持，大大简化了我们的开发难度，这篇文章就将经验分享给大家。文中若有纰漏之处，还望大家不吝赐教。

国际化与本地化

关于国际化中的翻译规范以及UI设计规范，这里就不再赘述了，大家可以翻翻开篇提到的文章，我们直接从代码层面入手。

文字处理

如上图所示，我们需要实现简体中文和阿拉伯语的相关页面。

首先我们需要准备相关的语言资源文件，然后消息列表的整体页面只是使用了Row和Column来构建，没有其他多余操作，代码不做过多展示，预览代码如下所示：

@Preview(locale = "zh")
@Composable
fun PreviewMessageListScreen() {
   
    MessageListScreen()
}

@Preview(locale = "ar")
@Composable
fun PreviewMessageListScreenRTL() {
   
    MessageListScreen()
}

可以看到我们只是给Preview注解添加了local参数，预览RTL的预览效果就完全显示出来了，而且运行在手机上的话，是会根据手机系统设置的语言以及布局方向来进行展示的。

再来看这样一种场景，在View体系下，例如阿拉伯语环境下有中文的时候，如果不对TextView的gravity、textAlignment属性进行合适的处理，那么情况可能就会出现下图左侧的样子。

按道理来说，文本内容应该是贴着图标一侧的，可是在切换了RTL语言后，中文文本内容却还是位于屏幕的左侧，这是由于在View体系下，Gravity和TextAlignment都会控制文本的布局方向。而到了Compose中，Text布局方向则是默认听从父布局容器的安排，自己不会做任何多余的处理。所以在Compose中按照正常写法开发下来，效果图就是如上右侧图片所示，完全不用做过多的设置。

所以可能一开始大家在处理Compose中Text居中等情况下都遇到了难题，到底要如何居中呢？其实就是需要在外层嵌套一个Row或者Box等布局，然后将布局方向改为居中就可以了，或者使用其参数TextAlign也可以。

图标处理

上文是基本的布局处理，涉及到一些图片的处理，我们还是使用在View体系下的方案，利用缩放来处理图片的左右翻转，自定义Modifier代码如下所示：

@Composable