52Flutter 国际化

最新推荐文章于 2024-04-18 22:36:35 发布
最新推荐文章于 2024-04-18 22:36:35 发布
阅读量892 收藏 1
点赞数
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LJLThomson/article/details/117027056
版权

Flutter 国际化

1.介绍

App内可能会使用不同的语言，进行国际化是有必要的， 而且是开发时就应该首先准备的，等到后期维护阶段在进行国际化，会非常麻烦，建议在开发时就准备国际化，方便后期维护

2.使用

依赖：

  flutter_localizations:
    sdk: flutter
  flutter_cupertino_localizations: ^1.0.1 //适配IOS
1.自定义LocalizationsDelegate
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_first/day56Language/day3/MyLocations.dart';


class MyLocationDelegate extends LocalizationsDelegate<MyLocations> {

  // 1.
  static MyLocationDelegate delegate = MyLocationDelegate();

  // 2.
  @override
  bool isSupported(Locale locale) {
    return ["en", "zh"].contains(locale.languageCode);
  }

  // 3
  @override
  Future<MyLocations> load(Locale locale) async {
    return SynchronousFuture(MyLocations(locale));
  }

  // 4
  @override
  bool shouldReload(MyLocationDelegate old) {
    return false;
  }
}
  • isSupported：用于当前环境的Locale，是否在我们支持的语言范围
  • shouldReload：当Localizations Widget重新build时，是否调用load方法重新加载Locale资源
    • 一般情况下，Locale资源只应该在Locale切换时加载一次，不需要每次Localizations重新build时都加载一遍；
    • 所以一般情况下返回false即可；
  • load方法：当Locale发生改变时（语言环境），加载对应的HYLocalizations资源
    • 这个方法返回的是一个Future，因为有可能是异步加载的；
    • 但是我们这里是直接定义的一个Map，因此可以直接返回一个同步的
2.定义资源
import 'package:flutter/material.dart';

class MyLocations {
  final Locale locale;

  MyLocations(this.locale);

  static Map<String, Map<String, String>> _localizedValues = {
    "en": {
      "title": "home",
      "greet": "hello~",
    },
    "zh": {
      "title": "首页",
      "greet": "你好~",
    }
  };

  String get title {
    return _localizedValues[locale.languageCode]["title"];
  }

  String get greet {
    return _localizedValues[locale.languageCode]["greet"];
  }
}
3.设置MaterialApp
1.localizationsDelegates

指定哪些Widget需要进行国际化

  • 用于生产本地化值集合的工厂
  • 我们这里指定了Material、Widgets、Cupertino都使用国际化
localizationsDelegates: [
    GlobalMaterialLocalizations.delegate, // 指定本地化的字符串和一些其他的值
    GlobalCupertinoLocalizations.delegate, // 对应的Cupertino风格
    GlobalWidgetsLocalizations.delegate, // 指定默认的文本排列方向, 由左到右或由右到左
    
    //1.注意，一定要添加自己的国际化
    MyLocationDelegate.delegate
  ],
2.如果要指定语言代码、文字代码和国家代码,支持的
      supportedLocales: [
        const Locale.fromSubtags(languageCode: 'en'),
        const Locale.fromSubtags(languageCode: 'zh'),
      ],
3.显示
Localizations.of(context, MyLocations).title

稍微封装一下

  static MyLocations of(BuildContext context) {
    return Localizations.of(context, MyLocations);
  }

代码如下

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


import 'package:flutter/cupertino.dart';

import 'MyAppLocationDelegate.dart';
import 'MyLocations.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate, // 指定本地化的字符串和一些其他的值
        GlobalCupertinoLocalizations.delegate, // 对应的Cupertino风格
        GlobalWidgetsLocalizations.delegate, // 指定默认的文本排列方向, 由左到右或由右到左
        MyLocationDelegate.delegate
      ],
      locale: Locale("en"),
      // supportedLocales: [Locale("en"), Locale("zh")],
      supportedLocales: [
        const Locale.fromSubtags(languageCode: 'en'),
        const Locale.fromSubtags(languageCode: 'zh'),
      ],
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: LanguageView(),
      ),
    );
  }
}
class LanguageView extends StatefulWidget {
  LanguageView({Key key}) : super(key: key);

