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

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

概述

这个包使获取和更改应用程序的区域设置变得简单。您可以使用它来获取用户设备的语言信息,或者仅在您的应用中切换到不同的语言。它设计为与 Flutter 的标准多语言方法共存。

使用

请查看 pub.dev 上的示例标签。

支持

基本上没有支持。如果您有任何问题,请在 Github 上打开一个 Issue。 这个包优先级较低,但可能会被修复。

关于版本控制

在版本升级时,C 部分会发生变化。 但是,小于 1.0.0 的版本可能不会遵循以下规则改变文件结构。

  • 添加变量、结构变化导致读取以前文件出现问题等。
    • C.X.X
  • 添加方法等。
    • X.C.X
  • 小修改和错误修复。
    • X.X.C

许可证

该软件根据 MIT 许可证发布,详见 LICENSE 文件。

版权声明

“Dart” 和 “Flutter” 名称是 Google LLC 的商标。 *该包的开发者不是 Google LLC。

示例代码

以下是 simple_locale 插件的基本用法示例。

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

// 未启用时取消注释 AppLocalizations。
// import 'package:flutter_gen/gen_l10n/app_localizations.dart';

const supportedLocales = [
  Locale('en'), // 英语
  Locale('ja'), // 日语
];

void main() async {
  // 即使您使用 riverpod 等,也请将 LocalizedApp 直接放置在 runApp 下方(它将是 ProviderScope 的父部件)。
  runApp(const LocalizedApp(
      supportedLocales: supportedLocales, child: AppParent(MyApp())));
}

class AppParent extends StatelessWidget {
  final Widget child;

  const AppParent(this.child, {super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        // 设置您的 MaterialApp 的区域设置以通过 LocaleManager 获取:
        locale: LocaleManager.of(context)?.getLocaleForApp(),
        localizationsDelegates: const [
          // 未启用时取消注释 AppLocalizations。
          // AppLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: supportedLocales,
        home: child);
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 未启用时取消注释 AppLocalizations。
        // title: Text(AppLocalizations.of(context)!.appName),
        title: const Text("simple_locale"),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                  margin: const EdgeInsets.fromLTRB(0, 0, 0, 12),
                  child: Text(
                    // 在构建期间可以获取区域设置。
                    LocaleManager.of(context)?.getLanguageCode() == 'ja'
                        ? 'こんにちは'
                        : 'Hello',
                  )),
              ElevatedButton(
                onPressed: () {
                  if (LocaleManager.of(context)?.getLanguageCode() == 'en') {
                    // 更改区域设置是在按钮回调等中完成的,禁止在构建期间更改区域设置。
                    LocaleManager.of(context)?.changeLocale(const Locale('ja'));
                  } else {
                    LocaleManager.of(context)?.changeLocale(const Locale('en'));
                  }
                },
                child: Text(LocaleManager.of(context)?.getLanguageCode() == 'ja'
                    ? 'ロケール変更'
                    : 'Change Locale'),
              ),
              Container(
                margin: const EdgeInsets.fromLTRB(0, 12, 0, 0),
                child: ElevatedButton(
                  onPressed: () {
                    LocaleManager.of(context)?.reset();
                  },
                  child: Text(
                      LocaleManager.of(context)?.getLanguageCode() == 'ja'
                          ? 'デバイスロケールにリセット'
                          : 'Reset to device locale'),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

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

1 回复

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


simple_locale 是一个用于 Flutter 的轻量级本地化(国际化)管理插件,它可以帮助开发者轻松地管理应用中的多语言支持。以下是如何使用 simple_locale 插件的详细步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 simple_locale 依赖:

dependencies:
  flutter:
    sdk: flutter
  simple_locale: ^0.1.0  # 请使用最新版本

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

2. 创建本地化文件

在项目中创建一个 locales 文件夹,并在其中创建不同语言的文件,例如:

  • locales/en.json
  • locales/es.json
  • locales/zh.json

每个文件的内容是一个 JSON 对象,包含键值对,表示不同语言的翻译。例如:

en.json:

{
  "greeting": "Hello",
  "farewell": "Goodbye"
}

es.json:

{
  "greeting": "Hola",
  "farewell": "Adiós"
}

zh.json:

{
  "greeting": "你好",
  "farewell": "再见"
}

3. 配置 SimpleLocale

main.dart 文件中配置 SimpleLocale

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

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

  // 初始化 SimpleLocale
  await SimpleLocale.init(
    localesPath: 'locales/',  // 本地化文件的路径
    defaultLocale: 'en',      // 默认语言
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

4. 使用 SimpleLocale 进行本地化

在应用中使用 SimpleLocale 来获取本地化字符串:

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Localization'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(SimpleLocale.getString('greeting')),  // 获取本地化字符串
            Text(SimpleLocale.getString('farewell')),
            ElevatedButton(
              onPressed: () {
                SimpleLocale.setLocale('es');  // 切换语言
              },
              child: Text('Switch to Spanish'),
            ),
            ElevatedButton(
              onPressed: () {
                SimpleLocale.setLocale('en');  // 切换语言
              },
              child: Text('Switch to English'),
            ),
            ElevatedButton(
              onPressed: () {
                SimpleLocale.setLocale('zh');  // 切换语言
              },
              child: Text('Switch to Chinese'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部