Flutter 国际化

Flutter 国际化 入门看完这里就够了

因为项目需要,涉及开发人员和业务人员沟通的问题,有的时候感觉很痛。

业务人员那边频繁修改翻译内容

其实吧,作为程序员,老想着改翻译这是什么个情况,能甩锅就甩锅吧

正是在这种背景下,在 百度,Google,Github上终于找到了一个,看起来还不错的解决方案

Arbify

先上截图

image

这里可以由专门翻译的人来做(根据设计图,但是有个头疼的问题,Message Name 要取好)

从上面测试案例可以看得出来,中文是没有复数概念的,但是在英文中,是包含复数概念的。也就是书哦,传入不同的 天数,在页面上展示的效果是不一样的。

OK,我们通过这个可以很好的管理多语言的翻译。

接下来我们需要知道怎么在程序中去使用。这里已Flutter为例

Arbify

直接上工具

pubspec.yaml 文件中直接加入

1
2
dev_dependencies:
arbify: 0.0.11

不过要注意一个问题,可能会和你的SDK flutter_localizations 产生冲突,可以先注释掉

flutter pub get

完善你的 pubspec.yaml 文件,加入下面这段配置

1
2
3
4
arbify:
url: http://i18n.iamee.me
project_id: 1
output_dir: lib/i18n

随后执行

flutter pub run arbify:download

注意,这里会需要secret,到自己搭建的 Arbify 服务器中配置一个

image

看到这个,就说明你成功了

1
2
3
4
5
6
7
8
$ flutter pub run arbify:download

Output directory doesn't exist. Creating... done.
en Downloading... done.
zh-CN Downloading... done.
zh-HK Downloading... done.
Generating l10n.dart file... done
Generating messages dart files... done

会在 lib/i18n 目录下生成相对于的文件

image

怎么使用?

app.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
27
28
29
30
31
32
33
34
35
36
37
import 'home_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'i18n/l10n.dart';

class App extends StatefulWidget {
@override
State<StatefulWidget> createState() => AppState();
}

class AppState extends State<App> {
Locale locale = Locale('zh');

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: HomePage(
onChange: (e) {
this.setState(() {
locale = e;
});
},
),
),
locale: locale,
localeResolutionCallback: (locale, supportedLocales) => locale,
supportedLocales: S.delegate.supportedLocales,
localizationsDelegates: [
S.delegate,
GlobalMaterialLocalizations.delegate
],
);
}
}

home_page.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
27
28
29
30
31
32
33
34
35
import 'package:flutter/material.dart';
import 'package:styled_widget/styled_widget.dart';

import 'i18n/l10n.dart';

class HomePage extends StatelessWidget {
final ValueChanged onChange;

HomePage({this.onChange});

@override
Widget build(BuildContext context) {
final s = S.of(context);
return Wrap(
children: [
Wrap(
children: [
Text(s.day(0)).fontSize(16).center(),
Text(s.day(1)).fontSize(16).center(),
Text(s.day(2)).fontSize(16).center(),
],
),
Wrap(
children: [Locale('zh', 'CN'), Locale('zh', 'HK'), Locale('en', 'US')]
.map((e) => TextButton(
onPressed: () {
onChange(e);
},
child: Text(e.toString()).fontSize(16)))
.toList(),
)
],
).safeArea();
}
}

这样,多语言demo就完成了

Author

Imaee

Posted on

2021-08-27

Updated on

2021-08-27

Licensed under

You need to set install_url to use ShareThis. Please set it in _config.yml.
You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.