  @override
  _LanguageViewState createState() {
    return _LanguageViewState();
  }
}

class _LanguageViewState extends State<LanguageView> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(MyLocationDelegate.of(context).title),
    );
  }
}

3.异步加载数据

import 'dart:convert';

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

class AppLocalizations {

  // 1
  final Locale locale;

  AppLocalizations(this.locale);

  // 2
  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  static Map<String, Map<String, String>> _localizedStrings = {};

  // 3 异步加载数据
  Future loadJson() async {
    final jsonString = await rootBundle.loadString("assets/json/i18n.json");
    Map<String, dynamic> map = json.decode(jsonString);
    _localizedStrings = map.map((key, value) => MapEntry(key, value.cast<String, String>()));
  }

  // 4
  String get title => _localizedStrings[this.locale.languageCode]["title"];

  String get button => _localizedStrings[this.locale.languageCode]["button"];

  String get drawerTip =>
      _localizedStrings[this.locale.languageCode]["drawer_tip"];

  String get closeDrawer =>
      _localizedStrings[this.locale.languageCode]["close_drawer"];

}

在自定义的LocalizationsDelegate中

  // 3
  @override
  Future<AppLocalizations> load(Locale locale) async {
    final appLocalizations = AppLocalizations(locale);
    await appLocalizations.loadJson();
    return appLocalizations;
  }

4.国际化

1.下载插件Flutter Intl

2.配置文件（为整个项目）

image-20200819233727693

会在 pubspec.yaml中增加以下字段**

flutter_intl:  
    enabled: true

会在lib目录下增加 generated 和 l10n两个包

generated包下的intl包默认存在一个messages_all.dart和messages_en.dart文件，messages开头的文件会在添加语言后自动生成
l10n包下存在一个intl_en.arb文件

3.使用Add Locale生成其他语言的arb文件

image-20200819234431082

例如:zh_CN , 会在l10n包下生成Intl_zh_CN.arb文件 , 可在其中填入对应的文案.

4.在MaterialApp中配置

 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      localizationsDelegates: const [
        S.delegate, //记得这个一定要写
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,
      localeListResolutionCallback: (locales, supportedLocales) {
        print(locales);
        return;
      },
      locale: Locale('zh','TW'),
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: LanguageView(),
      ),
    );
  }

5.使用

    child: Text(S.of(context).title),

注意：

  1. 假设系统语言为zh_TW , 项目并不支持,会优先寻找zh的其他语言 , 以supportedLocales顺序从上向下寻找.
  2. 支持语言的顺序为字符串排序 (如zh_A会在zh_B之前) , 并非添加语言的顺序.

完整代码：

import 'package:flutter/material.dart';
import 'package:flutter_first/generated/l10n.dart';
import 'package:get/get.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GetMaterialApp(
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,
        ///当传入的是不支持的语种，可以根据这个回调，返回相近,并且支持的语种
        localeResolutionCallback: (local, support) {
          ///当前软件支行的语言 也就是[supportedLocales] 中配制的语种
          if (support.contains(local)) {
            print('support  $local');
            return local;
          }
          ///如果当前软件运行的手机环境不在 [supportedLocales] 中配制的语种范围内
          ///返回一种默认的语言环境，这里使用的是中文
          print('no_support local is $local and support is $support');
          return const Locale('zh', 'CN');
        },
      locale: Locale('zh', 'TW'),
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: LanguageView(),
      ),
    );
  }
}

class LanguageView extends StatefulWidget {
  LanguageView({Key key}) : super(key: key);

  @override
  _LanguageViewState createState() {
    return _LanguageViewState();
  }
}

class _LanguageViewState extends State<LanguageView> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(S.of(context).title),
    );
  }
}

