Flutter - International 国际化,Localization 本地化, 使用Intl

简介: 新建项目,得到一个示例工程。本例中使用intl包来管理文字资源。项目地址: https://github.com/RustFisher/localization_demo步骤:添加依赖项 - intl创建文字资源文件生成arb文件新增和修改arb文件根据arb生成dart文件...

header

新建项目,得到一个示例工程。本例中使用intl包来管理文字资源。

项目地址: https://github.com/RustFisher/localization_demo

步骤:

  • 添加依赖项 - intl
  • 创建文字资源文件
  • 生成arb文件
    • 新增和修改arb文件
  • 根据arb生成dart文件
  • 创建localization代理,新建一个类继承LocalizationsDelegate,和文字资源文件联系起来
  • MaterialApp中添加本地化代理和语言类型
  • 使用文字资源

添加依赖项

pubspec.yaml添加依赖项flutter_localizations,然后运行一下flutter packages get

dependencies:
  flutter:
    sdk: flutter
# 添加下面的依赖项
  flutter_localizations:
    sdk: flutter
  intl: 0.15.6
  intl_translation: 0.16.7

编辑dart文件

新建app_strings.dart文件。

import 'dart:async';

import 'package:intl/intl.dart';
import 'package:flutter/widgets.dart';

class AppStrings {
  AppStrings(Locale locale) : _localeName = locale.toString();

  final String _localeName;

  static Future<AppStrings> load(Locale locale) {
    return initializeMessages(locale.toString())
        .then((Object _) {
      return new AppStrings(locale);
    });
  }

  static AppStrings of(BuildContext context) {
    return Localizations.of<AppStrings>(context, AppStrings);
  }

  String title() {
    return Intl.message(
      'Localization Demo',
      name: 'title',
      desc: '应用标题',
      locale: _localeName,
    );
  }

  String click() => Intl.message(
    'Click',
    name: 'click',
    desc: '点击',
    locale: _localeName,
  );

  String helloFromDemo() => Intl.message(
    'Hello~',
    name: 'helloFromDemo',
    desc: '一句问候',
    locale: _localeName,
  );
}

此时initializeMessages方法会显示警告,暂时不用管,生成arb文件后再添加引用。

生成arb文件

进入项目目录,运行intl的命令。

/e/ws/localization_demo
$ flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/app_strings.dart

生成l10n/intl_messages.arb,内容如下。可以看出是JSON格式的文本。

{
  "@@last_modified": "2018-07-15T22:13:19.218221",
  "title": "Localization Demo",
  "@title": {
    "description": "应用标题",
    "type": "text",
    "placeholders": {}
  },
  "click": "Click",
  "@click": {
    "description": "点击",
    "type": "text",
    "placeholders": {}
  },
  "helloFromDemo": "Hello~",
  "@helloFromDemo": {
    "description": "一句问候",
    "type": "text",
    "placeholders": {}
  }
}

新增和修改arb文件

前面生成了l10n/intl_messages.arb,我们可以把它当成模板。复制粘贴一下,同目录下得到intl_en.arbintl_zh.arb。文件名规则可以自己定。
intl_zh.arb为例:

{
  "@@last_modified": "2018-07-15T22:13:19.218221",
  "title": "国际化示例App",
  "@title": {
    "description": "应用标题",
    "type": "text",
    "placeholders": {}
  },
  "click": "点击",
  "@click": {
    "description": "点击",
    "type": "text",
    "placeholders": {}
  },
  "helloFromDemo": "你好呀~",
  "@helloFromDemo": {
    "description": "一句问候",
    "type": "text",
    "placeholders": {}
  }
}

这里也可以把intl_messages.arb删掉。本例保留这个文件。

根据arb生成dart文件

$ flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n \
   --no-use-deferred-loading lib/app_strings.dart lib/l10n/intl_*.arb

No @@locale or _locale field found in intl_en, assuming 'en' based on the file name.
No @@locale or _locale field found in intl_messages, assuming 'messages' based on the file name.
No @@locale or _locale field found in intl_zh, assuming 'zh' based on the file name.

暂时无视警告。
此时在app_strings.dart中添加对l10n/intl_messages.arb的引用。

import 'package:localization_demo/l10n/messages_all.dart';

警告消失~
生成的文件

