flutter学习-day19-国际化支持

文章目录

  • [1. 介绍](#1. 介绍)
  • [2. 使用](#2. 使用)
  • [3. 获取当前区域Locale](#3. 获取当前区域Locale)
  • [4. 监听语言切换](#4. 监听语言切换)
  • [5. 实现国际化](#5. 实现国际化)
    • [5-1. 添加依赖](#5-1. 添加依赖)
    • [5-2. 创建arb文件](#5-2. 创建arb文件)
    • [5-3. 添加provider状态管理](#5-3. 添加provider状态管理)
    • [5-4. 完成切换](#5-4. 完成切换)

本文学习和引用自《Flutter实战·第二版》:作者:杜文

1. 介绍

默认情况下,Flutter SDK中的组件仅提供美国英语本地化资源(主要是文本)。要添加对其他语言的支持,应用程序须添加一个名为"flutter_localizations"的包依赖,然后还需要在MaterialApp中进行一些配置。

2. 使用

首先安装flutter_localizations

shell 复制代码
flutter pub add flutter_localizations

然后修改main.dart,指定MaterialApp的localizationsDelegates和supportedLocales。

dart 复制代码
import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
 localizationsDelegates: [
   // 本地化的代理类
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', 'US'), // 美国英语
    const Locale('zh', 'CN'), // 中文简体
    // 其他Locales
  ],
)

3. 获取当前区域Locale

Locale类是用来标识用户的语言环境的,它包括语言和国家两个标志,如下:

dart 复制代码
const Locale('zh', 'CN')

可以通过以下方式来获取应用的当前区域Locale:

dart 复制代码
Locale myLocale = Localizations.localeOf(context);

4. 监听语言切换

当我们更改系统语言设置时,APP中的Localizations组件会重新构建,Localizations.localeOf(context) 获取的Locale就会更新,最终界面会重新build达到切换语言的效果。

dart 复制代码
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      // 语言切换回调
      localeResolutionCallback: (locales, supportedLocales) {
        // 在这里自定义语言环境
        if(true) {
          return const Locale('zh', 'CN');
        } else {
          return const Locale('en', 'US');
        }
      },
      home: MyHomePage(),
    );
  }
}

5. 实现国际化

这里我们使用intl来实现国际化。

5-1. 添加依赖

在pubspec.yaml里添加intlflutter_localizations依赖。以及开启生成器。

yaml 复制代码
dependencies:
  flutter:
    sdk: flutter
  # 国际化
  intl: ^0.18.1 # add
  flutter_localizations: # add
    sdk: flutter # add
# The following section is specific to Flutter packages.
flutter:
  generate: true # add

5-2. 创建arb文件

在Android studio内直接搜索flutter Intl,添加插件,安装完成后,点击顶部工具栏,选择Tools =》 flutter intl =》 lnitalize for the project,初始化一下。插件会默认创建l10n文件夹,generated文件夹,里面包含messages_all.dart、messages_en.dart以及intl_en.arb文件。

如果要新建语言类型,点击顶部工具栏,选择Tools =》 flutter intl =》 add locale,输入语言类型,插件会自动创建对应语言的arb文件。

然后就是填写你的文案字段了。

  • intl_zh.arb
arb 复制代码
{
  "appName": "例子",
  "appTitle": "你好世界!"
}
  • intl_en.arb
arb 复制代码
{
  "appName": "例子",
  "appTitle": "你好世界!"
}

5-3. 添加provider状态管理

这里为什么要添加provider呢,因为我们切换语言后的当前语言环境,我们要保存住,然后通过provider通知到其他组件。这样才是一个完整的国际化。

在pubspec.yaml里添加provider依赖,然后pub get一下。

yaml 复制代码
# 状态管理:https://pub.dev/packages/provider
provider: ^6.1.1

在lib文件夹下创建一个provider文件夹,在provider文件夹下创建language.dart文件用来管理语言,添加如下代码:

dart 复制代码
import 'package:flutter/material.dart';

class LanguageProvider extends ChangeNotifier {
  /// 默认语言
  Locale currentLanguage = const Locale('zh', 'CN');
  /// 获取当前语言
  Locale get getCurrentLanguage => currentLanguage;
  /// 修改语言
  void changeLanguage(Locale newLanguage) {
    currentLanguage = newLanguage;
    notifyListeners();
  }
}

然后修改main.dart的代码,添加语言包和一些代理,以及provider的状态。如下:

dart 复制代码
import 'package:flutter/material.dart';
import 'views/home/view.dart';
import 'package:demo2/generated/l10n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:demo2/provider/language.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      // 所有要使用的provider都放到这里
      providers: [
        ChangeNotifierProvider(create: (context) => LanguageProvider())
      ],
      builder: (context, child) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          // 设置当前语言
          locale: Provider.of<LanguageProvider>(context).currentLanguage,
          // 设置语言类型有哪几种
          supportedLocales: S.delegate.supportedLocales,
          // 初始化指定语言
          localizationsDelegates: const [
            // 本地化的代理类
            S.delegate,
            // 指定本地化的字符串和一些其他的值
            GlobalMaterialLocalizations.delegate,
            // 对应的Cupertino风格
            GlobalCupertinoLocalizations.delegate,
            // 指定默认的文本排列方向, 由左到右或由右到左
            GlobalWidgetsLocalizations.delegate
          ],
          home: const HomePage(),
        );
      },
    );
  }
}

5-4. 完成切换

然后在页面中使用语言切换

dart 复制代码
import 'package:flutter/material.dart';
import 'package:demo2/provider/language.dart';
import 'package:demo2/config/config.dart';
import 'package:demo2/generated/l10n.dart';
import 'package:provider/provider.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  int self = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 这样使用
        title: Text(S.of(context).appTitle),
      ),
      body: Center(
        child: Text('${S.of(context).appName}:$self'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            self++;
          });
          // 获取语言管理provider 并且不监听变化
          final languageProvider = Provider.of<LanguageProvider>(context, listen: false);
          late Locale newLanguage;
          if (self % 2 == 0) {
            newLanguage = const Locale('en', 'US');
          } else {
            newLanguage = const Locale('zh', 'CN');
          }
          languageProvider.changeLanguage(newLanguage);
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~

往期文章

个人主页

相关推荐
丰锋ff4 分钟前
考研英一学习笔记
笔记·学习·考研
hnlucky20 分钟前
redis 数据类型新手练习系列——Hash类型
数据库·redis·学习·哈希算法
Invinciblenuonuo28 分钟前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
好奇龙猫30 分钟前
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(11): てあります。
学习
2501_915373881 小时前
Node.js 学习入门指南
学习·node.js
玫瑰花开一片一片2 小时前
Flutter IOS 真机 Widget 错误。Widget 安装后系统中没有
flutter·ios·widget·ios widget
绵绵细雨中的乡音2 小时前
Linux进程学习【基本认知】
linux·运维·学习
hepherd3 小时前
Flutter 环境搭建 (Android)
android·flutter·visual studio code
我的golang之路果然有问题4 小时前
快速了解redis,个人笔记
数据库·经验分享·redis·笔记·学习·缓存·内存