1.GetxController介绍
在实际的项目开发过程中,我们不可能把UI代码、业务逻辑都放在一起处理,这样对项目的架构、代码的可读性、后期的维护将会是致命的,好在GetX
为我们提供了GetxController
,GetxController
主要的作用是用于UI代码与业务逻辑分离开来。
这里主要讲解使用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(),
);
}
}
第二步:定义控制器继承自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();
//1.主动的去调用更新.也可以在update()增加一个id的数组.在调用的使用只有当调用显示的id包含在该id数组里面的时候,才会有效.
//2.用来触发/刷新调用的时候obx()函数.这样数据就刷新了.
}
}
第三步:实例化控制器并使用
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());
//如果该MyController已经在其他页面使用过了,在另外页面需要重新使用的时候,无需 Get.put,直接使用 Get.find即可.
//MyController myController = Get.find();或者MyController countController= Get.find< 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),
// );
// },
// ),
/*
Obx和GetX<MyController>和GetBuilder<MyController>的区别:
Obx的Controller作用域是在外面的,而GetX<MyController>的Controller作用域只限于当前函数体里面的.
GetBuilder<MyController>和GetX<MyController>的区别在于GetBuilder<MyController>的性能会更高一点
*/
// 第三种==>主动的
GetBuilder<MyController>(
//id:**,该id如何在update()函数数据里面存在的时候,这里的属性值才会跟着发生变化.默认不写的话,是包含的.
init: myController,//init方法可以省略不要
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("转换为大写"))
],
),
),
);
}
}
2.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(
"计数器值为: ${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
3.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(),
);
}
}
第二步:定义控制器继承自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(
"计数器值为: ${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("增加"))
],
),
),
);
}
}
注意事项:
改方法存在一定的弊端,具体弊端详见<<Flutter中GetX系列七--依赖注入(put,lazyPut,putAsync)、Binding(统一初始化)>>中的最后的注意事项.所以建议使用<Flutter中GetX系列七中的方法.
4.GetView介绍使用详情
GetView 只是对已注册的 Controller 有一个名为 controller 的getter的 const Stateless 的
Widget,如果我们只有单个控制器作为依赖项,那我们就可以使用 GetView ,而不是使用
StatelessWidget ,并且避免了写 Get.Find() 。
4.1.GetView如何使用
GetView的使用方法非常简单,只是要将你的视图层继承自 GetView 并传入需要注册的控制器并文章来源:https://www.toymoban.com/news/detail-495756.html
Get.put() 即可,我们来看下代码演示:文章来源地址https://www.toymoban.com/news/detail-495756.html
4.2.GetView结合GetxController使用
第一步 、定义一个CountController
import 'package:get/get.dart';
class ShopController extends GetxController {
RxInt counter = 10.obs;
void onInit() {
print("onInit");
super.onInit();
}
@override
void onReady() {
print("onReady");
super.onReady();
}
@override
void onClose() {
print("onClose");
super.onClose();
}
void inc() {
counter.value++;
update();
}
}
第二步 、继承GetView并使用状态管理
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/shop.dart';
/**
* 1.必须继承get系统的GetView;
* 2.<>里面的为你所需要使用到的自定义类
*/
class ShopPage extends GetView<ShopController> {
const ShopPage({super.key});
@override
Widget build(BuildContext context) {
//如果第一次使用还需要put
Get.put(CountController());
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Column(
children: [
Obx(() => Text("${controller.counter}")),
const SizedBox(
height: 40,
),
ElevatedButton(
onPressed: () {
controller.inc();
},
child: const Text("shop counter+1"))
],
),
),
);
}
}
5.GetView Binding结合GetxController使用(不需要再写get.put)
第一步 、定义一个shopController
import 'package:get/get.dart';
class ShopController extends GetxController {
RxInt counter = 10.obs;
void onInit() {
print("onInit");
super.onInit();
}
@override
void onReady() {
print("onReady");
super.onReady();
}
@override
void onClose() {
print("onClose");
super.onClose();
}
void inc() {
counter.value++;
update(['first_count']);
}
}
第二步 、定义一个shop Binding
import 'package:get/get.dart';
import '../controllers/shop.dart';
class ShopControllerBinding implements Bindings{
@override
void dependencies() {
//其中<ShopController>可以不用写
Get.lazyPut<ShopController>(() => ShopController());
}
}
第三步 、路由中绑定Binding
import 'package:get/get.dart';
import '../pages/tabs.dart';
import '../pages/shop.dart';
import '../binding/shop.dart';
import '../middlewares/shopMiddleware.dart';
class AppPage {
static final routes = [
GetPage(name: "/", page: () => const Tabs()),
GetPage(
name: "/shop",
page: () => const ShopPage(),//路由
binding: ShopControllerBinding(),//全局的getxController
middlewares: [ShopMiddleWare()]//中间件->作为页面跳转前的条件判断
),
];
}
第四步 、继承GetView并使用状态管理
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/shop.dart';
class ShopPage extends GetView<ShopController> {
const ShopPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: Center(child: Obx(() {
return Text("${controller.counter}");
})),
);
}
}
到了这里,关于Flutter中GetX系列六--GetxController/GetView使用详情的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!