Flutter GetX系列教程---國際化配置飞蛹、依賴注入谤狡、Binding

國際化配置

在我們使用系統(tǒng)自帶MaterialApp來實現(xiàn)國際化配置,需要進行很多配置卧檐,而且還需要手動去依賴第三方組件墓懂,而使用GetX來實現(xiàn)國際化配置,你只需要一行代碼即可實現(xiàn)切換霉囚,接下來我們看一下具體實現(xiàn)捕仔。

視頻教程地址

零基礎視頻教程地址

第一步:應用程序入口配置

  • translations: 國際化配置文件
  • locale: 設置默認語言,不設置的話為系統(tǒng)當前語言
  • fallbackLocale: 配置錯誤的情況下,使用的語言
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/InternationalizationExample/InternationalizationExample.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// 國際化配置
    return GetMaterialApp(
      title: "GetX",
      translations: Messages(),
      locale: Locale('zh', 'CN'), //設置默認語言
      fallbackLocale: Locale("zh", "CN"), // 在配置錯誤的情況下,使用的語言
      home: InternationalizationExample(),
    );
  }
}

第二步:創(chuàng)建國際化類

需要繼承自Translations并重寫keys方法盈罐。

import 'package:get/get.dart';

class Messages extends Translations {

  @override
  // TODO: implement keys
  Map<String, Map<String, String>> get keys => {
    'zh_CN': {
      'hello': "你好, 世界"
    },
    'en_US': {
      'hello': 'hello world'
    }
  };
}

第三步:創(chuàng)建控制器類榜跌,用于切換語言

import 'dart:ui';
import 'package:get/get.dart';

class MessagesController extends GetxController {

  void changeLanguage(String languageCode, String  countryCode) {
    var locale = Locale(languageCode, countryCode);
    Get.updateLocale(locale);
  }
}

第四步:實例化控制器并使用


import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXControllerWorkersExample/WorkersConroller.dart';
import 'package:flutter_getx_example/InternationalizationExample/MessagesCnotroller.dart';
import 'package:get/get.dart';

class InternationalizationExample extends StatelessWidget {

  MessagesController messagesController = Get.put(MessagesController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Internationalization"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('hello'.tr, style: TextStyle(color: Colors.pink, fontSize: 30)),
            ElevatedButton(
              onPressed: () => messagesController.changeLanguage('zh', "CN"),
              child: Text("切換到中文")
            ),
            SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () => messagesController.changeLanguage('en', "US"),
              child: Text("切換到英文")
            ),
          ],
        ),
      ),
    );
  }
}

效果展示

image

依賴注入

在前面的文章中,我們經(jīng)常使用Get.put(MyController())來進行控制器實例的創(chuàng)建盅粪,這樣我們就算不使用控制器實例也會被創(chuàng)建钓葫,其實GetX還提供很多創(chuàng)建實例的方法,可根據(jù)不同的業(yè)務來進行創(chuàng)建票顾,接下來我們簡單介紹一下幾個最常用的

  • Get.put(): 不使用控制器實例也會被創(chuàng)建
  • Get.lazyPut(): 懶加載方式創(chuàng)建實例础浮,只有在使用時才創(chuàng)建
  • Get.putAsync<T>(): Get.put()的異步版版本
  • Get.create<T>(): 每次使用都會創(chuàng)建一個新的實例

我們來看一下代碼演示

第一步:應用程序入口配置

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/DependecyInjectionExample/DependecyInjectionExample.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: DependecyInjectionExample(),
    );
  }
}

第二步:創(chuàng)建控制器

import 'package:flutter_getx_example/ObxCustomClassExample/Teacher.dart';
import 'package:get/get.dart';

class MyController extends GetxController {
  var teacher = Teacher();
  
  void convertToUpperCase() {
     teacher.name.value = teacher.name.value.toUpperCase();
  }
}

第三步:實例化控制器并使用


import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXControllerExample/MyController.dart';
import 'package:get/get.dart';

class DependecyInjectionExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    // 即使不使用控制器實例也會被創(chuàng)建
    // tag將用于查找具有標簽名稱的實例
    // 控制器在不使用時被處理帆调,但如果永久為真,則實例將在整個應用程序中保持活動狀態(tài)
    MyController myController = Get.put(MyController(), permanent: true);
    // MyController myController = Get.put(MyController(), tag: "instancel", permanent: true);

    // 實例將在使用時創(chuàng)建
    // 它類似于'permanent'豆同,區(qū)別在于實例在不被使用時被丟棄
    // 但是當它再次需要使用時番刊,get 將重新創(chuàng)建實例
    // Get.lazyPut(()=> MyController());
    // Get.lazyPut(()=> MyController(), tag: "instancel");

    // Get.put 異步版本
    // Get.putAsync<MyController>(() async  => await MyController());

    // 每次都將返回一個新的實例
    // Get.create<MyController>(() => MyController());

    return Scaffold(
      appBar: AppBar(
        title: Text("GetXController"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 實例使用的tag創(chuàng)建
                // Get.find<MyController>(tag: 'instancel');

                Get.find<MyController>();
              },
              child: Text("別點我"))
          ],
        ),
      ),
    );
  }
}

Get Service

這個類就像一個 GetxController,它共享相同的生命周期onInit()诱告、onReady()撵枢、onClose()。 但里面沒有 "邏輯"精居。它只是通知GetX的依賴注入系統(tǒng)锄禽,這個子類不能從內(nèi)存中刪除。所以如果你需要在你的應用程序的生命周期內(nèi)對一個類實例進行絕對的持久化靴姿,那么就可以使用GetxService沃但。

