Flutter 使用intl实现国际化

128 阅读 0 评论 85 点赞

我是靠谱客的博主飞快季节，这篇文章主要介绍Flutter 使用intl实现国际化，现在分享给大家，希望可以做个参考。

1.添加依赖

复制代码

1
2
3
4
5
6
7
8
dependencies:
  #...省略无关项
  intl: ^0.15.7 
dev_dependencies:
   #...省略无关项
  intl_translation: ^0.17.2

2.创建必要目录

首先，在项目根目录下创建一个i10n-arb目录，该目录保存我们接下来通过intl_translation命令生成的arb文件。一个简单的arb文件内容如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "@@last_modified": "2020-04-07T09:25:06.663066",
  "title": "intl demo",
  "@title": {
    "description": "应用标题",
    "type": "text",
    "placeholders": {}
  },
  "testintl": "生存，还是毁灭，这是个问题。 ",
  "@testintl": {
    "description": "生存",
    "type": "text",
    "placeholders": {}
  }
}

然后在lib目录下创建一个i10n的目录，该目录用于保存从arb文件生成的dart代码文件。

3.实现Localizations和Delegate类

1.在lib/i10n目录下新建一个“localization_intl.dart”的文件，文件内容如下：

复制代码

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'messages_all.dart'; //1

class AppLocalizations  implements CupertinoLocalizations{
   Locale locale;
  AppLocalizations(this.locale);
  static Future<AppLocalizations> load(Locale locale) {
    final String name =
    locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);
    //2
    return initializeMessages(locale.toString())
        .then((Object _) {
          Intl.defaultLocale=localeName;
      return new AppLocalizations(locale);
    });
  }
  /// 基于Map，根据当前语言的 languageCode： en或zh来获取对应的文案
  static Map<String, BaseLanguage> _localValue = {
    'en' : EnLanguage(),
    'zh' : ChLanguage()
  };
  /// 返回当前的内容维护类
  BaseLanguage get currentLocalized {
    return _localValue[locale.languageCode];
  }
  ///通过 Localizations.of(context,type) 加载当前的 FZLocalizations
  static AppLocalizations of(BuildContext context) {
    return CupertinoLocalizations.of(context);
  }
  @override
  String get selectAllButtonLabel {
    return currentLocalized.selectAllButtonLabel;
  }
  @override
  String get pasteButtonLabel {
    return currentLocalized.pasteButtonLabel;
  }
  @override
  String get copyButtonLabel {
    return currentLocalized.copyButtonLabel;
  }
  @override
  String get cutButtonLabel {
    return currentLocalized.cutButtonLabel;
  }
  @override
  String get todayLabel {
    return "今天";
  }
  static const List<String> _shortWeekdays = <String>[
    '周一',
    '周二',
    '周三',
    '周四',
    '周五',
    '周六',
    '周日',
  ];

static const List<String> _shortMonths = <String>[
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];

