14.2.flutter_GetX

GetxController介紹

在實際的項目開發(fā)過程中，我們不可能把UI代碼、業(yè)務邏輯都放在一起處理，這樣對項目的架構、代碼的可讀性、后期的維護將會是致命的，好在GetX為我們提供了GetxController,GetxController主要的作用是用于UI代碼與業(yè)務邏輯分離開來。

視頻教程地址

零基礎視頻教程地址

GetxController三種使用方式

這里主要講解使用GetxController動態(tài)獲取數(shù)據(jù)的三種方式以及更新數(shù)據(jù)的方式。

第一步：應用程序入口設置

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

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

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

第二步：定義控制器繼承自GetxController

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';

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("轉換為大寫"))
          ],
        ),
      ),
    );
  }
}

效果展示

GetxController事件監(jiān)聽

這里主要講解GetxController的事件監(jiān)聽，包括監(jiān)聽單個值、多個值等。

第一步：應用程序入口設置

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

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

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

第二步：定義控制器繼承自GetxController

import 'package:get/get.dart';

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

  void increment() {
    count++;
  }
}

第三步：重寫onInit并監(jiān)聽事件

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

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

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

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

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

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

  super.onInit();
}

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

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

效果展示

控制臺輸出結果

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生命周期

這里主要講解GetxController的生命周期，包括初始化、加載完成、銷毀等。

第一步：應用程序入口設置

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

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

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

第二步：定義控制器繼承自GetxController

import 'package:get/get.dart';

class MyLifecycleController extends GetxController {

 var count = 0;

 void increment() async {
   await Future.delayed(Duration(milliseconds: 3000));
   count++;
   update();
 }

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

第三步：重寫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();
}

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

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),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

效果展示

控制臺輸出結果

flutter: 初始化
[GETX] Instance "MyLifecycleController" has been created
[GETX] Instance "MyLifecycleController" has been initialized
[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized
flutter: build
flutter: 加載完成
flutter: build
flutter: build

GetxController UniqueID

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

第一步：應用程序入口設置

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

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

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

第二步：定義控制器繼承自GetxController，并且定義uniqueID

import 'package:get/get.dart';

class CountController extends GetxController {
  var count = 0;

  void increment() {
    count++;
    update(['jimi_count']);
  }
}

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

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',
             builder: (controller) {
               return Text(
                 "計數(shù)器值為: ${controller.count}",
                 style: TextStyle(color: Colors.green, fontSize: 30),
               );
             },
           ),
           SizedBox(height: 20,),
           ElevatedButton(
             onPressed: () => countController.increment(),
             child: Text("增加"))
         ],
       ),
     ),
   );
 }
}

效果展示

參考

https://liujunmin.com/flutter/getx/getx_controller.html

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容