Flutter国际化与本地化加载插件easy_localization_loader的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter国际化与本地化加载插件easy_localization_loader的使用

在Flutter应用中实现国际化和本地化是一个常见的需求。easy_localization_loader插件为Easy Localization包提供了自定义资产加载器,支持多种格式的资源文件加载。本文将详细介绍如何使用easy_localization_loader插件来实现Flutter应用的国际化和本地化。

支持的格式

easy_localization_loader支持以下格式的资源文件加载:

  • ✅ JSON (JsonAssetLoader)
  • ✅ CSV (CsvAssetLoader)
  • ✅ HTTP (HttpAssetLoader)
  • ✅ XML (XmlAssetLoader, XmlSingleAssetLoader)
  • ✅ Yaml (YamlAssetLoader, YamlSingleAssetLoader)
  • ✅ FILE (FileAssetLoader)

配置步骤

1. 在pubspec.yaml中添加依赖

首先,在项目的pubspec.yaml文件中添加easy_localizationeasy_localization_loader的依赖:

dependencies:
  # Easy Localization 主包
  easy_localization: ^3.0.0

  # 稳定版本安装来自 pub.dev
  easy_localization_loader: ^2.0.0

  # 开发版本安装来自 git REPO
  # easy_localization_loader:
  #   git: https://github.com/aissat/easy_localization_loader.git

请确保替换<last_version>为你需要的具体版本号。

2. 修改assetLoader和路径

接下来,在应用的入口文件中配置EasyLocalization,指定支持的语言环境、资源文件路径以及使用的加载器类型。例如,使用CSV格式的资源文件:

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:easy_localization_loader/csv_asset_loader.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('ar', 'DZ')],
      path: 'resources/langs/langs.csv', // CSV 文件路径
      assetLoader: CsvAssetLoader(), // 使用 CSV 加载器
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World').tr(),
        ),
        body: Center(
          child: Text('This is a localized text').tr(),
        ),
      ),
    );
  }
}

3. 完成!

完成以上步骤后,你的Flutter应用已经集成了国际化和本地化的功能,并且可以使用easy_localization_loader提供的各种格式的资源文件加载器。

Loaders Specification

HttpAssetLoader

如果你使用的是HttpAssetLoader,你需要提供一个包含所有翻译文件的基础路径,例如https://example.com/translations。所有的翻译文件应该以.json格式单独存放,这样可以减少应用初始化时加载的文件大小。

示例目录结构:

translations/
├── en-US.json
└── uk-UA.json

每个JSON文件的内容可能如下所示:

en-US.json

{
  "hello_world": "Hello World",
  "localized_text": "This is a localized text"
}

uk-UA.json

{
  "hello_world": "Привіт Світ",
  "localized_text": "Це локалізований текст"
}

通过这种方式,你可以灵活地管理不同语言的翻译文件,并根据需要选择合适的加载器进行加载。

希望这篇指南能帮助你顺利实现Flutter应用的国际化和本地化功能!如果有任何问题或建议,请随时联系。


更多关于Flutter国际化与本地化加载插件easy_localization_loader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国际化与本地化加载插件easy_localization_loader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用easy_localization_loader插件来实现国际化与本地化加载的示例代码。这个插件可以简化加载语言资源文件的过程。

首先,确保你已经在pubspec.yaml文件中添加了必要的依赖:

dependencies:
  flutter:
    sdk: flutter
  easy_localization: ^3.0.0  # 请检查最新版本号
  easy_localization_loader: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来安装这些依赖。

项目结构

假设你的项目结构如下:

lib/
├── assets/
│   ├── locales/
│   │   ├── en.json
│   │   ├── zh.json
│   ├── images/
├── main.dart
├── locale_keys.dart

创建语言资源文件

assets/locales/目录下创建en.jsonzh.json文件,内容示例如下:

en.json

{
  "welcome_message": "Welcome to our app!",
  "goodbye_message": "Goodbye!"
}

zh.json

{
  "welcome_message": "欢迎来到我们的应用!",
  "goodbye_message": "再见!"
}

配置Flutter应用

main.dart文件中配置easy_localizationeasy_localization_loader

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:easy_localization_loader/easy_localization_loader.dart';
import 'locale_keys.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 加载资源文件
  await EasyLocalizationLoader.loadAssetTranslations(
    baseLocale: 'en', // 默认语言
    supportedLocales: ['en', 'zh'], // 支持的语言列表
    assetsPath: 'assets/locales/', // 资源文件路径
    keysFile: 'locale_keys.dart', // 生成的keys文件
  );

  runApp(
    EasyLocalization(
      supportedLocales: ['en', 'zh'], // 支持的语言列表
      path: 'assets/locales', // 资源文件路径
      fallbackLocale: Locale('en', ''), // 默认语言
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.welcome_message.tr()),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(LocaleKeys.welcome_message.tr()),
            ElevatedButton(
              onPressed: () {
                EasyLocalization.of(context).locale = Locale('zh');
                // 强制刷新界面以应用新语言
                Navigator.of(context).pushReplacementNamed('/');
              },
              child: Text('切换到中文'),
            ),
            ElevatedButton(
              onPressed: () {
                EasyLocalization.of(context).locale = Locale('en');
                // 强制刷新界面以应用新语言
                Navigator.of(context).pushReplacementNamed('/');
              },
              child: Text('切换到英文'),
            ),
          ],
        ),
      ),
    );
  }
}

生成Locale Keys文件

在命令行中运行以下命令来生成locale_keys.dart文件:

flutter pub run easy_localization:generate

这会在项目根目录下生成一个locale_keys.dart文件,其中包含所有语言资源文件的keys。

locale_keys.dart 文件示例

// locale_keys.dart (自动生成)
class LocaleKeys {
  static const String welcome_message = 'welcome_message';
  static const String goodbye_message = 'goodbye_message';
}

运行应用

现在你可以运行你的Flutter应用,并通过点击按钮在中文和英文之间切换语言。

这个示例展示了如何使用easy_localization_loader来加载和管理Flutter应用中的语言资源文件。希望这对你有所帮助!

回到顶部