本文旨在記錄在學(xué)習(xí)和使用GetX過(guò)程中遇到的問(wèn)題和心得體會(huì)，如果有表達(dá)不正確的地方，歡迎下方留言指正????

使用：

首先需要引入包，不贅述了蛾绎，
其次在入口main.dart里面把MaterialApp換成GetMaterialApp

              return GetMaterialApp(
                debugShowCheckedModeBanner: false,
                translations: Messages(),
                //你的翻譯
                locale: const Locale('zh', 'CN'),
                //按照此處指定的語(yǔ)言翻譯
                fallbackLocale: const Locale('zh', 'CN'),
                //翻譯不存在的時(shí)候使用次語(yǔ)言
                title: 'XXX',
                theme: appTheme,
                builder: EasyLoading.init(),
                initialRoute: routerPage,
                defaultTransition: Transition.rightToLeft,
                //默認(rèn)跳轉(zhuǎn)動(dòng)畫(huà)
                getPages: RouterPage.routes,
              );

然后就能在項(xiàng)目中使用了。

首先是一些簡(jiǎn)單的使用：

彈框

//頂部彈框（toast）
Get.snackbar("Snackbar 標(biāo)題", "歡迎使用Snackbar");

//彈框
Get.defaultDialog();
//底部彈框
Get. BottomSheet();

路由管理

//路由跳轉(zhuǎn)
Get.to(Home());//通過(guò)定義的widget名稱來(lái)跳轉(zhuǎn)到指定頁(yè)面
Get.off();//跳轉(zhuǎn)到下個(gè)頁(yè)面鸦列，沒(méi)有返回按鈕
Get.offAll();//跳轉(zhuǎn)到下個(gè)頁(yè)面租冠，移除所有的路由
Get.toNamed("/home");//通過(guò)路由名稱來(lái)跳轉(zhuǎn)到指定頁(yè)面
Get.offNamed("/home");//跳轉(zhuǎn)到下個(gè)頁(yè)面，沒(méi)有返回按鈕
Get.offAllNamed("/home"),//跳轉(zhuǎn)到下個(gè)頁(yè)面敛熬，移除所有的路由

//路由跳轉(zhuǎn)傳值
Get.toNamed('/home',arguments: {'id':'sdssfsfsf121214'}),
//在下個(gè)頁(yè)面接收傳過(guò)來(lái)的值
Get.arguments['id']

//路由返回到上個(gè)頁(yè)面肺稀，并作處理（比如添加數(shù)據(jù)之后第股，返回刷新頁(yè)面）
i:路由跳轉(zhuǎn)的時(shí)候应民，接收返回來(lái)的參數(shù)value，根據(jù)value做判斷
Get.toNamed('home')!.then((value) {
      if (value) {
       //刷新頁(yè)面
     }
});
ii:在路由返回的時(shí)候夕吻，傳參
Get.back(result: true);

Get.to和Get.toName的區(qū)別：
當(dāng)使用的binding的時(shí)候诲锹，如果使用Get.to會(huì)報(bào)錯(cuò)
The following message was thrown building Builder: "xxxController" not found. You need to call "Get.put(xxxController())" or "Get.lazyPut(()=>xxxController())"

判斷是否是手機(jī)號(hào)、郵箱涉馅。归园。

GetUtils.isEmail('xxx')
GetUtils.isPhoneNumber('xxx')
GetUtils.isDateTime('xxx')
GetUtils.isMD5('xxx')
...

其余API

//給出以前的路由名稱
Get.previousRoute

// 給出要訪問(wèn)的原始路由，例如稚矿，rawRoute.isFirst()
Get.rawRoute

// 允許從GetObserver訪問(wèn)Rounting API庸诱。
Get.routing

// 檢查 snackbar 是否打開(kāi)
Get.isSnackbarOpen

// 檢查 dialog 是否打開(kāi)
Get.isDialogOpen

// 檢查 bottomsheet 是否打開(kāi)
Get.isBottomSheetOpen

// 刪除一個(gè)路由捻浦。
Get.removeRoute()

//反復(fù)返回，直到表達(dá)式返回真桥爽。
Get.until()

// 轉(zhuǎn)到下一條路由朱灿，并刪除所有之前的路由，直到表達(dá)式返回true钠四。
Get.offUntil()

// 轉(zhuǎn)到下一個(gè)命名的路由盗扒，并刪除所有之前的路由，直到表達(dá)式返回true缀去。
Get.offNamedUntil()

//檢查應(yīng)用程序在哪個(gè)平臺(tái)上運(yùn)行侣灶。
GetPlatform.isAndroid
GetPlatform.isIOS
GetPlatform.isMacOS
GetPlatform.isWindows
GetPlatform.isLinux
GetPlatform.isFuchsia

