Flutter开发之——getX-国际化(08)

最新推荐文章于 2025-03-17 22:52:04 发布

PGzxc

最新推荐文章于 2025-03-17 22:52:04 发布

阅读量3.9k

点赞数 3

分类专栏： Flutter 文章标签： flutter getX 国际化

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/124631850

版权

Flutter 专栏收录该内容

122 篇文章

订阅专栏

本文详细介绍了如何在Flutter应用中实现国际化，包括配置项目结构、使用Messages类管理多语言键值对、设置默认和备用语言，以及实际操作中如何通过按钮切换中英文显示。通过实例展示了如何在入口文件中集成Translation并演示了代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一国际化效果图

如下图所示，点击中文按钮显示中文；点击EN按钮显示英文，进行切换

国际化中文	国际化英文

二国际化步骤

2.1 项目结构图说明

本项目是在上文Flutter开发之——底部导航栏BottomNavigationBar的基础上进行修改，关于这方面的知识点，请查看上文，这里只对国际化的内容做如下说明：

Main：入口文件配置
string：Messages各种语言键值对中的键，方便复用和显示时引用
Messages：国际化语言配置，根据需要配置中文/英文/其他

2.2 项目代码

main

void main() => runApp(GetMaterialApp(
    translations: Messages(), //显示继承Translations，配置显示国际化内容
    locale: const Locale('zh', 'CN'),//默认展示本地语言
    fallbackLocale: const Locale('zh', 'CN'),//语言选择无效时，备用语言
    getPages: [
      GetPage(name: '/', page: () => IndexWidget(), binding: IndexBinding())
    ]));

说明：

在GetMaterialApp分别配置translations、locale、fallbackLocale三个选项
translations：显示继承Translations，配置显示国际化内容
locale：刚进入App时，默认显示语言
fallbackLocale：语言选择无效时，备用语言

string(国际化键值对和显示内容)

class I18nContent{

  static const String title="title";
  static const String BottomBarHome="home";
  static const String BottomBarTree="tree";
  static const String BottomBarNavi="navi";
  static const String BottomBarMe="me";

}

Messages

class Messages extends Translations{
  @override
  Map<String, Map<String, String>> get keys => {

    //1-配置中文简体
    'zh_CN':{
        I18nContent.title:"国际化",
        I18nContent.BottomBarHome:"首页",
        I18nContent.BottomBarTree:"分支",
        I18nContent.BottomBarNavi:"导航",
        I18nContent.BottomBarMe:"我",
    },
    //2-配置英文
    'en_US':{
      I18nContent.title:"I18n",
      I18nContent.BottomBarHome:"Home",
      I18nContent.BottomBarTree:"Tree",
      I18nContent.BottomBarNavi:"Navi",
      I18nContent.BottomBarMe:"Me",
    }
  };
}

2.3 中英文切换

界面显示内容(IndexWidget)

Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text(I18nContent.title.tr),
                    actions: <Widget>[
                      IconButton(icon:  Image.asset("images/zh.png"), onPressed: () {controller.changeZh();}),
                      IconButton(icon:  Image.asset("images/en.png"), onPressed: () {controller.changeEn();})
                ],),
     bottomNavigationBar: _buildBottomNavigationBar(),
     body: _buildPageView(),
   );
  }

界面切换逻辑(IndexController)

void changeEn() {
    var locale = Locale('en', 'US');
    Get.updateLocale(locale);
    Get.offAllNamed('/');
  }
 void changeZh(){
    var locale = Locale('zh', 'CN');
    Get.updateLocale(locale);
    Get.offAllNamed('/');
 }

说明：