Flutter国际化插件localize_it_annotation的使用

Flutter国际化插件localize_it_annotation的使用

在Flutter中实现国际化功能时，可以使用localize_it插件来简化多语言支持。为了进一步增强开发体验，localize_it_annotation插件提供了注解（annotations）功能。这些注解可以帮助我们更方便地管理和使用本地化字符串。

准备工作

首先，确保你已经在项目的pubspec.yaml文件中添加了localize_it和localize_it_annotation依赖项：

dependencies:
  flutter:
    sdk: flutter
  localize_it: ^x.x.x
  localize_it_annotation: ^x.x.x

dev_dependencies:
  build_runner: ^x.x.x
  localize_it_generator: ^x.x.x

其中x.x.x应替换为实际的版本号。

安装依赖

安装依赖后，运行构建命令以生成必要的类：

flutter pub get
flutter pub run build_runner build

创建本地化文件

创建一个包含所有本地化字符串的文件。例如，创建一个名为app_en.arb的文件，内容如下：

{
  "@@locale": "en",
  "helloWorld": "Hello World!",
  "welcomeMessage": "Welcome to our app!"
}

再创建一个app_zh.arb文件，内容如下：

{
  "@@locale": "zh",
  "helloWorld": "你好，世界！",
  "welcomeMessage": "欢迎来到我们的应用！"
}

使用注解

接下来，在你的Dart文件中使用注解来引用这些本地化字符串。例如，创建一个main.dart文件：

import 'package:flutter/material.dart';
import 'package:localize_it_annotation/localize_it_annotation.dart';

// 引入生成的本地化类
import '_\$appLocalizations.g.dart'; // 注意这个路径可能需要根据你的项目结构进行调整

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        AppLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', ''),
        Locale('zh', ''),
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final localizations = AppLocalizations.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.helloWorld),
      ),
      body: Center(
        child: Text(localizations.welcomeMessage),
      ),
    );
  }
}

更多关于Flutter国际化插件localize_it_annotation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国际化插件localize_it_annotation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


localize_it_annotation 是一个用于 Flutter 应用国际化的注解库，它与 localize_it 包一起使用，可以帮助你更方便地管理和生成多语言支持的代码。通过使用注解，你可以标记需要国际化的字符串，并通过代码生成工具自动生成相应的翻译文件。

以下是使用 localize_it_annotation 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 localize_it 和 localize_it_annotation 的依赖：

dependencies:
  flutter:
    sdk: flutter
  localize_it: ^1.0.0

dev_dependencies:
  build_runner: ^2.1.0
  localize_it_generator: ^1.0.0
  localize_it_annotation: ^1.0.0

2. 创建国际化注解

在你的代码中，使用 @LocalizeIt 注解标记需要国际化的字符串。通常，你可以在一个单独的 Dart 文件中定义这些注解。

import 'package:localize_it_annotation/localize_it_annotation.dart';

part 'app_localizations.g.dart';

@LocalizeIt(
  locales: ['en', 'es', 'fr'],
  path: 'assets/translations',
)
class AppLocalizations {
  @LocalizeItText(locale: 'en', text: 'Hello, World!')
  @LocalizeItText(locale: 'es', text: '¡Hola, Mundo!')
  @LocalizeItText(locale: 'fr', text: 'Bonjour, le Monde!')
  String get helloWorld;

  @LocalizeItText(locale: 'en', text: 'Goodbye!')
  @LocalizeItText(locale: 'es', text: '¡Adiós!')
  @LocalizeItText(locale: 'fr', text: 'Au revoir!')
  String get goodbye;
}

3. 生成翻译文件

运行 build_runner 来生成翻译文件和相关的 Dart 代码：

flutter pub run build_runner build

这将生成 app_localizations.g.dart 文件，其中包含了国际化所需的代码。

4. 使用生成的代码

在 Flutter 应用中，使用生成的 AppLocalizations 类来访问翻译字符串：

import 'package:flutter/material.dart';
import 'app_localizations.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var loc = AppLocalizations.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(loc.helloWorld),
      ),
      body: Center(
        child: Text(loc.goodbye),
      ),
    );
  }
}

5. 配置翻译文件路径

在 pubspec.yaml 中配置翻译文件的路径，确保 Flutter 能够找到这些文件：

flutter:
  assets:
    - assets/translations/

6. 创建翻译文件

在 assets/translations 目录下创建对应的 JSON 翻译文件，例如 en.json、es.json、fr.json 等。文件内容如下：

en.json

{
  "helloWorld": "Hello, World!",
  "goodbye": "Goodbye!"
}

es.json

{
  "helloWorld": "¡Hola, Mundo!",
  "goodbye": "¡Adiós!"
}

fr.json

{
  "helloWorld": "Bonjour, le Monde!",
  "goodbye": "Au revoir!"
}
回到顶部