Flutter国际化插件l10n_flutter的使用

Flutter国际化插件l10n_flutter的使用

介绍

l10n_flutter 是一个用于Flutter应用国际化的框架，它可以帮助你轻松地为你的应用添加多语言支持。通过这个插件，你可以重新组织和重命名键值而不会破坏应用的功能。当你运行生成器时，它会自动生成所有支持的语言环境的输出文件。

编译和测试

首先，克隆 l10n_flutter 的仓库并运行示例代码：

git clone https://github.com/dgofman/l10n_flutter.git

cd l10n_flutter

flutter create --org l10n_flutter -i objc -a java -t app .

flutter run -d chrome -t lib/examples/l10n_demo3_app.dart

入门指南

1. 创建一个新的Flutter项目：

   flutter create myapp
   
   cd myapp
   

2. 在 pubspec.yaml 中添加依赖：

   dependencies:
     flutter:
       sdk: flutter
    
     # 添加 l10n_flutter 依赖
     l10n_flutter: ^1.0.0
   

3. 创建一个语言模型文件（例如 models/app_ln10.dart）：

   import 'package:l10n_flutter/l10n_core.dart';
   
   // 支持的语言环境
   const AppL10nSettings = L10nSettings(locales: [
     L10nLocale('en', 'US', 'English (US)'),
     L10nLocale('en', 'GB', 'English (United Kingdom)'),
   ]);
   
   [@AppL10nSettings](/user/AppL10nSettings)
   class AppL10n {
     static const truck = L10nSet('app_truck', 'Truck');  // "app_truck" 是语言文件中的键
   }
   

4. 替换 lib/main.dart 中的代码：

   import 'package:flutter/material.dart';
   import 'package:l10n_flutter/l10n_material_app.dart';
   import './models/app_ln10.dart';
   
   void main() => runApp(L10nMaterialApp(
       locale: const Locale('en', 'GB'), // 设置默认语言环境
       supportedLocales: AppL10nSettings.supportedLocales, // 提供支持的语言环境列表
       builder: (BuildContext context, Widget? child) => Scaffold(body: Text(AppL10n.truck.$)) // 或者 AppL10n.truck.toString()
   ));
   

5. 注意：此时应用会显示默认值，因为还没有加载语言文件，可能会出现以下错误：

   L10nLoader Error: Unable to load asset: l10n/en_GB.json
   

生成资源文件

1. 创建 build.yaml 文件：

   builders:
     l10n_builder:
       import: "package:l10n_flutter/builder/builder.dart"
       builder_factories: ["l10nBuilderFactory"]
       build_extensions: {".dart": [".json"]}
       build_to: source
   
   targets:
     $default:
       builders:
         'l10n_flutter|l10n_builder':
           enabled: true
           generate_for: # 指定目录
             - lib/models/app_ln10.dart
   

2. 在 pubspec.yaml 中添加语言文件路径：

   flutter:
   
     # 添加资源文件
     assets:
       - assets/l10n/
   

3. 在 dev_dependencies 中添加 build_runner：

   dev_dependencies:
     flutter_test:
       sdk: flutter
   
     build_runner: ^2.1.7
   

4. 生成文件：

   flutter pub run build_runner build --delete-conflicting-outputs
   

5. 更新 assets/l10n/en_GB.json 文件内容：

   {
     "app_truck": "Lorry"
   }
   

示例代码

以下是一个完整的示例代码，展示了如何使用 l10n_flutter 插件来实现动态切换语言功能：

import 'package:flutter/cupertino.dart';
import 'package:l10n_flutter/l10n_material_app.dart';

import 'models/l10n.dart';
import 'l10n_widget_helper.dart';

class MaterialAppDemo extends StatefulWidget {
  const MaterialAppDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  _MaterialAppDemoState createState() => _MaterialAppDemoState();
}

class _MaterialAppDemoState extends State<MaterialAppDemo> {
  Locale? _locale = const Locale('he', 'IL');

  void changeLocale(Locale? newLocale) async {
    await l10nSettings.selectLocale(newLocale);
    setState(() {
      _locale = newLocale;
    });
  }

  [@override](/user/override)
  void initState() {
    changeLocale(_locale);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return L10nMaterialApp(
      locale: _locale, // 动态语言环境
      supportedLocales: l10nSettings.supportedLocales, // 提供支持的语言环境列表
      home: WidgetHelper.createMaterialScaffold(context, l10nSettings.indexOf(_locale), changeLocale),
    );
  }
}

void main() => runApp(const MaterialAppDemo());