Flutter本地化插件zooper_flutter_localization的使用

简介

zooper_flutter_localization 是一个简单的本地化库，旨在支持多个本地化文件。该库旨在与 get_it 或 injectable 配合使用，但也可以与其他框架一起工作。

示例

导入

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  zooper_flutter_localization: ^<latest_version>

然后在 Dart 文件中导入：

import 'package:zooper_flutter_localization/zooper_flutter_localization.dart';

使用 injectable 注册本地化服务

如果你希望为特定的视图（或 ViewModel）注册本地化服务，可以使用 injectable 模块来定义它。

定义模块

import 'package:injectable/injectable.dart';
import 'package:zooper_flutter_localization/zooper_flutter_localization.dart';

[@module](/user/module)
abstract class LocalizationModule {
  // 获取本地化服务实例
  LocalizationService get localizationService;

  // 注册一个名为 'Titles' 的本地化服务
  [@preResolve](/user/preResolve)
  [@Named](/user/Named)('Titles')
  Future<ZooperLocalizer> titlesLocalizations(LocalizationService localizationService) =>
      localizationService.loadAsync('assets/localizations/titles.csv');

  // 注册另一个名为 'Errors' 的本地化服务
  [@preResolve](/user/preResolve)
  [@Named](/user/Named)('Errors')
  Future<ZooperLocalizer> errorsLocalizations(LocalizationService localizationService) =>
      localizationService.loadAsync('assets/localizations/errors.csv');

  // 注册一个未命名的本地化服务，但指定类型
  [@preResolve](/user/preResolve)
  Future<ZooperLocalizer<MainViewModel>> viewModelLocalizations(LocalizationService localizationService) =>
      localizationService.loadAsync('assets/localizations/errors.csv');
}

注入到视图中

你可以通过注入的方式将本地化服务注入到视图中：

class TestView {
  final ZooperLocalizer<TestViewModel> _localizer;

  TestView(this._localizer);
}

或者注入未命名的本地化服务：

class TestView {
  final ZooperLocalizer _localizer;

  TestView([@Named](/user/Named)('YourName') this._localizer);
}

访问翻译内容

有多种方式可以访问翻译内容：

最简单的方式

_localizer['Hello'];

使用 getLocalization 方法

_localizer.getLocalization('Hello');

使用特定的本地化语言

_localizer.getLocalizationByLocale('Hello', Locale('de', 'DE'));

完整示例代码

以下是一个完整的示例，展示如何使用 zooper_flutter_localization 插件：

import 'package:flutter/material.dart';
import 'package:injectable/injectable.dart';
import 'package:zooper_flutter_localization/zooper_flutter_localization.dart';

// 定义本地化模块
[@module](/user/module)
abstract class LocalizationModule {
  LocalizationService get localizationService;

  [@preResolve](/user/preResolve)
  [@Named](/user/Named)('Titles')
  Future<ZooperLocalizer> titlesLocalizations(LocalizationService localizationService) =>
      localizationService.loadAsync('assets/localizations/titles.csv');

  [@preResolve](/user/preResolve)
  [@Named](/user/Named)('Errors')
  Future<ZooperLocalizer> errorsLocalizations(LocalizationService localizationService) =>
      localizationService.loadAsync('assets/localizations/errors.csv');
}

void main() {
  // 初始化 injectable
  configureInjection(Environment.prod);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LocalizedPage(),
    );
  }
}

class LocalizedPage extends StatelessWidget {
  final ZooperLocalizer _titlesLocalizer;

  LocalizedPage({
    required this._titlesLocalizer,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_titlesLocalizer['AppName']),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_titlesLocalizer['WelcomeMessage']),
            ElevatedButton(
              onPressed: () {
                print(_titlesLocalizer['ButtonLabel']);
              },
              child: Text(_titlesLocalizer['ButtonLabel']),
            ),
          ],
        ),
      ),
    );
  }
}