flutter getx系列之国际化(多语言切换)

直接进入正题,我们来看最终效果


999.gif

第一步,在pubspec.yaml文件中,导入getx库,如下图


image.png
get: ^4.3.8

右上角,点击一下Pub get,这样库的依赖包就下载到本地工程了,

第二步,引入头文件,

import 'package:get/get.dart';

第三步,在入口函数main里面进行配置,如下图


image.png

第四步,新建一个Messages类继承自Translations,如下

image.png

import 'package:get/get.dart';

class Messages extends Translations {
  @override
  Map> get keys => {
    'en_US': {
      'title': 'SEG-X5 Configuration',
      'prepare':'Before start',
      'tip1': '1. Power the gateway on and connect it to Ethernet cable.',
      'tip2':'2. Please make sure your phone(or pc) and the gateway are connected to the same router.',
      'tip3':'3. Press and hold both the ZigBee button and the Wi-Fi button for 5S until the buzzer beep twice quickly, and then release it to wait for the Internet indicator turn to orange always-on state and start the configuration.',
      'config':'Start configuration',
      'find_mac':'Scanned gateway mac: ',
      'connect_state':'Gateway connection state:',
      'config_state':'Gateway configuration state:',
      'connect_success':'Connect success',
      'config_success':'Config success',
      'scan_first':'Please scan the gateway first',
      'connect_first':'Please connect to the gateway first',

    },
    'zh_CN': {
      'title': 'X5网关配置工具',
      'prepare':'准备工作',
      'tip1':'1. 请将网关上电并插上网线。',
      'tip2':'2. 请确保客户端(pc, phone)和网关连接在同一个路由下。',
      'tip3':'3. 同时按住ZigBee键和Wi-Fi配网键5S,直到蜂鸣器快速嘀嘀2声后松开,等待互联网指示灯变橙灯常亮后开始扫描。',
      'config':'开始配置',
      'find_mac':'扫描到的网关mac: ',
      'connect_state':'网关连接状态:',
      'config_state':'网关配置状态:',
      'connect_success':'连接成功',
      'config_success':'配置成功',
      'scan_first':'请先扫描网关',
      'connect_first':'请先连接网关',
    }
  };
}

第五步,使用国际化“your word”.tr

image.png

第六步,切换多语言
如果是英文下,点击一下button切换为中文,如果是中文状态下,点击一下button切换为英文

image.png
 onPressed: () {
                if (_isChinese) {
                  Get.updateLocale(Locale("en", "US"));
                  _isChinese = false;
                } else {
                  Get.updateLocale(Locale("zh", "CN"));
                  _isChinese = true;
                }
              },

这样就能实现开篇所看到的最终效果了。是不是很方便呢

结尾

至此getx的国际化功能,基本完成,如果小伴们,觉得有点用的话,或者已经看到这里面来的请点个赞吧,下一篇我们来讨论一下,getx的状态管理功能。期待一下吧。好运~

你可能感兴趣的:(flutter getx系列之国际化(多语言切换))