static const List<String> _months = <String>[
    '01月',
    '02月',
    '03月',
    '04月',
    '05月',
    '06月',
    '07月',
    '08月',
    '09月',
    '10月',
    '11月',
    '12月',
  ];
  @override
  String datePickerYear(int yearIndex) => yearIndex.toString() + "年";
  @override
  String datePickerMonth(int monthIndex) => _months[monthIndex - 1];
  @override
  String datePickerDayOfMonth(int dayIndex) => dayIndex.toString() + "日";
  @override
  String datePickerHour(int hour) => hour.toString();
  @override
  String datePickerHourSemanticsLabel(int hour) => hour.toString() + " 小时";
  @override
  String datePickerMinute(int minute) => minute.toString().padLeft(2, '0');
  @override
  String datePickerMinuteSemanticsLabel(int minute) {
    return '1 分钟';
  }
  @override
  String datePickerMediumDate(DateTime date) {
    return '${_shortWeekdays[date.weekday - DateTime.monday]} '
        '${_shortMonths[date.month - DateTime.january]} '
        '${date.day.toString().padRight(2)}';
  }
  @override
  DatePickerDateOrder get datePickerDateOrder => DatePickerDateOrder.ymd;
  @override
  DatePickerDateTimeOrder get datePickerDateTimeOrder => DatePickerDateTimeOrder.date_time_dayPeriod;
  @override
  String get anteMeridiemAbbreviation => 'AM';
  @override
  String get postMeridiemAbbreviation => 'PM';
  @override
  String get alertDialogLabel => '提示信息';
  @override
  String timerPickerHour(int hour) => hour.toString();
  @override
  String timerPickerMinute(int minute) => minute.toString();
  @override
  String timerPickerSecond(int second) => second.toString();
  @override
  String timerPickerHourLabel(int hour) => '时';
  @override
  String timerPickerMinuteLabel(int minute) => '分';
  @override
  String timerPickerSecondLabel(int second) => '秒';
  String get title {
    return Intl.message(
      'intl demo',
      name: 'title',
      desc: '应用标题',
    );
  }
  String get  testintl  {
    return Intl.message(
      '生存，还是毁灭，这是个问题。',
      name: 'testintl',
      desc: '生存',
    );
  }
}
/// 这个抽象类和它的实现类可以拉出去新建类
/// 中文和英语 语言内容维护
abstract class BaseLanguage {
  String name;
  String selectAllButtonLabel;
  String pasteButtonLabel;
  String copyButtonLabel;
  String cutButtonLabel;
}
class EnLanguage implements BaseLanguage {
  @override
  String name = "This is English";
  @override
  String selectAllButtonLabel = "全选";
  @override
  String pasteButtonLabel = "粘贴";
  @override
  String copyButtonLabel = "复制";
  @override
  String cutButtonLabel = "剪切";
}
class ChLanguage implements BaseLanguage {
  @override
  String name = "这是中文";
  @override
  String selectAllButtonLabel = "全选";
  @override
  String pasteButtonLabel = "粘贴";
  @override
  String copyButtonLabel = "复制";
  @override
  String cutButtonLabel = "剪切";

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'messages_all.dart'; //1

class AppLocalizations  implements CupertinoLocalizations{
   Locale locale;
  AppLocalizations(this.locale);
  static Future<AppLocalizations> load(Locale locale) {
    final String name =
    locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);
    //2
    return initializeMessages(locale.toString())
        .then((Object _) {
          Intl.defaultLocale=localeName;
      return new AppLocalizations(locale);
    });
  }
  /// 基于Map，根据当前语言的 languageCode： en或zh来获取对应的文案
  static Map<String, BaseLanguage> _localValue = {
    'en' : EnLanguage(),
    'zh' : ChLanguage()
  };
  /// 返回当前的内容维护类
  BaseLanguage get currentLocalized {
    return _localValue[locale.languageCode];
  }
  ///通过 Localizations.of(context,type) 加载当前的 FZLocalizations
  static AppLocalizations of(BuildContext context) {
    return CupertinoLocalizations.of(context);
  }
  @override
  String get selectAllButtonLabel {
    return currentLocalized.selectAllButtonLabel;
  }
  @override
  String get pasteButtonLabel {
    return currentLocalized.pasteButtonLabel;
  }
  @override
  String get copyButtonLabel {
    return currentLocalized.copyButtonLabel;
  }
  @override
  String get cutButtonLabel {
    return currentLocalized.cutButtonLabel;
  }
  @override
  String get todayLabel {
    return "今天";
  }
  static const List<String> _shortWeekdays = <String>[
    '周一',
    '周二',
    '周三',
    '周四',
    '周五',
    '周六',
    '周日',
  ];

  static const List<String> _shortMonths = <String>[
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];

  static const List<String> _months = <String>[
    '01月',
    '02月',
    '03月',
    '04月',
    '05月',
    '06月',
    '07月',
    '08月',
    '09月',
    '10月',
    '11月',
    '12月',
  ];
  @override
  String datePickerYear(int yearIndex) => yearIndex.toString() + "年";
  @override
  String datePickerMonth(int monthIndex) => _months[monthIndex - 1];
  @override
  String datePickerDayOfMonth(int dayIndex) => dayIndex.toString() + "日";
  @override
  String datePickerHour(int hour) => hour.toString();
  @override
  String datePickerHourSemanticsLabel(int hour) => hour.toString() + " 小时";
  @override
  String datePickerMinute(int minute) => minute.toString().padLeft(2, '0');
  @override
  String datePickerMinuteSemanticsLabel(int minute) {
    return '1 分钟';
  }
  @override
  String datePickerMediumDate(DateTime date) {
    return '${_shortWeekdays[date.weekday - DateTime.monday]} '
        '${_shortMonths[date.month - DateTime.january]} '
        '${date.day.toString().padRight(2)}';
  }
  @override
  DatePickerDateOrder get datePickerDateOrder => DatePickerDateOrder.ymd;
  @override
  DatePickerDateTimeOrder get datePickerDateTimeOrder => DatePickerDateTimeOrder.date_time_dayPeriod;
  @override
  String get anteMeridiemAbbreviation => 'AM';
  @override
  String get postMeridiemAbbreviation => 'PM';
  @override
  String get alertDialogLabel => '提示信息';
  @override
  String timerPickerHour(int hour) => hour.toString();
  @override
  String timerPickerMinute(int minute) => minute.toString();
  @override
  String timerPickerSecond(int second) => second.toString();
  @override
  String timerPickerHourLabel(int hour) => '时';
  @override
  String timerPickerMinuteLabel(int minute) => '分';
  @override
  String timerPickerSecondLabel(int second) => '秒';
  String get title {
    return Intl.message(
      'intl demo',
      name: 'title',
      desc: '应用标题',
    );
  }
  String get  testintl  {
    return Intl.message(
      '生存，还是毁灭，这是个问题。',
      name: 'testintl',
      desc: '生存',
    );
  }
}
/// 这个抽象类和它的实现类可以拉出去新建类
/// 中文和英语 语言内容维护
abstract class BaseLanguage {
  String name;
  String selectAllButtonLabel;
  String pasteButtonLabel;
  String copyButtonLabel;
  String cutButtonLabel;
}
class EnLanguage implements BaseLanguage {
  @override
  String name = "This is English";
  @override
  String selectAllButtonLabel = "全选";
  @override
  String pasteButtonLabel = "粘贴";
  @override
  String copyButtonLabel = "复制";
  @override
  String cutButtonLabel = "剪切";
}
class ChLanguage implements BaseLanguage {
  @override
  String name = "这是中文";
  @override
  String selectAllButtonLabel = "全选";
  @override
  String pasteButtonLabel = "粘贴";
  @override
  String copyButtonLabel = "复制";
  @override
  String cutButtonLabel = "剪切";

}

