Flutter GetX的相關(guān)使用簡介

一、GetUtils

GetUtils是getx為我們提供一些常用的工具類庫，包括值是否為空、是否是數(shù)字、是否是視頻、圖片、音頻、PPT、Word、APK、郵箱、手機號碼、日期、MD5、SHA1等等。大大提升了我們的開發(fā)速度，使用情況如下：

 Padding(
              padding: EdgeInsets.all(10),
              child: ElevatedButton(
                child: Text("判斷是否是手機號"),
                onPressed: () async {
                  if (GetUtils.isPhoneNumber(textFieldController.text)) {
                    Get.snackbar("正確", "恭喜你, 完全正確", backgroundColor: Colors.greenAccent);
                  } else {
                    Get.snackbar(
                        "手機號錯誤",
                        "請輸入正確的手機號",
                        backgroundColor: Colors.pink
                    );
                  }
                },
              ),
            ),

總共有幾十個方法，使用的時候可以點進源碼查看。


image.png

二、GetView

個人理解，相當(dāng)于MVC的V，用于界面的展示以及處理。不同之處在于這個view要繼承自class GetViewAndGetWidgetExample extends GetView<GetViewCountController>，并在內(nèi)部獲取 Get.put(GetViewCountController());
1、主函數(shù)調(diào)用

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

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

2、GetViewCountController

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

3、GetViewAndGetWidgetExample繼承自GetView并使用狀態(tài)管理
只需要Get.put(GetViewCountController());初始化控制器，GetView內(nèi)部提供了controller的get屬性，我們直接可以通過controller獲取到GetViewCountController的屬性count，進而在組件上顯示。

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetViewAndGetWidgetExample/GetViewCountController.dart';
import 'package:get/get.dart';
class GetViewAndGetWidgetExample extends GetView<GetViewCountController> {
  @override
  Widget build(BuildContext context) {
    Get.put(GetViewCountController());
    //Get.create(() => GetViewCountController());  不同之處在這里

    return Scaffold(
      appBar: AppBar(
        title: Text("GetX GetView"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() => Text(
              "count的值為:  ${controller?.count}",
              style: TextStyle(
                color: Colors.red,
                fontSize: 30
              ),
            )),
            SizedBox(height: 20,),
            ElevatedButton(
                onPressed: () {
                  controller.increment();
                },
                child: Text("點我加1"))
          ],
        ),
      ),
    );
  }
}

三、GetWidget（較少使用）

