当前位置：首页 > news >正文

Flutter多语言适配

news 2024/12/25 1:18:14

多语言适配是一个让应用面向国际市场的前提，另外也看我的Android原生的多语言适配的文章添加链接描述。

那么Flutter如何进行多语言适配呢？本文使用了GetX框架，所以你的项目应该是GetX框架搭建的。

创建翻译类

import 'package:get/get.dart';class AppTranslations extends Translations {@overrideMap<String, Map<String, String>> get keys => {'en': {'hello': 'Hello','jym': 'JYM'},//    'zh': {//      'hello': '你好',//      'jym': '掘友们'//    },'zh_CN': { 'hello': '你好', 'jym': '掘友们', },'zh_TW': { 'hello': '你好','welcome': '掘友們'},};
}

首先要定义一个类继承Translations类，实现各个语言的key-value文案。其中zh_TW代表繁体中文，而zh_CN则代表简体中文。

在 `pubspec.yaml` 中添加依赖库

dependencies:flutter:sdk: flutter# 后面的都是你要加的flutter_localizations:sdk: flutter# 务必使用^0.19.0及以上版本，我之前使用^0.17.0版本会有问题intl: ^0.19.0

在 `main.dart` 中配置多语言支持

在 GetMaterialApp 中配置 locale 和 translations，这样GetX就能自动帮你翻译了。


import 'package:flutter_localizations/flutter_localizations.dart';
import 'dart:ui';
import 'app_translations.dart';String getSystemLanguage() {Locale locale = window.locale;return locale.languageCode; // 返回系统语言的代码，如 'en'、'zh' 等
}void main() {String systemLanguage = getSystemLanguage();// 需要手动改变时使用它切换语言// Get.updateLocale(Locale(systemLanguage));runApp(GetMaterialApp(title: 'hello'.tr,initialRoute: '/home',translations: AppTranslations(),locale: Locale(systemLanguage),fallbackLocale: Locale('en'),supportedLocales: [Locale('en'), // EnglishLocale('zh'), // Chinese],localizationsDelegates: [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,GlobalCupertinoLocalizations.delegate,],getPages: [GetPage(name: '/home',title: 'jym'.tr,page: () => HomeView(),binding: HomeBinding(),),GetPage(name: '/pageOne',page: () => SecondView(),binding: SecondBinding(),),GetPage(name: '/pageTwo',page: () => ThirdView(),binding: ThirdBinding(),)],));
}

这里注意这几个delegate也是必须的，否则在使用时会报 MissingPluginException 错误或出现灰块问题。

localizationsDelegates: [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,GlobalCupertinoLocalizations.delegate,
]

translations是你要设置的翻译类，这里我们指定之前定义的 AppTranslations 。locale表示设置的默认语言，这里我们通过 getSystemLanguage() 方法获取的系统默认的语言，当然也可以写死。fallback表示当没有对应语言时的默认语言。

使用翻译后的字符串

使用.tr来获取翻译的字符串，比如 Text('hello'.tr) 。如果你要进行字符串拼接请使用字符串模板，Text("${'hello'.tr} ${'jym'.tr}") 。

动态切换语言

ElevatedButton(onPressed: () {var locale = Locale('zh', 'TW');Get.updateLocale(locale);},child: Text('切換到繁體中文')
);

聊聊多语言

因为阿拉伯地区的语言风格和我们截然相反，比如阿拉伯语、希伯来语，都是从右向左的，所以在布局的时候还要考虑它们的地区习性。另外还要考虑数字、日期、时间、货币符号等。

比如：

日期格式：MM/DD/YYYY（美国） vs. DD/MM/YYYY（欧洲）
货币符号：$100（美国） vs. 100€（欧洲）

在越南，数字格式的使用与其他许多国家有一些不同。越南采用的是国际标准的数字分隔符，其中：

小数点 使用逗号（,）表示。
千位分隔符 使用句点（.）表示。
那么我们这样去解决。

import 'package:intl/intl.dart';void main() {var numberFormat = NumberFormat("#,##0.00", "vi_VN");print(numberFormat.format(1234.56)); // 输出：1.234,56
}