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

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

Pub Version

klocalizations_flutter 是一个围绕 flutter_localizations 构建的包装器，添加了一些额外的功能，并抽象了部分常见的逻辑。

特性

  • 简单设置
  • 参数插值
  • 使用点表示法访问翻译（例如 home.title）
  • 从任何地方更改语言环境
  • LocalizedText 小部件

如何使用

1. 创建翻译文件

首先，我们需要为每种支持的语言创建包含翻译内容的文件。默认情况下，klocalizations 期望这些文件位于 'assets/translations' 目录下，但可以在设置时指定其他路径。配置文件必须以 JSON 格式编写。

示例：

// assets/translations/es.json
{
  "welcome": "Bienvenido a klocalizations demo!",
  "home": {
    "title": "KLocalizations demo!",
    "counter": "Has clicado {{count}} veces"
  },
}

2. 设置

在 main() 函数中初始化 KLocalizations，并将其传递给 MaterialApp。

void main() {
  runApp(
    KLocalizations.asChangeNotifier(
      locale: supportedLocales[0],
      defaultLocale: supportedLocales[0],
      supportedLocales: supportedLocales,
      localizationsAssetsPath: 'assets/translations',
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final localizations = KLocalizations.of(context);

    return MaterialApp(
      locale: localizations.locale,
      supportedLocales: localizations.supportedLocales,
      localizationsDelegates: [
        localizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      home: MyApp(),
    );
  }
}
2.1 添加资源到 pubspec 文件

在 pubspec.yaml 文件中声明翻译文件的路径，以便 Flutter 可以访问它们：

flutter:
  assets:
    - assets/translations/

注意： 资源路径必须与 localizationsAssetsPath 中的路径一致。

3. 翻译

现在我们可以开始在应用中进行翻译了。KLocalizations 提供了两种方式来实现这一点：使用 KLocalizations.translate() 或者 LocalizedText 小部件。

使用 KLocalizations.translate()

该方法接收一个字符串（或键），并返回翻译后的字符串。使用方式如下：

@override
Widget build(BuildContext context) {
  final localizations = KLocalizations.of(context);

  return Column(
    children: [
      Text(localizations.translate('welcome')),
      Text(localizations.translate('home.title')),
      Text(localizations.translate('home.counter', { 'count': 12 })),
    ]
  );
}
使用 LocalizedText

KLocalizations 提供了一个文本小部件，其行为与 Flutter 的 Text 小部件相同，但它会尝试使用 KLocalizations 来翻译给定的字符串。它还接受参数用于插值。使用方式如下：

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      LocalizedText('welcome'),
      LocalizedText('home.title', selectable: true),
      LocalizedText.selectable('home.counter', params: { 'count': 12 }),
    ]
  );
}

注意： LocalizedText 接受与 Text 类相同的参数，还有一些额外的参数。完整的文档可以在这里找到。

4. 更改语言环境

更改语言环境很简单，只需要告诉 KLocalizations 更改它：

KLocalizations.of(context).setLocale(locale);

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

1 回复

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


klocalizations_flutter 是一个用于 Flutter 应用程序的本地化管理插件，它可以帮助你轻松地管理和切换应用程序的多语言支持。以下是如何使用 klocalizations_flutter 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 klocalizations_flutter 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  klocalizations_flutter: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 创建本地化文件

在项目的 assets 目录下创建本地化文件。例如，你可以创建 en.json 和 zh.json 文件来分别存储英文和中文的翻译。

en.json:

{
  "hello": "Hello",
  "welcome": "Welcome to Flutter"
}

zh.json:

{
  "hello": "你好",
  "welcome": "欢迎使用 Flutter"
}

3. 配置 pubspec.yaml

在 pubspec.yaml 文件中配置本地化文件的路径。

flutter:
  assets:
    - assets/en.json
    - assets/zh.json

4. 初始化 KLocalizations

在 main.dart 文件中初始化 KLocalizations。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 KLocalizations
  await KLocalizations.initialize(
    supportedLocales: [
      const Locale('en', 'US'),
      const Locale('zh', 'CN'),
    ],
    assetLoader: AssetLoader(),
  );

  runApp(MyApp());
}

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

5. 使用本地化字符串

在应用程序中使用本地化字符串时，可以通过 KLocalizations.of(context) 来获取翻译。

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final localizations = KLocalizations.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.translate('welcome')),
      ),
      body: Center(
        child: Text(localizations.translate('hello')),
      ),
    );
  }
}

6. 切换语言

你可以通过 KLocalizations.setLocale 方法来动态切换语言。

void changeLanguage(BuildContext context, Locale locale) async {
  await KLocalizations.setLocale(context, locale);
}

然后在你的应用程序中调用 changeLanguage 方法来切换语言。

ElevatedButton(
  onPressed: () => changeLanguage(context, Locale('zh', 'CN')),
  child: Text('切换到中文'),
),
ElevatedButton(
  onPressed: () => changeLanguage(context, Locale('en', 'US')),
  child: Text('Switch to English'),
),

7. 处理缺失的翻译

如果某个翻译在某个语言中缺失，你可以通过 KLocalizations 的 fallbackLocale 属性来指定一个回退语言。

await KLocalizations.initialize(
  supportedLocales: [
    const Locale('en', 'US'),
    const Locale('zh', 'CN'),
  ],
  assetLoader: AssetLoader(),
  fallbackLocale: const Locale('en', 'US'),
);
回到顶部