Flutter语言与地区切换插件locale_switcher_dev的使用

Flutter语言与地区切换插件locale_switcher_dev的使用

插件概述

locale_switcher_dev 是一个用于动态切换应用语言和地区的小部件。它允许你通过少量代码实现多语言支持。

目录

• 关于
• 设置
• 功能
• 用法
• 示例
• 待办事项
• 常见问题

关于

locale_switcher_dev 包将动态生成 locale_switcher 版本，该版本允许你仅通过两行代码添加语言和地区切换功能。相比 locale_switcher，它需要更多设置步骤，但可以更灵活地控制包含哪些标志（或不包含）以及依赖哪些包（或不依赖）。

设置

完整的 pubspec.yaml 配置示例如下：

dependencies:
  locale_switcher:
    # 这个版本应该是空的或者任意版本
    # 这将由 `dart run build_runner build` 生成（你需要先运行此命令，然后添加 `path` 行）
    path: lib/src/packages/locale_switcher

dev_dependencies:
  locale_switcher_dev: # 这个包

注意：locale_switcher 不是一个本地化包，而是一些扩展本地化系统功能的小部件，如 intl 和 easy_localization 等。

功能

• LocaleManager 小部件：

  • 可选：在 SharedPreferences 中加载/存储最后选择的语言。
  • 更新应用程序的语言环境（它监听 notifier 并重建 MaterialApp）。
  • 观察系统语言环境的变化。

• LocaleSwitcher 小部件：

  • 显示语言列表及使用系统语言的特殊选项。
  • 构造函数 LocaleSwitcher.segmentedButton。
  • 构造函数 LocaleSwitcher.menu。
  • 构造函数 LocaleSwitcher.custom。
  • 构造函数 LocaleSwitcher.iconButton - 按钮/指示器，点击后会打开弹出窗口以选择语言。

• 其他辅助功能：

  • LangIconWithToolTip 类，具有额外的构造函数 forIconBuilder。
  • showSelectLocaleDialog。
  • Locale 扩展，返回标志 - Locale.flag 或表情符号标志 - Locale.emoji。

用法

1. 将 MaterialApp 或 CupertinoApp 包裹在 LocaleManager 中（例如，对于 intl 包）：

   [@override](/user/override)
   Widget build(BuildContext context, WidgetRef ref) {
     return LocaleManager(
       child: MaterialApp(
         locale: LocaleSwitcher.localeBestMatch,
         supportedLocales: AppLocalizations.supportedLocales,
         localizationsDelegates: AppLocalizations.localizationsDelegates,
         //...
       ),
     );
   }
   

2. 在应用的任何位置添加 LocaleSwitcher 小部件。

示例

使用 intl 包

• 示例代码（推荐）
• 不使用 LocaleManager 的示例代码（不推荐）
• 动态选项切换示例

使用 easy_localization 包

• 示例代码（推荐）
• 另一个示例代码（不推荐）

使用 slang 包

• 示例代码

待办事项

• ❌ 改进矩形标志！
• ❌ 允许使用表情符号作为标志
• ❌ 改进 slang 支持
• ❌ 选项使用 .svg.vec 而不是 .svg

常见问题

如何更改语言的顺序？

语言的显示顺序与 l10n.yaml 中的顺序相同，或者通过 LocaleSwitcher.custom 动态设置。

如何更改语言的标志？

使用 LocaleManager 的 reassign 参数：

LocaleManager(
  reassign: {'en': ['GB', 'English', <Your_icon_optional>]},
  // (前两个选项是必需的，第三个是可选的)
  // 第一个选项是你想使用的国家标志的代码
  //...
)

如何在 MaterialApp 或 CupertinoApp 外部使用本地化？

这是一个有用的示例，尽管它不依赖于此包：

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

/// 访问本地化
extension LocaleWithDelegate on Locale {
  /// 获取此语言环境的翻译字符串类。
  AppLocalizations get tr => lookupAppLocalizations(this);
}

Locale("en").tr.example
// 或者
LocaleManager.locale.value.tr.example

完整示例代码

import 'package:animated_toggle_switch/animated_toggle_switch.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:locale_switcher/locale_switcher.dart';

/// 有用的扩展，如果需要在 MaterialApp 外部使用本地化。
extension LocaleWithDelegate on Locale {
  /// 获取此语言环境的翻译字符串类。
  AppLocalizations get tr => lookupAppLocalizations(this);
}

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // ============= 这四行是必需的 =============
    return LocaleManager(
      child: MaterialApp(
        locale: LocaleSwitcher.localeBestMatch,
        supportedLocales: AppLocalizations.supportedLocales,
        localizationsDelegates: AppLocalizations.localizationsDelegates,
        title: LocaleSwitcher.locale.value.tr.example,
        home: MyHomePage(title: LocaleSwitcher.locale.value.tr.example),
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlue[900]!),
          useMaterial3: true,
          textTheme: const TextTheme(bodyMedium: TextStyle(fontSize: 22)),
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context); // 本地化快捷方式
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
        actions: const [
          // =============== 这一行是必需的 ===============
          LocaleSwitcher.iconButton(),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Center(
              // =============== 这一行是必需的 ===============
              child: LocaleSwitcher.menu(title: loc.chooseLanguage),
            ),
            const Divider(),
            TitleForLocaleSwitch(
              title: loc.chooseLanguage,
              // =============== 这一行是必需的 ===============
              child: const LocaleSwitcher.custom(
                builder: animatedToggleSwitchBuilder,
                numberOfShown: 2,
              ),
            ),
            const Divider(),
            TitleForLocaleSwitch(
              title: loc.chooseLanguage,
              // =============== 这一行是必需的 ===============
              child: const LocaleSwitcher.segmentedButton(
                numberOfShown: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// 用于 [LocaleSwitcher.custom] 的构建函数，使用了 [AnimatedToggleSwitch]。
Widget animatedToggleSwitchBuilder(
    SupportedLocaleNames langCodes, BuildContext context) {
  if (langCodes.length <= 1) {
    // AnimatedToggleSwitch 会因只有一个值而崩溃
    langCodes.addShowOtherLocales();
  }

  return AnimatedToggleSwitch<LocaleName>.rolling(
    // 包：animated_toggle_switch
    values: langCodes,
    current: LocaleSwitcher.current,
    onChanged: (langCode) {
      if (langCode.name == showOtherLocales) {
        showSelectLocaleDialog(context);
      } else {
        LocaleSwitcher.current = langCode;
      }
    },
    iconBuilder: LangIconWithToolTip.forIconBuilder,
    allowUnlistedValues: true,
    loading: false,
    style: ToggleStyle(
      backgroundColor: Colors.black12,
      indicatorColor: Theme.of(context).colorScheme.primaryContainer,
    ),
  );
}