开始使用 Flutter 本地化

大多数时候，我们开发的应用程序的目标是世界各地的用户。然而，我们都知道，人们使用不同的语言。

因此，为了使应用程序对用户友好，每个人都需要用他们的本地语言访问它。这就是本地化发挥作用的地方。

什么是本地化？

应用程序的本地化是指开发人员在应用程序中添加多种语言，以满足讲不同语言的用户。

使用Flutter Localization Package ，这篇文章将告诉你如何创建一个支持多种语言的应用程序。

前提条件

要跟上，你需要。

对Flutter框架和Dart编程语言的理解。
在您的电脑上安装[Flutter SDK]。
[Android Studio]，或[VS Code]安装程序。
一个移动仿真器或一个用于测试的物理设备。

项目概述

我们将创建一个屏幕，其中我们将在每个实例中呈现所选择的语言。我们将显示由当前用户设置的系统语言。

例如，如果一个用户说德语并且他的手机语言被设置为德语，我们的应用程序将以德语呈现其用户界面内容。

项目设置和软件包安装

在这个项目中，我们将为应用程序支持的每一种语言准备文件。我们将把语言文件与用户界面和业务逻辑分开，以保持应用程序更有条理和易于调试。

我们将在lib 目录中创建一个screens 文件夹。这个文件夹将包含user interface 的文件。

没有必要使用services 文件夹，因为我们不会有太多的后台代码。然而，我们将有另一个名为l10n 的文件夹，其中将包含所有的语言文件。

让我们开始吧。

创建一个新的Flutter应用程序。

接下来，按照下图所示组织你的文件夹和文件。

lib
┣ l10n
┃ ┣ app_de.arb
┃ ┣ app_en.arb
┃ ┣ app_es.arb
┃ ┣ app_hi.arb
┃ ┗ l10n.dart
┣ Screens
┗ main.dart

要安装flutter_localization 包，导航到文件pubspec.yaml ，然后在application dependencies 中添加下面的代码片段。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # add this line
    sdk: flutter         # add this line

flutter:
  generate: true # add this line
  uses-material-design: true

在应用程序的根文件夹中创建一个新文件，名为l10n.yaml 。你可以参考上面的文件夹结构，以确保该文件在正确的目录中。

在l10n.yaml 文件中，添加下面的代码。

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

在上面的代码中，第一行定义了输入的翻译文件和我们存放它们的目录。

第二行指定了我们用来生成翻译的模板文件。template file 应该与输入文件创建在同一文件夹中。

最后一行包含翻译后的输出文件。每个译文的名称中都会有app_localization 的前缀。

它是如何工作的。

flutter_localizations 包为各种小工具提供了几个本地化选项。

generate: true 的设置将确保Flutter使用dart tool 和l10n.dart 文件中指定的代码类自动生成不同语言的本地化getters，如下图所示。

import 'package:flutter/material.dart';

class L10n {
  static final all = [
    const Locale('en'),
    const Locale('ar'),
    const Locale('hi'),
    const Locale('es'),
    const Locale('de'),
  ];
}

l10n.dart 文件包含一个应用程序支持的语言列表。

我们在ARB 文件中为每种语言做翻译。我们需要提供key-values ，一个词和它在应用程序所支持的所有语言中的翻译对等。

例如，app_en.arb 文件的内容如下。

{
  "language": "English",
  "helloWorld": "This is an example of speech synthesis in English.
   Please follow the code to understand the method of building applications that support multiple languages."
}

Spanish 中相同文本的等效翻译被存储在app_es.arb 文件中，如下所示。

{
  "language": "Español",
  "helloWorld": "Este es un ejemplo de síntesis de voz en inglés. 
  Siga el código para comprender el método de creación de aplicaciones que admiten varios idiomas."
}

主屏幕逻辑代码

我们的主屏幕将有一个深色的背景和文字来显示应用程序正在使用的语言。

在main.dart 文件中添加下面的代码。

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'l10n/l10n.dart';

接下来，在MaterialApp() 函数中，我们需要说明支持的地域，并访问l10n.dart 文件中的本地化类。

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Localizations  App',
            supportedLocales: L10n.all,
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: MyHomePage(),
        );
    }
}

当应用程序自动生成翻译时，它会在generated localizations 中创建一个新的类，称为AppLocalizations 。

我们需要访问这个类来引入语言翻译。所有的翻译类将扩展这个类作为基类。

更新main.dart 中的代码，如下所示。

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Localizations  App',
            localizationsDelegates: const [
                AppLocalizations.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: L10n.all,
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: MyHomePage(),
        );
    }
}

主页UI组件

我们已经引入了所有的需求，并将所有的语言翻译导入到应用程序的根目录中。

我们需要用系统中指定的语言来显示每个组件。添加以下代码来显示每种语言及其对应的翻译。

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
            title: Text('Flutter Localization'),
            ),
            body: Container(
            color: Colors.black,
            child: Column(
                children: <Widget>[
                SizedBox(height: 60),
                    // Language
                    Text(AppLocalizations.of(context).language, 
                            style: TextStyle(
                                color: Colors.white, 
                                fontSize: 40, 
                                fontWeight: FontWeight.bold
                            )
                        ),
                    SizedBox(height: 90),
                    Container(
                        padding: EdgeInsets.symmetric(horizontal: 25, vertical: 4),
                        child: Card(
                            color: Colors.black87,
                            // Parapgraph translation 
                            child: Text(AppLocalizations.of(context).helloWorld, 
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 30, 
                                    fontWeight: FontWeight.bold
                                )
                            ),
                        ),
                    ),
                SizedBox(height: 15),
                ],
            ),
            )
        );
    }
}

测试该应用程序

该应用程序的默认语言是英语。然而，我们可以将应用程序的语言改为西班牙语或德语，如下图所示。

App in English

App in Spanish

App in Deutsch

结论

本指南是创建多语言应用程序的一个良好起点。因此，读者可以利用这些知识来建立其他高质量的应用程序。

如何使用 Flutter 本地化