//檢查設(shè)備類型
GetPlatform.isMobile
GetPlatform.isDesktop
//所有平臺(tái)都是獨(dú)立支持web的!
//你可以知道你是否在瀏覽器內(nèi)運(yùn)行。
//在Windows缕碎、iOS褥影、OSX、Android等系統(tǒng)上咏雌。
GetPlatform.isWeb


// 相當(dāng)于.MediaQuery.of(context).size.height,
//但不可改變伪阶。
Get.height
Get.width

// 提供當(dāng)前上下文。
Get.context

// 在你的代碼中的任何地方处嫌，在前臺(tái)提供 snackbar/dialog/bottomsheet 的上下文栅贴。
Get.contextOverlay

// 注意：以下方法是對(duì)上下文的擴(kuò)展。
// 因?yàn)樵谀愕腢I的任何地方都可以訪問(wèn)上下文熏迹，你可以在UI代碼的任何地方使用它檐薯。

// 如果你需要一個(gè)可改變的高度/寬度（如桌面或?yàn)g覽器窗口可以縮放），你將需要使用上下文注暗。
context.width
context.height

// 讓您可以定義一半的頁(yè)面坛缕、三分之一的頁(yè)面等。
// 對(duì)響應(yīng)式應(yīng)用很有用捆昏。
// 參數(shù)： dividedBy (double) 可選 - 默認(rèn)值：1
// 參數(shù)： reducedBy (double) 可選 - 默認(rèn)值：0赚楚。
context.heightTransformer()
context.widthTransformer()

/// 類似于 MediaQuery.of(context).size。
context.mediaQuerySize()

/// 類似于 MediaQuery.of(context).padding骗卜。
context.mediaQueryPadding()

/// 類似于 MediaQuery.of(context).viewPadding宠页。
context.mediaQueryViewPadding()

/// 類似于 MediaQuery.of(context).viewInsets。
context.mediaQueryViewInsets()

/// 類似于 MediaQuery.of(context).orientation;
context.orientation()

///檢查設(shè)備是否處于橫向模式
context.isLandscape()

///檢查設(shè)備是否處于縱向模式寇仓。
context.isPortrait()

///類似于MediaQuery.of(context).devicePixelRatio举户。
context.devicePixelRatio()

///類似于MediaQuery.of(context).textScaleFactor。
context.textScaleFactor()

///查詢?cè)O(shè)備最短邊遍烦。
context.mediaQueryShortestSide()

///如果寬度大于800俭嘁，則為真。
context.showNavbar()

///如果最短邊小于600p服猪，則為真供填。
context.isPhone()

///如果最短邊大于600p拐云，則為真。
context.isSmallTablet()

///如果最短邊大于720p近她，則為真慨丐。
context.isLargeTablet()

///如果當(dāng)前設(shè)備是平板電腦，則為真
context.isTablet()

///根據(jù)頁(yè)面大小返回一個(gè)值<T>泄私。
///可以給值為：
///watch：如果最短邊小于300
///mobile：如果最短邊小于600
///tablet：如果最短邊（shortestSide）小于1200
///desktop：如果寬度大于1200
context.responsiveValue<T>()

其次--狀態(tài)管理：

Getx有兩種狀態(tài)管理：簡(jiǎn)單狀態(tài)管理GetBuilder房揭、響應(yīng)式狀態(tài)管理器GetX/Obx
1、在定義變量的時(shí)候晌端，加上.obs

var name = 'Jonatas Borges'.obs;

2捅暴、在 UI 中，當(dāng)您想要顯示該值并在值更改時(shí)更新屏幕時(shí)咧纠，用Obx包裹控件蓬痒，如下：

Obx(() => Text("$name"));

3、賦值的時(shí)候

name.value = 'Jack';

上面這種我們可以稱之為局部刷新漆羔，就是當(dāng)name的值改變了梧奢，只會(huì)刷新Text組件，不會(huì)刷新整個(gè)頁(yè)面的UI演痒，
使用GetBuilder是刷新整個(gè)頁(yè)面亲轨，適合在列表頁(yè)面使用

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('maintain_record'.tr)),
      body: GetBuilder(
        builder: (_) {
          return const Padding(
            padding: EdgeInsets.all(10.0),
            child: Column(
              children: [
              ],
            ),
          );
        }
      ),
    );
  }

依賴注入-Controller的使用，我感覺(jué)能叫他全局狀態(tài)管理

比如我有兩個(gè)頁(yè)面鸟顺，兩個(gè)頁(yè)面都有個(gè)Text的組件顯示count的值惦蚊，在兩個(gè)頁(yè)面分別修改了count的值，兩個(gè)頁(yè)面都會(huì)跟著改變讯嫂，效果如下

