Flutter GetX基础教程（十一）：GetxController

GetxController介绍

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

视频教程地址

零基础视频教程地址

GetxController三种使用方式

这里主要讲解使用GetxController动态获取数据的三种方式以及更新数据的方式。

第一步：应用程序入口设置

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

</pre>

第二步：定义控制器继承自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();
}
}
</pre>

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

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("转换为大写"))
      ],
    ),
  ),
);

}
}
</pre>

效果展示

image

GetxController事件监听

这里主要讲解GetxController的事件监听，包括监听单个值、多个值等。

第一步：应用程序入口设置

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

第二步：定义控制器继承自GetxController

import 'package:get/get.dart';

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

void increment() {
count++;
}
}
</pre>

第三步：重写onInit并监听事件

@override
void onInit() {
// TODO: implement 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();
}
</pre>

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

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

效果展示

image

控制台输出结果

`|
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
</pre>

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

第二步：定义控制器继承自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("清除了任务");
}
}
</pre>

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

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

`|
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(
              "计数器值为: ${myLifecycleController.count}",
              style: TextStyle(color: Colors.green, fontSize: 30),
            );
          },
        ),
      ],
    ),
  ),
);

}
}
</pre>

效果展示

image

控制台输出结果

`|
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
</pre>

GetxController UniqueID

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

第一步：应用程序入口设置

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

第二步：定义控制器继承自GetxController，并且定义uniqueID

import 'package:get/get.dart';

class CountController extends GetxController {
var count = 0;

void increment() {
count++;
update(['jimi_count']);
}
}
</pre>

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

`|
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(
"计数器值为: ${controller.count}", style: TextStyle(color: Colors.red, fontSize: 30), ); }, ), GetBuilder<CountController>( id: 'jimi_count', builder: (controller) { return Text( "计数器值为:$ {controller.count}",
style: TextStyle(color: Colors.green, fontSize: 30),
);
},
),
SizedBox(height: 20,),
ElevatedButton(
onPressed: () => countController.increment(),
child: Text("增加"))
],
),
),
);
}
}
</pre>

效果展示

image

总结

本章节对GetxController的数据赋值、数据更新、事件监听、生命周期、UniqueID 进行了讲解，也明白了怎么用GetxController来对项目的UI代码与业务逻辑进行拆分。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 160,026评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,655评论 1赞 296
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,726评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,204评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,558评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,731评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,944评论 2赞 314
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,698评论 0赞 203
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,438评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,633评论 2赞 247
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,125评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,444评论 3赞 255
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,137评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,103评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,888评论 0赞 197
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,772评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,669评论 2赞 271

Flutter GetX基础教程（十一）：GetxController

GetxController介绍

视频教程地址

GetxController三种使用方式

第一步：应用程序入口设置

第二步：定义控制器继承自GetxController

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

效果展示

GetxController事件监听

第一步：应用程序入口设置

第二步：定义控制器继承自GetxController

第三步：重写onInit并监听事件

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

效果展示

控制台输出结果

GetxController生命周期

第一步：应用程序入口设置

第二步：定义控制器继承自GetxController

第三步：重写GetxController生命周期方法

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

效果展示

控制台输出结果

GetxController UniqueID

第一步：应用程序入口设置

第二步：定义控制器继承自GetxController，并且定义uniqueID

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

效果展示

总结

推荐阅读更多精彩内容