————————localeListResolutionCallback可以不用写，intl自由规则识别，写了反而不好

5.使用Get切换语言

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Column(
        children: [
          OutlinedButton(onPressed: (){
            var locale = Locale.fromSubtags(languageCode: 'en', countryCode: 'US2');
            Get.updateLocale(locale);
          }, child: Text('点击')),
          Text(S.of(context).title)
        ],
      ),
    );
  }

6.使用Provider切换

if (i != null) {
       if (i == 1) {
            Provider.of<CurrentLocale>(context, listen: false)
                 .setLocale(const Locale('zh', "CH"));
      } else {
            Provider.of<CurrentLocale>(context, listen: false)
                 .setLocale(const Locale('en', "US"));
      }
 }
LJLThomson
关注
专栏目录
Flutter 国际化demo
02-14
该Demo 手把手教你实现flutter 国际化，语言切换，demo包括，中文，日文，英文和系统默认语言设置切换，加速你的开发！
Flutter实现国际化（多语言）
最新发布
qq_52871405的博客
09-20 2049
Flutter 提供了强大的国际化（i18n）支持，可以通过 flutter_localizations 与 gen-l10n 工具生成的本地化类来实现不同区域和语言的适配。本篇博客将介绍如何在 Flutter 项目中使用 flutter_localizations，并实现多语言支持与动态切换。它包含了将软件中的文本、日期、时间等元素抽象出来，以便根据用户的区域设置进行翻译和显示。是国际化的具体应用步骤，它包括将应用程序的语言、日期格式、货币符号等内容适配到特定地区。
实用的 Flutter 国际化指南
weixin_34015336的博客
02-20 519
作为一个 Android 开发者，Flutter 上来就让我把各类字符串写在 widget 里，其实我心里是拒绝的。硬编码是不可能硬编码的。国际化又不会，就是只能去看看文档，才能学点新姿势这样子。看了文档之后，觉得国际化这部分，还是有点麻烦的，我觉得有必要拎出来单独写写。 个人希望能把应用的字符串资源独立出来，以方便管理。至于支持多语言这种，反而是顺带完成的结果。本文以实用优先，因为我认为这部分内...
Flutter开发之——国际化支持(1)
2401_84121827的博客
04-05 675
我一直以来都有整理练习大厂面试题的习惯，有随时跳出舒服圈的准备，也许求职者已经很满意现在的工作，薪酬，觉得习惯而且安逸。不过如果公司突然倒闭，或者部门被裁减，还能找到这样或者更好的工作吗？我建议各位，多刷刷面试题，知道最新的技术，每三个月可以去面试一两家公司，因为你已经有不错的工作了，所以可以带着轻松的心态去面试，同时也可以增加面试的经验。我可以将最近整理的一线互联网公司面试真题+解析分享给大家，大概花了三个月的时间整理2246页，帮助大家学习进步。
Flutter适配国际化
天马行空的专栏
02-06 1753
Flutter、Golang、Python、编译原理、算法、Chrome原理学习系列文章抢先看请关注【码农帮派】： 在Flutter中，为了实现文本的国际化，我们需要完成三步： 首先，实现一个LocalizationsDelegate（翻译代理），将所有需要翻译的文案声明为它的属性； 然后，为所有需要支持语言的地区进行手动的文案翻译； 最后，在应用的Mater...
【Flutter -- 进阶】国际化
Kevin Learn Android
07-25 1317
一个 app 中使用国际化已经很普遍的操作了，如果应用可能会给另一种语言的用户(美国，英国)使用，他们看不懂中文，那这时候就要提供国际化功能，使应用的语言切到英文环境下。
Flutter完整开发实战详解(四、 Redux、主题、国际化) _ 掘金技术征文
2301_79835671的博客
03-24 812
如果你觉得这些内容对你有帮助，可以扫码领取！！！！
flutter-internationalization：使用JSON文件进行Flutter国际化
02-04
Flutter国际化示例 在此示例中，Flutter可以通过使用json文件进行国际化。 这是Flutter的基本国际化示例。 教程中此示例项目。 预习 入门 您可以按照以下说明启动示例国际化应用程序并将其安装到设备上。 先决条件 ...
Flutter 日期时间DatePicker控件及国际化
08-19
本文将详细介绍如何使用Flutter的日期时间功能，包括`showDatePicker`的基本用法、日期限制、自定义样式以及国际化支持。 首先，我们来看`showDatePicker`的基本使用。当需要展示日期选择器时，可以调用`...
Flutter 国际化适配
xiangzhihong8的专栏
03-09 1081
借助App Store与Google Play，全世界任何一个国家的使用者都可以使用我们开发的应用，不过由于应用的使用者来自不同国家，所以在应用正式上架之前需要让应用能够支持多种语言，即应用的国际化。 在Flutter开发中，应用的国际化主要涉及语言和地区差异性配置两个方面，它们是应用程序的组成部分之一。关于语言的国际化比较好理解，而地区差异性配置指的是根据国家风俗的不同进行的差异性配置。按照Fl...
flutter国际化
10-19
标题“flutter国际化”表明我们要讨论的是如何在Flutter应用中实现多语言支持。Flutter提供了一套完善的国际化机制，允许开发者轻松地添加和管理不同语言的文本资源。 描述中提到，实现Flutter应用的国际化可以借助...
Flutter 中文文档：Flutter 应用里的国际化
Flutter 社区
10-29 4575
你将学习到如何去获取设备的语言环境（用户首选的语言）。如何去管理特定语言环境下的 app 值。如何去定义 app 支持的语言环境。如果你的 app 会部署给说其他语言的用...
【Flutter】多语言方案一：flutter_localizations 与 GetX 配合版
brave的博客
04-18 2870
多语言方案：flutter_localizations 与 GetX 配合版，好处：命令行生成多语言字符串的引用常量类，缺点：切换语言以后，主界面需要触发setState，重绘将最新的Locale数据设置给GetMaterialApp。
flutter 国际化（组件英文转中文）
qq_36071410的博客
03-12 5712
ios 必须： 然后: MaterialApp中 增加如下代码： localizationsDelegates: [ ChineseCupertinoLocalizations.delegate, // 这里加上这个,是自定义的delegate DefaultCupertinoLocalizations.delegate, // 这个截止目前只包含英文 GlobalMaterialLocaliz...
FLUTTER学习笔记--多语言
VaIOReTto1的博客
01-14 318
Flutter学习笔记的一部分，主要用于个人记忆和复习，在代码和编辑习惯上也倾向于本人特点，主要专注于能读性和简便性。
flutter配置多语言（学习记录）
nadia_ning的博客
06-08 702
1.file-setting-plugin 安装flutter intl
还记得第一个看到的Flutter组件吗？
老孟Flutter
03-21 1038
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 MaterialApp 在学习Flutter的过程中我们第一个看见的控件应该就是MaterialApp，毕竟创建一个新的Flutter项目的时候，项目第一个组件就是MaterialApp，这是一个Material风格的根控件，基本用法如下： Ma...
flutter解决方案：支持动态多语言资源
csfchh的博客
03-29 4220
通常对于一个flutter组件来说，其多语言支持有两种情况：一是仅支持中文不支持多语言，二是多语言仅支持英文。当涉及到组件需要提供给海外业务使用时，就不能满足需求了，但我们在编码时就在组件提供所有语言资源是不现实的，理想情况是像原生一样支持在打包时通过添加多语言资源文件的方式，在不修改组件代码的前提下增加多更多语种的支持。本文提供了一种实现方案，介绍如下。
Flutter国际化实战：使用intl跨平台开发
资源摘要信息:"跨平台开发+Flutter+intl+国际化" 在现代软件开发中，随着互联网技术的迅速发展，越来越多的应用需要支持多语言环境，以满足全球化用户的需求。在众多的移动应用开发框架中，Flutter因其高效的性能和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值