更新了arb文件后,需要重新生成dart文件。

创建localization代理

创建localizations_delegate.dart。新建AppLocalizationsDelegate类继承LocalizationsDelegate,复写方法。
泛型指定为前面的AppStrings

import 'dart:async';

import 'package:flutter/widgets.dart';
import 'package:localization_demo/app_strings.dart';

class AppLocalizationsDelegate extends LocalizationsDelegate<AppStrings> {
  @override
  Future<AppStrings> load(Locale locale) {
    return AppStrings.load(locale);
  }

  @override
  bool isSupported(Locale locale) =>
      ['zh', 'en'].contains(locale.languageCode); // 支持的类型要包含App中注册的类型

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}

MaterialApp中添加本地化代理和语言类型

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        AppLocalizationsDelegate(), // 我们定义的代理
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [ // 支持的语言类型
        const Locale('en', 'US'), // English
        const Locale('zh', ''),
      ],
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

使用文字资源

获取到AppStrings的实例。

    AppStrings appStrings = AppStrings.of(context);
    print(appStrings); // logcat:  I/flutter ( 7478): Instance of 'AppStrings'

示例工程结构

注意,在MaterialApp中使用文字资源时,因为context的关系,要使用onGenerateTitle

      onGenerateTitle: (context) {
        return AppStrings.of(context).title();
      },

支持语言的类型

代理isSupported方法中的语言类型最好是和App中supportedLocales的一致

  @override
  bool isSupported(Locale locale) =>
      ['zh', 'en'].contains(locale.languageCode);

// App中`supportedLocales`
      supportedLocales: [
        const Locale('en', 'US'), // English
        const Locale('zh', ''),
      ],

否则可能出现获取不到AppStrings的异常。

参考:

  • https://flutter.io/tutorials/internationalization/
目录
相关文章
|
JSON Dart IDE
Flutter实现国际化
开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们需要对齐进行国际化开发
1398 0
Flutter实现国际化
|
3月前
|
JSON 自然语言处理 Android开发
Flutter本地化(国际化)之App名称
Flutter本地化(国际化)之App名称
68 1
|
4月前
|
存储 Dart 开发工具
flutter实现语言的国际化
【7月更文挑战第16天】
86 1
|
6月前
|
自然语言处理 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的国际化与本地化支持
【4月更文挑战第30天】Flutter支持国际化与本地化,借助`Intl`包和`Localizations`类,帮助开发者实现多语言应用。`Intl`提供日期、时间格式化,而`Localizations`管理不同语言环境的资源。在`pubspec.yaml`添加`intl`依赖,创建本地化资源文件并定义`LocalizationsDelegate`。通过`Localizations.of()`获取本地化资源,实现应用适应不同语言环境。
208 0
【Flutter前端技术开发专栏】Flutter中的国际化与本地化支持
|
6月前
|
存储 自然语言处理 API
Flutter应用的国际化支持:实现多语言环境的优雅策略
【4月更文挑战第26天】Flutter提供强大的国际化(i18n)和本地化(l10n)支持,使开发者能轻松实现应用多语言特性。通过定义`.arb`文件来管理字符串资源,使用`LocalizationsDelegate`加载资源,设置应用语言环境,以及在UI中使用`S.of(context).someString`访问字符串。进阶技巧包括字符串格式化、复数形式、双向文本和Unicode支持。充分测试确保所有语言正确显示。随着全球化需求增长,Flutter的国际化支持成为应用开发关键。
|
6月前
|
存储 容器
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
278 0
|
JSON Dart IDE
Day18 - Flutter - 国际化(下)
Day18 - Flutter - 国际化(下)
564 0
Day18 - Flutter - 国际化(下)
|
1月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
1月前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
77 3
|
19天前
|
传感器 开发框架 物联网
鸿蒙next选择 Flutter 开发跨平台应用的原因
鸿蒙(HarmonyOS)是华为推出的一款旨在实现多设备无缝连接的操作系统。为了实现这一目标,鸿蒙选择了 Flutter 作为主要的跨平台应用开发框架。Flutter 的跨平台能力、高性能、丰富的生态支持和与鸿蒙系统的良好兼容性,使其成为理想的选择。通过 Flutter,开发者可以高效地构建和部署多平台应用,推动鸿蒙生态的快速发展。
139 0