Flutter本地化管理插件jimtl_localazy的使用

本文档将详细介绍如何在Flutter项目中使用jimtl_localazy插件进行本地化管理。此插件可以帮助你处理缓存和远程更新你的ARB文件。

安装

首先，在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  jimtl_localazy:
  flutter_jimtl:

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

初始化LocalazyCdnManager

在Dart侧，你需要创建一个LocalazyCdnManager实例：

import 'package:path/path.dart' as path;
import 'package:flutter/services.dart' show rootBundle;
import 'package:localazy/localazy.dart';
import 'package:jimtl/jimtl.dart';
import 'package:jimtl_localazy/jimtl_localazy.dart';

final manager = LocalazyCdnManager(
  cdnId: '_a860213072234234453319c546',
  getFileName: (String locale, String flavor) {
    return 'myFile_$flavor.arb';
  },
  cacheFolder: path.join((await getTemporaryDirectory()).path, 'translations'),
);

cdnId可以通过运行localazy cdn命令来获取，例如：

Metadata:
 - JSON: https://delivery.localazy.com/_a860213072234234453319c546/_e0.json
 - Javascript: https://delivery.localazy.com/_a860213072234234453319c546/_e0.js
 - Typescript: https://delivery.localazy.com/_a860213072234234453319c546/_e0.ts

在这个例子中，cdnId为_a860213072234234453319c546。

使用

如果你已经有一个支持本地化的Flutter项目，那么你需要在应用中声明一个LocalizationDelegate。以下是一个示例：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:jimtl/jimtl.dart';
import 'package:jimtl_localazy/jimtl_localazy.dart';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        DefaultMaterialLocalizations.delegate,
        TranslationsDelegate<Translations>.withRemoteManager(
          defaultLocale: 'en',
          supportedLocales: ['en', 'fr'],
          defaultFlavor: 'default',
          currentFlavor: 'flavor1',
          localizationManager: manager,
          dataLoader: (locale, flavor) async {
            print('local load $locale and $flavor');
            if (flavor == 'default') {
              return await rootBundle.loadString('assets/arb/translations_$locale.arb');
            }
            return await rootBundle.loadString('assets/arb/translations_${flavor}_$locale.arb');
          },
          onTranslationsUpdated: () {
            print('TX updated, need rebuild');
            setState(() {});
          },
          translationsBuilder: () => Translations(),
        ),
      ],
      supportedLocales: [Locale('en'), Locale('fr')],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).title),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context).helloWorld),
      ),
    );
  }
}

示例代码

以下是一个完整的示例代码，展示了如何使用jimtl_localazy插件：

import 'package:flutter/material.dart';
import 'package:jimtl/jimtl.dart';
import 'package:jimtl_localazy/jimtl_localazy.dart';

void main() async {
  final manager = LocalazyCdnManager(
    cdnId: '_a860213072234234453319c546',
    cacheFolder: '.',
    getFileName: (String locale, String flavor) {
      return 'myFile_$flavor.arb';
    },
  );

  runApp(MyApp(manager: manager));
}

class MyApp extends StatelessWidget {
  final LocalazyCdnManager manager;

  MyApp({required this.manager});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        DefaultMaterialLocalizations.delegate,
        TranslationsDelegate<Translations>.withRemoteManager(
          defaultLocale: 'en',
          supportedLocales: ['en', 'fr'],
          defaultFlavor: 'default',
          currentFlavor: 'flavor1',
          localizationManager: manager,
          dataLoader: (locale, flavor) async {
            print('local load $locale and $flavor');
            if (flavor == 'default') {
              return await rootBundle.loadString('assets/arb/translations_$locale.arb');
            }
            return await rootBundle.loadString('assets/arb/translations_${flavor}_$locale.arb');
          },
          onTranslationsUpdated: () {
            print('TX updated, need rebuild');
            setState(() {});
          },
          translationsBuilder: () => Translations(),
        ),
      ],
      supportedLocales: [Locale('en'), Locale('fr')],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).title),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context).helloWorld),
      ),
    );
  }
}