GetWidget “緩存 “了一個Controller，由于cache，不能成為一個 “const Stateless”（因為cache，所以不能成為一個const Stateless）。當(dāng)我們使用Get.create(()=>Controller()) 會在每次調(diào)用時生成一個新的Controller Get.find()`

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

class GetViewAndGetWidgetExample extends GetWidget<GetViewCountController> {
  @override
  Widget build(BuildContext context) {
    // Get.put(GetViewCountController());不同之處在這里
    Get.create(() => GetViewCountController());
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX GetView"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() => Text(
              "count的值為:  ${controller?.count}",
              style: TextStyle(
                color: Colors.red,
                fontSize: 30
              ),
            )),
            SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                controller.increment();
              },
              child: Text("點我加1"))
          ],
        ),
      ),
    );
  }
}

在我們平時的開發(fā)過程中基本上很少會用到GetWidget，因為我們在大部分情況下都不需要緩存Controller。 當(dāng)我們的頁面中只依賴了一個控制器的情況話，那么使用GetView將是很好的選擇，因為他大大簡化了我們的代碼。
四、GetxController
GetxController主要的作用是用于UI代碼與業(yè)務(wù)邏輯分離開來。因為GetxController能動態(tài)獲取數(shù)據(jù)以及更新數(shù)據(jù)。
1、MyController創(chuàng)建用于被調(diào)用的方法

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();
  // }

  // 第二種
  // var teacher =  Teacher(name: "Jimi", age: 18).obs;
  // void convertToUpperCase() {
  //   teacher.update((val) {
  //     teacher.value.name = teacher.value.name.toString().toUpperCase();
  //   });
  // }

  // 第三種
  var teacher = Teacher();

  void convertToUpperCase() {
    teacher.name.value = teacher.name.value.toUpperCase();
    update();
  }
}

2、實例化控制器并使用

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();
  // }

  // 第二種
  // var teacher =  Teacher(name: "Jimi", age: 18).obs;
  // void convertToUpperCase() {
  //   teacher.update((val) {
  //     teacher.value.name = teacher.value.name.toString().toUpperCase();
  //   });
  // }

  // 第三種
  var teacher = Teacher();

  void convertToUpperCase() {
    teacher.name.value = teacher.name.value.toUpperCase();
    update();
  }
}
###第三步：實例化控制器并使用
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXControllerExample/MyController.dart';
import 'package:get/get.dart';
// 這里也可以繼承自GetView進行處理
class GetXControllerExample extends StatelessWidget {
  // 第一種
  MyController myController = Get.put(MyController());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Obx---GetXController"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 第一種
            // Obx(() => Text(
            //   "我的名字是 ${myController.teacher.name}",
            //   style: TextStyle(color: Colors.red, fontSize: 30),
            // )),
            // 第二種
            // GetX<MyController>(
            //   init: MyController(),
            //   builder: (controller) {
            //     return Text(
            //       "我的名字是 ${controller.teacher.name}",
            //       style: TextStyle(color: Colors.green, fontSize: 30),
            //     );
            //   },
            // ),
            // 第三種
            GetBuilder<MyController>(
              init: myController,
              builder: (controller) {
                return Text(
                  "我的名字是 ${controller.teacher.name}",
                  style: TextStyle(color: Colors.green, fontSize: 30),
                );
              },
            ),
            SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                // 第一種
                myController.convertToUpperCase();

                // 第二種
                // Get.find<MyController>().convertToUpperCase();
              },
              child: Text("轉(zhuǎn)換為大寫"))
          ],
        ),
      ),
    );
  }
}

四、GetxController事件監(jiān)聽

1、創(chuàng)建obs監(jiān)聽

import 'package:get/get.dart';

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

  void increment() {
    count++;
  }
}

2、重寫onInit并監(jiān)聽事件
get的生命周期：onInit、onReady、onClose

@override
void onInit() {
  // TODO: implement onInit

  // 監(jiān)聽count的值,當(dāng)它發(fā)生改變的時候調(diào)用
  ever(count, (callback) => print("ever----$count"));

  // 監(jiān)聽多個值,當(dāng)它們發(fā)生改變的時候調(diào)用
  everAll([count], (callback) => print("everAll----$count"));

  // count值改變時調(diào)用,只執(zhí)行一次
  once(count, (callback) => print("once----$count"));

  // 用戶停止打字時1秒后調(diào)用,主要是防DDos
  debounce(count, (callback) => print("debounce----$count"));

  // 忽略3秒內(nèi)的所有變動
  interval(count, (callback) => print("interval----$count"));

  super.onInit();
}

3、實例化控制器并使用

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

class GetXControllerWorkersExample extends StatelessWidget {

  WorkersController workersController = Get.put(WorkersController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetXWorkersController"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () => workersController.increment(),
                child: Text("增加")
            ),
            Padding(
              padding: EdgeInsets.all(16),
              child: TextField(
                onChanged: (val) {
                  workersController.increment();
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

4、多次點擊輸入結(jié)果

flutter: ever----1
flutter: everAll----1
flutter: once----1
[GETX] Worker [once] called
flutter: debounce----1
flutter: interval----1
flutter: ever----2
flutter: everAll----2
flutter: debounce----2
flutter: interval----2
flutter: ever----3
flutter: everAll----3
flutter: ever----4
flutter: everAll----4
flutter: ever----5
flutter: everAll----5
flutter: interval----5
flutter: debounce----5

五、GetxController生命周期

主要包括初始化、加載完成、銷毀等。
1、定義控制器繼承自GetxController

import 'package:get/get.dart';
class MyLifecycleController extends GetxController {
  var count = 0;
  void increment() async {
    await Future.delayed(Duration(milliseconds: 3000));//延時函數(shù)
    count++;
    update();
  }

  void cleanTask() {
    print("清除了任務(wù)");
  }
}

2、重寫GetxController生命周期方法

@override
void onInit() {
  // TODO: implement onInit
  print("初始化");
  super.onInit();
}

@override
void onReady() {
  // TODO: implement onReady
  print("加載完成");
  super.onReady();
}

@override
void onClose() {
  // TODO: implement onClose
  print("控制器被釋放");
  super.onClose();
}

3、實例化控制器并使用

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

class GetXControllerLifecycleMethodExample extends StatelessWidget {

  MyLifecycleController myLifecycleController = Get.put(MyLifecycleController());

  @override
  Widget build(BuildContext context) {
    print("build");

    return Scaffold(
      appBar: AppBar(
        title: Text("GetXControllerLifecycleMethod"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GetBuilder<MyLifecycleController>(
              initState: (data) => myLifecycleController.increment(),
              dispose: (_) => myLifecycleController.cleanTask(),
              builder: (controller) {
                return Text(
                  "計數(shù)器值為: ${myLifecycleController.count}",
                  style: TextStyle(color: Colors.green, fontSize: 30),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

六、GetxController UniqueID

我們在開發(fā)的過程中會碰到一種情況，就是多個地方引用了同一個屬性，但我只想單獨更新某一個地方，那么就可以用UniqueID來進行區(qū)分。比如有多個textview要增加計數(shù)。

1、定義控制器繼承自GetxController，并且定義uniqueID：jimi_count

import 'package:get/get.dart';

class CountController extends GetxController {
  var count = 0;

  void increment() {
    count++;
    update(['jimi_count']); //更新特定的uniqueID
  }
}

2、實例化控制器并使用

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

class GetXControllerUniqueIDExample extends StatelessWidget {

 CountController countController = Get.put(CountController());

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("GetX Obx---GetXController"),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           GetBuilder<CountController>(
             builder: (controller) {
               return Text(
                 "計數(shù)器值為: ${controller.count}",
                 style: TextStyle(color: Colors.red, fontSize: 30),
               );
             },
           ),
           GetBuilder<CountController>(
             id: 'jimi_count', //設(shè)置特定的uniqueID
             builder: (controller) {
               return Text(
                 "計數(shù)器值為: ${controller.count}",
                 style: TextStyle(color: Colors.green, fontSize: 30),
               );
             },
           ),
           SizedBox(height: 20,),
           ElevatedButton(
             onPressed: () => countController.increment(),
             child: Text("增加"))
         ],
       ),
     ),
   );
 }
}

七、GetStorage存儲

GetStorage box = GetStorage();
box.write('key','value');
box.read('key');

擴展知識，還有另一種三方存儲shared_preferences：

獲取 shared_preferences 實例
final prefs = await SharedPreferences.getInstance();
/// 設(shè)置值
prefs.setInt('counter', counter);
/// 獲取值 
final counter = prefs.getInt('counter') ?? 0;}
///移除
prefs.remove('counter');
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容