gif.gif

可以看到蹦锋，在兩個(gè)頁(yè)面分別操作count的值，兩邊顯示都是一樣的
實(shí)現(xiàn):
在class_room_page.dart中定義一個(gè)Text和button

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

class ClassRoomPage extends StatelessWidget {
  const ClassRoomPage({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = Get.put<ClassRoomController>(ClassRoomController());
    return Container(
      alignment: const Alignment(0, 0),
      child: SizedBox(
        width: Get.width,
        height: 300,
        child: Column(
          children: [
            Obx(() => Text('count的值：${controller.count}')),
            TextButton(
              onPressed: () {
                controller.increment();
              },
              child: const Text('count +1'),
            ),
          ],
        ),
      ),
    );
  }
}

同意在store_page.dart中

import 'package:firstapp/pages/class_room/class_room_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class StorePage extends StatelessWidget {
  const StorePage({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = Get.find<ClassRoomController>();
    return Container(
      alignment: const Alignment(0, 0),
      child: SizedBox(
        width: Get.width,
        height: 300,
        child: Column(
          children: [
            Obx(() => Text('count的值：${controller.count}')),
            TextButton(
              onPressed: () {
                controller.decrement();
              },
              child: const Text('count -1'),
            ),
          ],
        ),
      ),
    );
  }
}

然后定一個(gè)一個(gè)Controller---class_room_controller.dart

import 'package:get/get.dart';

class ClassRoomController extends GetxController {
  var count = 0.obs;

  void increment() {
    count++;
  }

  void decrement() {
    count--;
  }
}

里面有兩個(gè)方法和一個(gè)變量欧芽，Controller必須要put一次莉掂，然后在別的地方使用的時(shí)候用find,我們一般是使用binding來(lái)管理Controller，所以修改一下項(xiàng)目結(jié)構(gòu)千扔，新增一個(gè)binding憎妙，
all_controller_binding.dart

import 'package:firstapp/pages/class_room/class_room_controller.dart';
import 'package:get/get.dart';

class AllBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<ClassRoomController>(() => ClassRoomController());
  }
}

然后再路由中注入binding

GetPage(
      name: '/tab',
      page: () => const TabBarPage(),
      binding: AllBinding(),
    ),

然后把class_room_page.dart中final controller = Get.put<ClassRoomController>(ClassRoomController());換成final controller = Get.find<ClassRoomController>();
但是要注意，在哪個(gè)頁(yè)面使用binding的時(shí)候昏鹃，在路由跳轉(zhuǎn)到這個(gè)頁(yè)面的時(shí)候尚氛，一定要用Get.toName,

國(guó)際化

image.png

其中message.dart里面都是對(duì)照的翻譯

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'zh_CN': {
          //登錄
          'email': '郵箱',
          'hint_email': '請(qǐng)輸入郵箱',
          'hint_email_text': '請(qǐng)輸入正確的郵箱',
        },
        'en_US': {
          // Login
          'email': 'Email',
          'hint_email': 'Please enter your email',
          'hint_email_text': 'Please enter the correct email address',
        }
      };
}

使用的時(shí)候，用Text('email'.tr);

用Get實(shí)現(xiàn)MVC布局

所有的頁(yè)面布局都在view中實(shí)現(xiàn)洞渤，數(shù)據(jù)處理在Controller里面實(shí)現(xiàn)，view繼承的是GetView属瓣，在布局中不再使用StatefulWidget
如下圖：

image.png

view里面的代碼

class MyView extends GetView<MyController> {
  const MyView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MVC'),
      ),
      body: GetBuilder<MyController>(
        builder: (_) {
          return ListView.builder(
            itemCount: controller.dataList.length,
            itemExtent: 50,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${controller.dataList[index].name}'),
              );
            },
          );
        },
      ),
    );
  }
}

Controller里面的代碼

class MyController extends GetxController {
  final List<ListModel> dataList = <ListModel>[].obs;
  @override
  void onReady() {
    _getData(); //獲取數(shù)據(jù)
    super.onReady();
  }

  Future<void> _getData() async {
    String jsonData = await loadJsonData();
    Map<String, dynamic> data = json.decode(jsonData);
    dataList.clear();
    dataList.addAll(
        data['data'].map<ListModel>((e) => ListModel.fromJson(e)).toList());
    update();
  }
}

Future<String> loadJsonData() async {
  return await rootBundle.loadString('assets/json/list.json');
}

寫(xiě)了個(gè)簡(jiǎn)單的demo载迄，可以down下來(lái)看看讯柔，Demo傳送門(mén)

后續(xù)繼續(xù)更新...