我这个版本是做了改进的，之前在使用intl的时候输入框长按会报错，所以添加了处理输入框长按bug的代码。

2.在lib/i10n目录下新建一个“localization_delegate.dart”的文件，文件内容如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//Locale代理类
class AppLocalizationsDelegate extends LocalizationsDelegate<CupertinoLocalizations> {
  AppLocalizationsDelegate();
  ///是否支持某个Local
  ///支持中文和英语
  @override
  bool isSupported(Locale locale) {
    return ['zh', 'en'].contains(locale.languageCode);
  }

  ///shouldReload的返回值决定当Localizations Widget重新build时，是否调用load方法重新加载Locale资源
  @override
  bool shouldReload(LocalizationsDelegate<CupertinoLocalizations> old) {
    return false;
  }
  ///根据locale，创建一个对象用于提供当前locale下的文本显示
  ///Flutter会调用此类加载相应的Locale资源类
  @override
  Future<CupertinoLocalizations> load(Locale locale) {
    println(locale.toString()+"------66666");
    return AppLocalizations.load(locale);
  }
  static AppLocalizationsDelegate delegate = AppLocalizationsDelegate();
}

4.生成arb文件

上面i10n/localization_intl.dart中如果直接拷贝的的代码会在注释1跟注释2那报错，所以下面来生成注释位置相关的文件。
1.通过intl_translation包的工具来提取代码中的字符串到一个arb文件，运行如下命令：

复制代码

1
2
flutter pub pub run intl_translation:extract_to_arb --output-dir=i10n-arb lib/i10n/localization_intl.dart

运行此命令会将在localization_intl.dart中通过Intl API标识的属性和字符串提取到“i10n-arb/intl_messages.arb”文件中：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "@@last_modified": "2020-04-24T10:21:36.493230",
  "title": "soft_fox",
  "@title": {
    "description": "应用标题",
    "type": "text",
    "placeholders": {}
  },
  "testintl": "生存，还是毁灭，这是个问题。 ",
  "@testintl": {
    "description": "呵呵",
    "type": "text",
    "placeholders": {}
  }
}

对应在localization_intl.dart中的内容为：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  String get title {
    return Intl.message(
      'soft_fox',
      name: 'title',
      desc: '应用标题',
    );
  }

  String get  testintl  {
    return Intl.message(
      '生存，还是毁灭，这是个问题。 ',
      name: 'testintl',
      desc: '呵呵',
    );
  }
}

此时生成的是默认的Locale资源文件，如果我们现在要支持英文和中文，只需要在该文件同级目录创建"intl_en.arb"文件和"intl_zh.arb"文件，然后将"intl_messages.arb"的内容拷贝到两个文件中，接下来将新建的文件中的内容进行翻译即可，翻译后的"intl_en.arb"文件内容如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "@@last_modified": "2020-04-06T21:24:01.928263",
  "title": "soft_fox",
  "@title": {
    "description": "app title",
    "type": "text",
    "placeholders": {}
  },
  "testintl": "To be, or not to be- that is the question:　",
  "@testintl": {
    "description": "haha",
    "type": "text",
    "placeholders": {}
  }
}

由于在定义的时候使用的是中文，在这里intl_zh.arb中就可以不做处理。

5.生成dart代码

最后一步就是根据arb生成dart文件，这里的dart就是在localization_intl.dart中需要引用的：

复制代码

1
2
flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/i10n --no-use-deferred-loading lib/i10n/localization_intl.dart i10n-arb/intl_*.arb

这句命令会根据我们的arb文件生成对应的dart文件：
在这里插入图片描述
最后我们将之前用到的两句命令合并在一个intl.sh文件中，内容如下：

复制代码

1
2
3
flutter pub pub run intl_translation:extract_to_arb --output-dir=i10n-arb lib/i10n/localization_intl.dart
flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/i10n --no-use-deferred-loading lib/i10n/localization_intl.dart i10n-arb/intl_*.arb

后面新增新的需要国际话的文字之后直接运行这个intl.sh文件即可。

6.在main.dart中引入我们定义的代理

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'intl demo',
      debugShowCheckedModeBanner: false,
	//...省略无关项
      localizationsDelegates: [
        AppLocalizationsDelegate(), // 我们定义的代理
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      locale: GlobalThemeStyles.themeLocale,
      supportedLocales: <Locale>[
        const Locale('en', 'US'), // 美国英语
        const Locale('zh', 'CN'), // 中文简体
      ],
     //...省略无关项
    );
  }