Flutter多语言支持插件easy_localization_multi的使用

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

Flutter多语言支持插件easy_localization_multi的使用

Pub Package GitHub CodeFactor Support Chat

easy_localization_multi 是一个用于 easy_localization_loader 包的加载器,它可以合并来自多个资源加载器的字符串。如果你有本地化的包,并且需要将它们的字符串与你的应用中的字符串合并,可以使用这个插件。

示例

以下是一个使用 easy_localization_multi 的示例,该示例使用了 easy_localization_yaml 包来加载 YAML 文件中的本地化字符串。

主要代码

import 'package:easy_localization/easy_localization.dart';
import 'package:easy_localization_multi/easy_localization_multi.dart';
import 'package:easy_localization_yaml/easy_localization_yaml.dart';
import 'package:flutter/material.dart';
import 'package:my_package/my_package.dart';

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

  runApp(
    EasyLocalization(
      assetLoader: const MultiAssetLoader(
        [
          YamlAssetLoader(directory: 'assets/translations'),
          YamlAssetLoader(
            directory: 'assets/translations',
            package: 'my_package',
          ),
        ],
      ),
      fallbackLocale: const Locale('en'),
      path: 'unused',
      startLocale: const Locale('en'),
      supportedLocales: const [Locale('en'), Locale('zh')],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'easy_localization_yaml',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),

      // 新增
      locale: context.locale,
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('hello'.tr()),
      ),
      body: Center(
        child: MyPackageWidget(),
      ),
    );
  }
}

本地化文件

假设你有两个 YAML 文件,分别位于 assets/translations 目录下:

assets/translations/en.yaml

hello: "Hello, World!"

assets/translations/zh.yaml

hello: "你好,世界!"

依赖包

pubspec.yaml 文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  easy_localization: ^3.0.0
  easy_localization_multi: ^1.0.0
  easy_localization_yaml: ^1.0.0
  my_package: ^1.0.0

运行应用

  1. 确保你已经安装了所有依赖包:

    flutter pub get
    
  2. 运行应用:

    flutter run
    

技术支持、工作和教育

请加入我的 Telegram 频道以获取公告、Flutter 工作机会、文章、演讲等信息: @ainkin_com

如果你有任何问题,可以在 Telegram 支持聊天室 中提问。

或者即使只是为了说声“你好”,也欢迎加入。我很喜欢听到用户的声音。


更多关于Flutter多语言支持插件easy_localization_multi的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多语言支持插件easy_localization_multi的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个使用 easy_localization_multi 插件在 Flutter 中实现多语言支持的代码示例。这个插件允许你轻松地为你的 Flutter 应用添加多语言支持。

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加 easy_localization_multi 依赖:

dependencies:
  flutter:
    sdk: flutter
  easy_localization_multi: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

2. 配置项目

在你的 Flutter 项目中,创建一个 assets 文件夹,并在其中创建多个语言文件夹,如 en, zh, 等,并在这些文件夹中创建相应的 JSON 文件,例如 en.jsonzh.json

assets/en.json

{
  "welcome": "Welcome",
  "goodbye": "Goodbye"
}

assets/zh.json

{
  "welcome": "欢迎",
  "goodbye": "再见"
}

3. 初始化 EasyLocalizationMulti

在你的 main.dart 文件中,配置 EasyLocalizationMulti

import 'package:flutter/material.dart';
import 'package:easy_localization_multi/easy_localization_multi.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalizationMulti.load(
    'assets',  // 资源文件夹路径
    Locale('en', 'US'),  // 默认语言
    {
      'en': 'en.json',
      'zh': 'zh.json',
    },  // 语言文件映射
  );

  runApp(
    EasyLocalizationMulti(
      supportedLocales: [Locale('en', 'US'), Locale('zh', 'CN')],
      path: 'assets',
      fallbackLocale: Locale('en', 'US'),
      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(tr('welcome')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              tr('welcome'),
              style: TextStyle(fontSize: 20),
            ),
            Text(
              tr('goodbye'),
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              onPressed: () {
                EasyLocalizationMulti.of(context).setLocale(Locale('zh', 'CN'));
              },
              child: Text('切换到中文'),
            ),
            ElevatedButton(
              onPressed: () {
                EasyLocalizationMulti.of(context).setLocale(Locale('en', 'US'));
              },
              child: Text('切换到英文'),
            ),
          ],
        ),
      ),
    );
  }
}

// Helper function to easily get translations
String tr(String key) => EasyLocalizationMulti.of(context).tr(key);

4. 运行应用

现在,你可以运行你的 Flutter 应用,并看到应用中的文本会根据当前设置的语言进行切换。

注意事项

  • 确保所有 JSON 文件都正确格式化,并且键名与你在代码中引用的键名一致。
  • 你可以根据需要添加更多的语言文件,并在 supportedLocales 列表中注册它们。
  • EasyLocalizationMulti.of(context) 是获取当前 EasyLocalizationMulti 实例的便捷方法,用于访问翻译功能。

以上是一个基本的示例,展示了如何在 Flutter 应用中使用 easy_localization_multi 插件实现多语言支持。根据你的需求,你可以进一步扩展和自定义这个示例。

回到顶部