Flutter本地化服务插件lit_localization_service的使用

概述

Lit Localization Service 是一个用于通过JSON文件创建本地化的Flutter包。

屏幕截图

英文本地化	德语本地化

如何工作

JSON文件在本地化委托中被获取。其内容将被提取到一个本地的Map中，并通过BuildContext访问。本地化的字符串可以通过调用LitLocalizations.of(context).getLocalizedValue("your_key_you_specified_on_the_json_file")来读取。

从本地存储读取重要值（如文本）需要在启动时检查当前获取过程的状态。这会增加应用的加载时间。它最适合在已经依赖于持久存储解决方案的情况下使用，因为启动时加载过程已经是必需的。

如何使用

设置

1. 提供一个包含所有本地化字符串的JSON文件，并按预定义结构组织（见下文）。
2. 在应用的pubspec.yaml文件中包含JSON文件资源。

   assets:
     - assets/json/
   

3. 将lit_localization_service作为git依赖添加到应用的pubspec.yaml文件中：

   lit_localization_service:
     git: https://github.com/litlifesoftware/lit_localization_service.git
   

   或者作为pub依赖：

   lit_localization_service:
   

4. 通过初始化LitLocalizationServiceDelegate设置MaterialApp的localizationsDelegates属性。提供JSON文件的位置。

   localizationsDelegates: [
     // 这里传递LitLocalizationServiceDelegate。
     LitLocalizationServiceDelegate(
       // 设置你的资产URL
       jsonAssetURL: 'assets/json/localized_strings.json',
       // 设置JSON文件中可用的所有语言代码
       supportedLanguages: ['en', 'de'],
       // 设置是否输出日志
       debug: true,
     ),
     GlobalMaterialLocalizations.delegate,
     GlobalWidgetsLocalizations.delegate,
     GlobalCupertinoLocalizations.delegate,
   ],
   

5. 创建一个FutureBuilder以调用initLocalizations方法，以便监控解析状态，并根据解析状态有条件地返回包含本地化字符串的屏幕或回退/加载屏幕。

   class ParsingStateBuilder extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return FutureBuilder(
         future: LitLocalizationController().initLocalizations('assets/json/localized_strings.json'),
         builder: (context, localizatonsInitalization) {
           return localizatonsInitalization.connectionState == ConnectionState.waiting
               ? LoadingScreen()
               : MyHomeScreen();
         },
       );
     }
   }
   

6. 一旦解析完成，通过访问BuildContext调用本地化的字符串。

   Text(LitLocalizations.of(context).getLocalizedValue("hello")),
   

JSON文件结构

JSON文件应包含一个对象列表，键可以是任意的。每个对象将有一系列键值对，表示语言和本地化字符串 <code>"languageCode": "Localized String"</code>。

{
  "hello": {
    "en": "Hello",
    "de": "Hallo"
  },
  "world": {
    "en": "World",
    "de": "Welt"
  }
}

示例

example文件夹包含一个演示最基础实现的应用，使用本地JSON资源文件。

完整示例Demo

以下是一个完整的示例Demo，展示了如何使用lit_localization_service插件进行本地化。

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:lit_localization_service/lit_localization_service.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lit Localization Service Demo',
      home: ParsingStateBuilder(),
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        // 这里传递LitLocalizationServiceDelegate。
        LitLocalizationServiceDelegate(
          // 设置你的资产URL
          jsonAssetURL: 'assets/json/localized_strings.json',
          // 设置JSON文件中可用的所有语言代码
          supportedLanguages: ['en', 'de'],
          // 设置是否输出日志
          debug: true,
        ),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        // 英语（无国家代码）
        const Locale('en', ''),
        // 德语（无国家代码）
        const Locale('de', '')
      ],
    );
  }
}

/// 加载屏幕。
class LoadingScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Loading localizations ..."),
      ),
    );
  }
}

/// 一个根据JSON解析当前状态构建[LoadingScreen]或[MyHomeScreen]的小部件。
///
/// 必须使用未来的函数初始化本地化，以获得当前状态。一旦JSON解析完成，实际小部件就可以显示。如果还没有，只要解析还在进行中，就应该显示加载屏幕。
class ParsingStateBuilder extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: LitLocalizationController().initLocalizations('assets/json/localized_strings.json'),
      builder: (context, localizatonsInitalization) {
        return localizatonsInitalization.connectionState == ConnectionState.waiting
            ? LoadingScreen()
            : MyHomeScreen();
      },
    );
  }
}

/// 显示本地化字符串的主屏幕。
class MyHomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Lit Localization Service Demo"),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(LitLocalizations.of(context).getLocalizedValue("hello")),
          Text(LitLocalizations.of(context).getLocalizedValue("world")),
        ],
      )),
    );
  }
}