flutter Getx 的管理(看完就学会)
前沿
getX是Flutter中一个轻量级且功能强大的状态管理库,
它提供了便捷的方式来管理应用程序的状态、导航、依赖注入等。GetX的核心理念是简单、高效、可扩展,它旨在帮助开发者更快地构建Flutter应用程序。
对比其他的数据管理状态,我直接选择这个
状态管理:GetX提供了简单而强大的状态管理机制,包括响应式状态管理、依赖注入等。你可以使用Obx、GetBuilder等Widget来监听状态的变化,并在状态发生变化时更新UI。 路由管理:GetX提供了简洁的路由管理方式,包括命名路由、参数传递、页面跳转等。你可以使用Get.to、Get.off等方法来进行页面导航,并且可以很容易地传递参数。 依赖注入:GetX内置了一个简单但强大的依赖注入系统,可以方便地管理应用程序中的依赖关系,包括单例、懒加载等。 国际化:GetX还提供了国际化的支持,可以帮助你轻松地实现应用程序的国际化和本地化。
用一个例子 更好的理解:
这个是首页
import 'package:flutter/material.dart'; import 'package:get/get.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Get Example', initialRoute: '/', getPages: [ GetPage(name: '/', page: () => HomePage()), GetPage(name: '/detail', page: () => DetailPage()), ], ); } }
下面这个是:
// 首页 class HomePage extends StatelessWidget { // 使用Get.put创建控制器实例 final countController = Get.put(CountController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Home')), body: Center( child: Obx(() => Text('Count: ${countController.count.value}')), ), floatingActionButton: FloatingActionButton( onPressed: () => countController.increment(), child: Icon(Icons.add), ), ); } }
Obx(() => Text('Count: ${countController.count.value}')), 这个是固定写法就是获取状态的值
详情页面
// 详情页面 class DetailPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Detail')), body: Center( child: Text('Detail Page'), ), ); } }
然后就是你的写的控制qi
// 计数控制器 class CountController extends GetxController { // 定义响应式状态 var count = 0.obs; // 增加计数的方法 void increment() { count++; } }
解释下:
用GetX实现了一个简单的计数器应用。
在HomePage中,我们使用Get.put来创建CountController的实例,并使用Obx来监听计数器的变化并更新UI。
在DetailPage中,我们使用了GetX提供的路由管理方式,通过GetPage配置了一个名为'/detail'的路由。
当然我们在全局的页面上需要这么写
用bindsings 这么注册全局的gext
import 'package:get/get.dart'; import '/modules/category/category_controller.dart'; class CategoryBindings extends Bindings { @override void dependencies() { Get.lazyPut<CategoryController>(() => CategoryController()); } }
然后就可以
不需要每次都在页面 get.Put();
只需要在引入的地方引入就好了
当然需要结合 你的路由来写
// final CartController cartController = Get.put(); final CartController cartController = Get.find();
你的全局路由就是要可以写出全局状态的
class CartPage extends GetView<CartController> { const CartPage({Key? key}) : super(key: key); }
这样就OK了,路由的话还是很简单的 没有多复杂 也就是实参和形参