HarmonyOS 鸿蒙Next 国际化与本地化——构建多语言支持的应用

HarmonyOS 鸿蒙Next 国际化与本地化——构建多语言支持的应用 国际化与本地化——构建多语言支持的应用

作为一名鸿蒙应用开发者，国际化（Internationalization，I18N）和本地化（Localization，L10N）是使应用适应全球不同地区和语言用户的关键。通过支持多语言和区域设置，您可以扩大应用的用户群，提高用户满意度。本文将详细介绍如何在鸿蒙操作系统中实现应用的国际化与本地化，包括资源文件的管理、动态切换语言和日期、数字格式的本地化。

一、理解国际化与本地化

国际化（I18N）

在开发阶段使应用能够支持多种语言和地区的准备工作，包括使用资源文件、避免硬编码字符串等。

本地化（L10N）

在特定地区和语言环境中调整应用，包括翻译文本、调整布局、日期和数字格式等。

二、在鸿蒙中实现国际化

1. 使用资源文件管理字符串

在鸿蒙应用中，使用.json或.ets文件作为资源文件，存储不同语言的字符串。

（1）创建资源文件夹

在resources/base/目录下创建对应语言的文件夹：

• resources/base/zh/：中文
• resources/base/en/：英文
• resources/base/fr/：法语

（2）创建字符串资源文件

在每个语言文件夹中创建string.json文件，内容如下：

// resources/base/zh/string.json
{
  "app_name": "我的应用",
  "greeting": "你好，世界！"
}

// resources/base/en/string.json
{
  "app_name": "My App",
  "greeting": "Hello, World!"
}

（3）在代码中引用资源字符串

// index.ets
@Entry
@Component
struct InternationalizationExample {
  build() {
    Column() {
      Text($r('app.string.greeting')).fontSize(20).margin(16);
    }
  }
}

2. 本地化图片和布局

（1）本地化图片资源

在resources/base/media/目录下，创建对应语言的图片文件夹：

• resources/base/media/zh/
• resources/base/media/en/

在代码中引用图片资源：

Image($r('app.media.logo'))

（2）本地化布局

对于某些需要调整布局的语言，可以创建对应的布局文件：

• pages/index.ets：默认布局
• pages/index_en.ets：英文布局

在配置文件中指定语言对应的布局文件：

// config.json
{
  "module": {
    "pages": [
      {
        "name": "index",
        "component": "pages/index",
        "localizations": {
          "en": "pages/index_en"
        }
      }
    ]
  }
}

三、动态切换语言

1. 获取系统语言

import i18n from '@ohos.i18n';

const locale = i18n.getSystemLanguage(); // 返回类似 'zh-CN' 的字符串

2. 手动切换语言

（1）设置应用语言

鸿蒙暂不支持在运行时动态切换资源语言，但可以通过重新加载页面或重启应用来实现切换。

（2）示例代码

@Entry
@Component
struct LanguageSwitcher {
  @State currentLanguage: string = 'zh';

  build() {
    Column() {
      Button('切换到英文')
        .onClick(() => {
          this.switchLanguage('en');
        })
        .margin(16);
      Text($r('app.string.greeting')).fontSize(20).margin(16);
    }
  }

  switchLanguage(language: string) {
    // 保存选择的语言到本地存储
    preferences.getPreferences('app_prefs').then((pref) => {
      pref.put('language', language);
      pref.flush();
      // 提示用户重启应用
      prompt.showToast({ message: '请重启应用以应用新的语言设置' });
    });
  }

  aboutToAppear() {
    // 读取保存的语言设置
    preferences.getPreferences('app_prefs').then((pref) => {
      const language = pref.get('language', 'zh');
      this.currentLanguage = language;
    });
  }
}

3. 重启应用应用新语言

用户在切换语言后，可以提示其重启应用，以加载新的语言资源。

四、日期和数字的本地化

1. 日期格式化

