Flutter GetX系列教程---GetxController

安装

将 GetX 添加到你的 pubspec.yaml 文件中

dependencies:
   get: ^4.6.5

在需要用到的文件中导入，它将被使用。

import 'package:get/get.dart';

GetxController介绍

在实际的项目开发过程中，我们不可能把UI代码、业务逻辑都放在一起处理，这样对项目的架构、代码的可读性、后期的维护将会是致命的，好在GetX为我们提供了GetxController,GetxController主要的作用是用于UI代码与业务逻辑分离开来。

GetxController三种使用方式

// 第一种
 Obx(()=>Text(
   "测试数据是：${myController.trancher.name}"
   )),
 // 第二种
 GetX<MyController>(
   init: MyController(),
   builder: ((controller) {
     return Text(
       "测试数据2：${controller.trancher.name}"
     );
   }),
 ),
 // 第三种
 GetBuilder<MyController>(
     init: myController,
     builder: ((controller) {
       return Text("测试数据GetBuilder：${controller.trancher.name}");
     })
 ),

代码

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'GetXControllerExample/GetXControllerExample.dart';
void main(){
  return runApp(Home());
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "",
      home: GetXControllerExample(),
    );
  }
}

GetXControllerExample.dart

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

class GetXControllerExample extends StatelessWidget {

  MyController myController = Get.put(MyController());

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("GetXController"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 第一种
              // Obx(()=>Text(
              //   "测试数据是：${myController.trancher.name}"
              //   )),
              // 第二种
              GetX<MyController>(
                init: MyController(),
                builder: ((controller) {
                  return Text(
                    "测试数据2：${controller.trancher.name}"
                  );
                }),
              ),
              // 第三种
              // GetBuilder<MyController>(
              //     init: myController,
              //     builder: ((controller) {
              //       return Text("测试数据GetBuilder：${controller.trancher.name}");
              //     })
              // ),
              SizedBox(height: 20,),
              ElevatedButton(onPressed: (){
                // 第一种
                myController.convertToUpperCase();
                // 第二种
                // Get.find<MyController>().convertToUpperCase();
              }, child: Text("转换"))
            ],
          ),
        ),
      ),
    );
  }
}

MyController.dart

import 'package:get/get.dart';
class MyController extends GetxController{
  // 第一种
  // var trancher = Teacher();
  // void convertToUpperCase(){
  //   trancher.name.value = trancher.name.value.toUpperCase();
  // }

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

  // 第三种
  var trancher = Teacher();

  void convertToUpperCase() {
    trancher.name.value = "12323";
    update();
    print("执行了");
  }
}


class Teacher{
  var name = "ancde".obs;
  var age = 19.obs;
}

GetxController事件监听

GetxController的事件监听，包括监听单个值、多个值等。

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:untitled/GetXControllerCycle/GetXControllerCycle.dart';
void main(){
  return runApp(Home());
}
class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "",
      home: GetXControllerCycle(),
    );
  }
}

GetXControllerCycle.dart

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

class GetXControllerCycle extends StatelessWidget {

  GetxControllerOn getxControllerOn = Get.put(GetxControllerOn());

  GetXControllerCycle({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetxController事件监听"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(onPressed: ()=>{
            getxControllerOn.increment()
          }, child: Text("加1"))
        ],
      ),
    );
  }
}

GetxControllerOn.dart

import 'package:get/get.dart';
class GetxControllerOn extends GetxController {
  var count = 0.obs;
  void increment() {
    print("执行了");
    count++;
  }
  //重写onInit并监听事件
  @override
  void onInit() {
    // 监听count的值,当它发生改变的时候调用
    ever(count, (callback)=>print("ever---$count"));
    // 监听多个值,当它们发生改变的时候调用
    everAll([count], (callback) => print("everAll----$count"));
    // count值改变时调用,只执行一次
    once(count, (callback) => print("once----$count"));
    // 用户停止打字时1秒后调用,主要是防DDos
    debounce(count, (callback) => print("debounce----$count"));
    // 忽略3秒内的所有变动
    interval(count, (callback) => print("interval----$count"));
    super.onInit();
  }
}

GetxController生命周期

GetxController的生命周期，包括初始化、加载完成、销毁等。

GetxControllerOn.dart

import 'package:get/get.dart';
class GetxControllerOn extends GetxController {
  var count = 0.obs;
  void increment() {
    print("执行了");
    count++;
  }
  //重写onInit并监听事件
  @override
  void onInit() {
    print("初始化");
    // 监听count的值,当它发生改变的时候调用
    ever(count, (callback)=>print("ever---$count"));
    // 监听多个值,当它们发生改变的时候调用
    everAll([count], (callback) => print("everAll----$count"));
    // count值改变时调用,只执行一次
    once(count, (callback) => print("once----$count"));
    // 用户停止打字时1秒后调用,主要是防DDos
    debounce(count, (callback) => print("debounce----$count"));
    // 忽略3秒内的所有变动
    interval(count, (callback) => print("interval----$count"));
    super.onInit();
  }

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

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

GetxController UniqueID

我们在开发的过程中会碰到一种情况，就是多个地方引用了同一个属性，但我只想单独更新某一个地方，那么就可以用UniqueID来进行区分。

main.dart

GetXControllerUniqueID.dart

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

class GetXControllerUniqueID extends StatelessWidget {

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("GetxController UniqueID"),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GetBuilder<CountController>(builder: (context){
                return Text(
                  "计数器值为: ${countController.count}",
                );
              }),
              GetBuilder<CountController>(
                  id:"yuyu_count",
                  builder: (context){
                return Text(
                  "计数器值为: ${countController.count}",
                );
              }),
              SizedBox(height: 30,),
              ElevatedButton(onPressed: ()=>{
                countController.increment()
              }, child: Text("增加"))
            ],
          ),
        ),
      ),
    );
  }
}


class CountController extends GetxController{
  var count = 0;

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