Flutter开发之——国际化支持

发表于 分类于 ， ， 阅读时长 ≈ 6 分钟

一 概述

  • APP国际化简单示例
  • APP国际化补充
  • 应用程序 title 国际化

二 APP国际化简单示例

2.1 添加依赖或导入包名

1
import 'package:flutter/foundation.dart';

2.2 MaterialApp.supportedLocales 中添加支持的语言

1
2
3
4
5
6
7
8
MaterialApp(
  title: 'Flutter IntlApp',
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  ...
)

说明：上面的代码中，只支持英文和中文

2.3 根据不同的语言获取不同的资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class AppLocalizations {
  final Locale locale;

  AppLocalizations(this.locale);

  static AppLocalizations? of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }
  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'title': 'Hello World',
    },
    'zh': {
      'title': '你好',
    },
  };
  String? get title {
    return _localizedValues[locale.languageCode]?['title'];
  }
}

说明：这里只是演示了title的国际化

2.4 设置用于加载语言的Delegate

1
2
3
4
5
6
7
8
9
10
11
12
13
class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();
  @override
  bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(AppLocalizations(locale));
  }

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

2.5 将此 Delegate 添加到 MaterialApp

1
2
3
4
5
6
7
8
9
10
11
MaterialApp(
  title: 'Flutter IntlApp',
  localizationsDelegates: [
    AppLocalizationsDelegate(),
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  home: _HomePage(),
)

2.6 整体的代码

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
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        AppLocalizationsDelegate(),
      ],
      supportedLocales: [
        const Locale('en'),
        const Locale('zh')
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class AppLocalizations {
  final Locale locale;

  AppLocalizations(this.locale);

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

  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'title': 'Hello World',
    },
    'zh': {
      'title': '你好',
    },
  };

  String? get title {
    return _localizedValues[locale.languageCode]?['title'];
  }
}

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();


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

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(AppLocalizations(locale));
  }

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //appBar: AppBar(title: Text(widget.title),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('国际化：${AppLocalizations.of(context)!.title}')
          ],
        ),
      ),
    );
  }
}

2.7 注意事项-Scaffold 不要添加 AppBar 数据，否则报错(切换到zh时)

异常信息

1
2
3
4
5
6
7
8
======== Exception caught by widgets library =======================================================
The following assertion was thrown building AppBar(dirty, dependencies: [_LocalizationsScope-[GlobalKey#c2dbf], _ModalScopeStatus, MediaQuery, _InheritedTheme], state: _AppBarState#8c982):
No MaterialLocalizations found.

AppBar widgets require MaterialLocalizations to be provided by a Localizations widget ancestor.
The material library uses Localizations to generate messages, labels, and abbreviations.

To introduce a MaterialLocalizations, either use a MaterialApp at the root of your application to include them automatically, or add a Localization widget with a MaterialLocalizations delegate.

2.8 效果图

三 APP国际化补充

3.1 说明

Scaffold添加 AppBar 数据，切换到中文环境时，会出现错误

1
2
3
======== Exception caught by widgets library =======================================================
The following assertion was thrown building AppBar(dirty, dependencies: [_LocalizationsScope-[GlobalKey#c2dbf], _ModalScopeStatus, MediaQuery, _InheritedTheme], state: _AppBarState#8c982):
No MaterialLocalizations found.

原因：MaterialLocalizations 找不到

3.2 pubspec.yaml文件中添加包依赖

1
2
3
4
5
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

3.3 MaterialApp 修改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import 'package:flutter_localizations/flutter_localizations.dart';
MaterialApp(
  title: 'Flutter IntlApp',
  localizationsDelegates: [
    AppLocalizationsDelegate(),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  home: _HomePage(),
)

3.4 效果图

四 应用程序 title 国际化

4.1 将MaterialApp中title替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
MaterialApp(
  title: '${AppLocalizations.of(context)!.title}',
  localizationsDelegates: [
    AppLocalizationsDelegate(),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  home: _HomePage(),
)

现象：

4.2 原因及解决办法

原因

因为此时使用的 context 是从 build 方法中传入的，而 Localizations 从 context 开始向上查找，国际化资源是在 MaterialApp 组件中的，所以无法找到 AppLocalizations

解决办法(修改方式是使用 onGenerateTitle)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
MaterialApp(
  onGenerateTitle: (context) {
    return AppLocalizations.of(context).title;
  },
  localizationsDelegates: [
    AppLocalizationsDelegate(),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  home: _HomePage(),
)

4.3 效果(Android真机效果)