随笔 - 210  文章 - 0 评论 - 0 阅读 - 61289
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

Flutter Getx 简单的状态管理(依赖管理) GetxController

Getx 依赖管理简介

Get有一个简单而强大的依赖管理器,它允许你只用1行代码就能检索到与你的Bloc或Controller相同的
类,无需Provider context,无需inheritedWidget。
Controller controller = Get.put(Controller());
// 而不是 Controller controller = Controller();
想象一下,你已经浏览了无数条路由,现在你需要拿到一个被遗留在控制器中的数据,那你需要一个状
态管理器与Provider或Get_it一起使用来拿到它,对吗?用Get则不然,Get会自动为你的控制器找到你
想要的数据,而你甚至不需要任何额外的依赖关系。
Controller controller = Get.find();
//是的,它看起来像魔术,Get会找到你的控制器,并将其提供给你。你可以实例化100万个控制器,Get总
会给你正确的控制器。

多页面之间的数据共享

Flutter默认创建的 "计数器 "项目有100多行(含注释),为了展示Get的强大功能,我将使用 GetX 重
写一个"计数器 Plus版",实现:
  • 每次点击都能改变状态 
  • 在不同页面之间切换
  • 在不同页面之间共享状态
  • 将业务逻辑与界面分离
应用程序入口设置
复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp();
    ...
  }
}
复制代码
新建CountController
复制代码
import 'package:get/get.dart';

class CountController extends GetxController {
  RxInt count = 0.obs; // 初始化一个可观察的变量count,初始值为0
   void inc() {
    count++; // 递增count的值
    update(); // 通知侦听器进行更新
  }
  void dec() {
    count--; // 递减count的值
    update(); // 通知侦听器进行更新
  }
}
复制代码
TimePag.dart执行inc方法
复制代码
import 'package:app_flutter01/pages/Key/messages.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class TimePag extends StatefulWidget {
  const TimePag({super.key});

  @override
  State<TimePag> createState() => _TimePagState();
}

class _TimePagState extends State<TimePag> {
  CountController countController = Get.put(CountController()); //实例化控制器
  @override
  Widget build(BuildContext context) {
    return Center(
      child:     Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Obx(() => Text("${countController.count}",
            style: Theme.of(context).textTheme.headline1)),
        ElevatedButton(
            onPressed: () {
              countController.inc();
            },
            child: const Text("数值+1"))
      ],
    ),
    );
  }
}
复制代码
myHome.dart执行dec方法
你可以让Get找到一个正在被其他页面使用的Controller,并将它返回给你。
final countController= Get.find<CountController>();
或者
final CountController countController = Get.find();
代码:
复制代码
import 'package:app_flutter01/pages/Key/messages.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class myHome extends StatefulWidget {
  const myHome({super.key});

  @override
  State<myHome> createState() => _myHomeState();
}

class _myHomeState extends State<myHome> {
  final CountController countController = Get.find();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Obx(() => Text("${countController.count}" )),
          ElevatedButton(
              onPressed: () {
                countController.dec();
              },
              child: const Text("数值-1"))
        ],
      ),
    );
  }
}
复制代码

GetxController 绑定数据的几种方法

方法1:
CountController countController = Get.put(CountController()); //建议使用
或者
final CountController countController = Get.find();

  Obx(()=>Text("${countController.count}",style:Theme.of(context).textTheme.headline1)),
方法2:
只是绑定数据无需调用 Get.put(CountController());
复制代码
GetX<CountController>(
          init: CountController(),
          builder: (controller) {
             return Text(
              "${controller.count}",
              style: const TextStyle(color: Colors.green, fontSize: 30),
           );
          },
),
复制代码
方法3:
复制代码
CountController countController = Get.put(CountController());
或者
final CountController countController = Get.find();

GetBuilder<CountController>(
       init: countController,
       builder: (controller) {
         return Text(
            "${controller.count}",
            style: const TextStyle(color: Colors.green, fontSize: 30),
       );
      },
)
复制代码

GetX Binding

需求:所有页面都要使用状态管理
在我们使用 GetX 状态管理器的时候,往往每次都是用需要手动实例化一个控制器,这样的话基本页面
都需要实例化一次,这样就太麻烦了,而 Binding 能解决上述问题,可以在项目初始化时把所有需要
进行状态管理的控制器进行统一初始化,接下来看代码演示:
在前面的文章中,我们经常使用 Get.put(MyController()) 来进行控制器实例的创建,这样我们就算
不使用控制器实例也会被创建,其实 GetX 还提供很多创建实例的方法,可根据不同的业务来进行创
建,接下来我们简单介绍一下几个最常用的
  • Get.put(): 不使用控制器实例也会被创建
  • Get.lazyPut(): 懒加载方式创建实例,只有在使用时才创建
  • Get.putAsync(): Get.put() 的异步版版本
  • Get.create(): 每次使用都会创建一个新的实例
第一步:声明需要进行的绑定控制器类
复制代码
import 'package:get/get.dart';

class CountController extends GetxController {
  RxInt count = 0.obs; // 初始化一个可观察的变量count,初始值为0

   void inc() {
    count++; // 递增count的值
    update(); // 通知侦听器进行更新
  }

  void dec() {
    count--; // 递减count的值
    update(); // 通知侦听器进行更新
  }
}
复制代码

 

import 'package:get/get.dart';
class BindingMyController extends GetxController {
  var count = 0.obs;
  void increment() {
    count++;
  }
}

 

复制代码
import 'package:app_flutter01/pages/Key/messages.dart';
import 'package:get/get.dart';

class AllControllerBinding implements Bindings {
  @override
  void dependencies() {
// TODO: implement dependencies
    Get.lazyPut<CountController>(() => CountController()); //懒加载
    Get.lazyPut<BindingHomeController>(() => BindingHomeController());
  }
}
复制代码
第二步:在项目启动时进行初始化绑定
void main() {
  runApp(GetMaterialApp(
      title: "flutterAPP___test",
      initialBinding: AllControllerBinding(), //全局绑定GetxController
      home: Scaffold(body: MyFlutter1())));
}
第三步:在页面中使用状态管理器
复制代码
class myHome extends StatefulWidget {
  const myHome({super.key});

  @override
  State<myHome> createState() => _myHomeState();
}

class _myHomeState extends State<myHome> {
  CountController countController = Get.find<CountController>(); //实例化控制器

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Obx(() => Text("${countController.count}" )),
          ElevatedButton(
              onPressed: () {
                countController.dec();
              },
              child: const Text("数值-1"))
        ],
      ),
    );
  }
}
复制代码

 

 

 

 
posted on   鲤斌  阅读(1969)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示