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就完成了

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.