直接進入正題，我們來看最終效果

999.gif

第一步，在pubspec.yaml文件中，導(dǎo)入getx庫，如下圖

image.png

get: ^4.3.8

右上角，點擊一下Pub get,這樣庫的依賴包就下載到本地工程了，

第二步，引入頭文件，

import 'package:get/get.dart';

第三步，在入口函數(shù)main里面進行配置，如下圖

image.png

第四步，新建一個Messages類繼承自Translations，如下

image.png

import 'package:get/get.dart';

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> 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網(wǎng)關(guān)配置工具',
      'prepare':'準備工作',
      'tip1':'1. 請將網(wǎng)關(guān)上電并插上網(wǎng)線。',
      'tip2':'2. 請確?？蛻舳耍╬c, phone）和網(wǎng)關(guān)連接在同一個路由下。',
      'tip3':'3. 同時按住ZigBee鍵和Wi-Fi配網(wǎng)鍵5S，直到蜂鳴器快速嘀嘀2聲后松開，等待互聯(lián)網(wǎng)指示燈變橙燈常亮后開始掃描。',
      'config':'開始配置',
      'find_mac':'掃描到的網(wǎng)關(guān)mac: ',
      'connect_state':'網(wǎng)關(guān)連接狀態(tài)：',
      'config_state':'網(wǎng)關(guān)配置狀態(tài)：',
      'connect_success':'連接成功',
      'config_success':'配置成功',
      'scan_first':'請先掃描網(wǎng)關(guān)',
      'connect_first':'請先連接網(wǎng)關(guān)',
    }
  };
}

第五步，使用國際化“your word”.tr

image.png

第六步，切換多語言
如果是英文下，點擊一下button切換為中文，如果是中文狀態(tài)下，點擊一下button切換為英文

image.png

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

這樣就能實現(xiàn)開篇所看到的最終效果了。是不是很方便呢

結(jié)尾

至此getx的國際化功能，基本完成，如果小伴們,覺得有點用的話，或者已經(jīng)看到這里面來的請點個贊吧，下一篇我們來討論一下，getx的狀態(tài)管理功能。期待一下吧。好運~