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了,路由的话还是很简单的 没有多复杂 也就是实参和形参 

 

 

 

 

 

posted @ 2024-05-11 15:06  -鹿-  阅读(1091)  评论(0编辑  收藏  举报