第一步:創(chuàng)建Service

import 'package:get/get.dart';
import 'package:shared_preferences/shared_preferences.dart';

class Service extends GetxService {

  Future<void> getCounter() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    int count = (prefs.getInt("counter") ?? 0) + 1;
    print("count 的值為: $count");
    await prefs.setInt("counter", count);
  }
}

第二步:初始化Service

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXServiceExample/GetXServiceExample.dart';
import 'package:flutter_getx_example/GetXServiceExample/Service.dart';
import 'package:get/get.dart';

/// 初始化服務
Future<void> main() async {
  await initServices();
  runApp(MyApp());
}

Future<void> initServices() async {
  print("初始化服務");
  await Get.putAsync(() async => await Service());
  print("所有服務啟動");
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: GetXServiceExample(),
    );
  }
}

第三步:調(diào)用Service


import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXServiceExample/Service.dart';
import 'package:get/get.dart';

class GetXServiceExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Service"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Get.find<Service>().getCounter();
              },
              child: Text("點我加1"))
          ],
        ),
      ),
    );
  }
}

GetX Binding

在我們使用GetX狀態(tài)管理器的時候,往往每次都是用需要手動實例化一個控制器佛吓,這樣的話基本頁面都需要實例化一次宵晚,這樣就太麻煩了,而Binding 能解決上述問題维雇,可以在項目初始化時把所有需要進行狀態(tài)管理的控制器進行統(tǒng)一初始化淤刃,接下來看代碼演示:

第一步:聲明需要進行的綁定控制器類


import 'package:flutter_getx_example/GetXBindingExample/controller/BindingHomeController.dart';
import 'package:flutter_getx_example/GetXBindingExample/controller/BindingMyController.dart';
import 'package:get/get.dart';

class AllControllerBinding implements Bindings {
  
  @override
  void dependencies() {
    // TODO: implement dependencies
    Get.lazyPut<BindingMyController>(() => BindingMyController());
    Get.lazyPut<BindingHomeController>(() => BindingHomeController());
  }
}



import 'package:get/get.dart';

class BindingHomeController extends GetxController {
  var count = 0.obs;
  void increment() {
    count++;
  }
}


import 'package:get/get.dart';

class BindingMyController extends GetxController {
  var count = 0.obs;
  void increment() {
    count++;
  }
}

第二步:在項目啟動時進行初始化綁定

綁定的方式有多種,在不同的情況下有不同的使用方式吱型,這里介紹一種逸贾,如果需要更加詳細的介紹,觀看視頻將會是最佳的選擇津滞。

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXBindingExample/binding/AllControllerBinding.dart';
import 'package:flutter_getx_example/GetXBindingExample/GetXBindingExample.dart';
import 'package:get/get.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// GetX Binding
    return GetMaterialApp(
      title: "GetX",
      initialBinding: AllControllerBinding(),
      home: GetXBindingExample(),
    );
  }
}

第三步:在頁面中使用狀態(tài)管理器


import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXBindingExample/BHome.dart';
import 'package:flutter_getx_example/GetXBindingExample/binding/BHomeControllerBinding.dart';
import 'package:flutter_getx_example/GetXBindingExample/controller/BindingMyController.dart';
import 'package:get/get.dart';

class GetXBindingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetXBinding"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() => Text(
              "計數(shù)器的值為 ${Get.find<BindingMyController>().count}",
              style: TextStyle(color: Colors.red, fontSize: 30),
            )),
            SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                Get.find<BindingMyController>().increment();
              },
              child: Text("點擊加1")
            ),
            SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                Get.to(BHome());

                // Get.toNamed("/bHome");

                // Get.to(BHome(), binding: BHomeControllerBinding());
              },
              child: Text("跳轉(zhuǎn)去首頁")
            ),
          ],
        ),
      ),
    );
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末铝侵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子触徐,更是在濱河造成了極大的恐慌咪鲜,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撞鹉,死亡現(xiàn)場離奇詭異疟丙,居然都是意外死亡,警方通過查閱死者的電腦和手機孔祸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門隆敢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人崔慧,你說我怎么就攤上這事拂蝎。” “怎么了惶室?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵温自,是天一觀的道長玄货。 經(jīng)常有香客問我,道長悼泌,這世上最難降的妖魔是什么松捉? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮馆里,結(jié)果婚禮上隘世,老公的妹妹穿的比我還像新娘。我一直安慰自己鸠踪,他們只是感情好丙者,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著营密,像睡著了一般械媒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上评汰,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天纷捞,我揣著相機與錄音,去河邊找鬼被去。 笑死主儡,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的惨缆。 我是一名探鬼主播缀辩,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼踪央!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起瓢阴,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤畅蹂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后荣恐,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體液斜,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年叠穆,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡危尿,死狀恐怖寿弱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情嚷硫,我是刑警寧澤检访,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布始鱼,位于F島的核電站,受9級特大地震影響脆贵,放射性物質(zhì)發(fā)生泄漏医清。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一卖氨、第九天 我趴在偏房一處隱蔽的房頂上張望会烙。 院中可真熱鬧,春花似錦筒捺、人聲如沸柏腻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽葫盼。三九已至,卻和暖如春村斟,著一層夾襖步出監(jiān)牢的瞬間贫导,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工蟆盹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孩灯,地道東北人。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓逾滥,卻偏偏與公主長得像峰档,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子寨昙,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容