使用@ohos.i18n中的DateTimeFormat来格式化日期和时间：

import i18n from '@ohos.i18n';

function formatDate(date: Date): string {
  const options = { dateStyle: 'full' };
  const formatter = new i18n.DateTimeFormat(this.currentLanguage, options);
  return formatter.format(date);
}

2. 数字和货币格式化

使用NumberFormat来格式化数字和货币：

function formatNumber(number: number): string {
  const formatter = new i18n.NumberFormat(this.currentLanguage);
  return formatter.format(number);
}

function formatCurrency(amount: number, currency: string): string {
  const options = { style: 'currency', currency };
  const formatter = new i18n.NumberFormat(this.currentLanguage, options);
  return formatter.format(amount);
}

3. 示例

@Entry
@Component
struct LocalizationExample {
  @State currentLanguage: string = 'zh';

  build() {
    Column() {
      Text(`当前日期：${this.formatDate(new Date())}`).margin(16);
      Text(`格式化数字：${this.formatNumber(1234567.89)}`).margin(16);
      Text(`格式化货币：${this.formatCurrency(1234567.89, 'CNY')}`).margin(16);
    }
  }

  // 上述格式化方法同前
}

五、支持从右到左（RTL）的语言

1. 设置布局方向

Column() {
  // 布局内容
}.layoutDirection(this.isRTL() ? LayoutDirection.Rtl : LayoutDirection.Ltr);

2. 判断语言方向

isRTL(): boolean {
  const rtlLanguages = ['ar', 'he', 'fa']; // 阿拉伯语、希伯来语、波斯语等
  return rtlLanguages.includes(this.currentLanguage.split('-')[0]);
}

六、注意事项

1. 避免硬编码字符串

所有显示给用户的文本都应使用资源文件管理，避免在代码中硬编码。

2. 考虑文本长度差异

不同语言的文本长度可能差异很大，设计布局时要考虑文本过长或过短的情况。

3. 文化差异

注意不同地区的文化差异，例如日期格式、度量单位等，提供符合当地习惯的显示方式。

七、实践案例：多语言问候应用

1. 需求

开发一个应用，根据用户选择的语言，显示对应的问候语，并格式化当前日期和数字。

2. 实现步骤

（1）创建多语言资源文件

在resources/base/zh/string.json中添加：

{
  "greeting": "你好，世界！",
  "date_format": "当前日期：{0}",
  "number_format": "格式化数字：{0}"
}

在resources/base/en/string.json中添加：

{
  "greeting": "Hello, World!",
  "date_format": "Current Date: {0}",
  "number_format": "Formatted Number: {0}"
}

（2）实现代码

@Entry
@Component
struct MultilingualGreeting {
  @State currentLanguage: string = 'zh';

  build() {
    Column() {
      Button('中文').onClick(() => this.changeLanguage('zh')).margin(8);
      Button('English').onClick(() => this.changeLanguage('en')).margin(8);
      Text($r('app.string.greeting')).fontSize(24).margin(16);
      Text(this.formatString($r('app.string.date_format'), this.formatDate(new Date()))).margin(8);
      Text(this.formatString($r('app.string.number_format'), this.formatNumber(1234567.89))).margin(8);
    }
  }

  changeLanguage(language: string) {
    this.currentLanguage = language;
    // 提示用户重启应用或刷新界面
  }

  formatString(template: string, value: string): string {
    return template.replace('{0}', value);
  }

  formatDate(date: Date): string {
    const formatter = new i18n.DateTimeFormat(this.currentLanguage, { dateStyle: 'medium' });
    return formatter.format(date);
  }

  formatNumber(number: number): string {
    const formatter = new i18n.NumberFormat(this.currentLanguage);
    return formatter.format(number);
  }
}

3. 解释

• changeLanguage()：切换当前语言，并提示用户刷新。
• formatString()：简单的字符串格式化函数。
• $r('app.string.greeting')：根据当前语言加载对应的资源字符串。