Flutter本地化支持插件im_localized的使用

Flutter本地化支持插件im_localized的使用

简介

im_localized 是一个支持ICU语法的Flutter本地化库，它提供了对JSON和ARB文件的支持，并且可以在运行时解析和注入本地化资源。以下是关于如何使用 im_localized 插件的详细说明和完整示例。

功能

• 支持ICU语法
• 支持从JSON文件中解析本地化资源
• 支持在运行时解析和注入本地化资源

入门指南

安装

你可以通过以下命令将 im_localized 添加到你的项目中：

flutter pub add im_localized

或者在 pubspec.yaml 文件中添加依赖：

dependencies:
  im_localized: <last_version>

使用方法

示例代码

下面是一个完整的示例，展示了如何使用 im_localized 插件来实现多语言支持的应用程序。

import 'package:flutter/material.dart';
import 'l10n/localization.dart'; // 引入本地化文件

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

  runApp(
    const MyApp(),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({
    super.key,
  });

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Map<String, String>> localizations = initialTranslations;

  @override
  void initState() {
    localizations = initialTranslations;
    super.initState();
  }

  // 注入新的语言资源
  void _injectLanguages() {
    localizations = [
      {
        "@@locale": "es", // 西班牙语
        LocaleKeys.languageFlag: "Spanish",
        LocaleKeys.hiMessage: "¡Buenos días {name}!", // 欢迎消息
        LocaleKeys.itemCounter:
            "{ count, plural, =0{sin artículos} =1{un artículo} other{hay # artículos}}", // 物品计数
      },
      {
        "@@locale": "en", // 英语
        LocaleKeys.languageFlag: "English",
        LocaleKeys.hiMessage: "Hello {name}!", // 欢迎消息
        LocaleKeys.itemCounter:
            "{ count, plural, =0{no items} =1{one item} other{there are # items}}", // 物品计数
      },
    ];
    setState(() {
      localizations = localizations;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ImLocalizedApp.fromList(
      /// 初始翻译资源加载到RAM中
      initialTranslations: localizations,

      /// 保存语言变化到本地存储
      localeStorage: SharedPreferencesLocaleStorage(),

      /// 保存注入的翻译资源到本地存储
      // translationsStorage: SharedPreferencesTranslationsStorage(),

      app: AppWidget(
        injectLanguages: _injectLanguages,
      ),
    );
  }
}

class AppWidget extends StatefulWidget {
  const AppWidget({super.key, required this.injectLanguages});
  final Function injectLanguages;

  @override
  State<AppWidget> createState() => _AppWidgetState();
}

class _AppWidgetState extends State<AppWidget> {
  int _count = 0;

  // 增加计数
  void _incrementCounter() {
    setState(() {
      _count++;
    });
  }

  // 构建语言选择器
  Widget _buildLanguageSelector() {
    return DropdownButton<Locale>(
      value: context.locale,
      onChanged: (Locale? locale) {
        if (locale != null) {
          context.setLocale(locale); // 设置当前语言
        }
      },
      items: context.supportedLocales
          .map<DropdownMenuItem<Locale>>((Locale locale) {
        return DropdownMenuItem<Locale>(
          value: locale,
          child: Text(LocaleKeys.languageFlag.translate(locale: locale)), // 显示语言标志
        );
      }).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(
            LocaleKeys.hiMessage.translate(args: {'name': 'Sara'}), // 欢迎消息
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          actions: [_buildLanguageSelector()], // 语言选择器
        ),
        body: Column(
          children: [
            Center(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text(
                  LocaleKeys.itemCounter.translate(args: {'count': _count}), // 物品计数
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ),
            ),
            Expanded(
              child: ListView.builder(
                padding: const EdgeInsets.all(16) +
                    EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
                itemCount: _count,
                itemBuilder: (context, index) => Card(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('${index + 1}'),
                  ),
                ),
              ),
            )
          ],
        ),
        bottomNavigationBar: Container(
          color: Theme.of(context).primaryColorLight,
          child: SafeArea(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  onPressed: _incrementCounter,
                  icon: const Icon(Icons.add), // 增加按钮
                ),
                IconButton(
                  onPressed: () => widget.injectLanguages(),
                  icon: const Icon(Icons.cloud_download), // 下载语言包按钮
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

生成初始本地化资源

1. 创建至少一个本地化文件（例如：lib/l10n/en.json）。

2. 运行生成脚本：

   flutter pub run im_localized:generate