首页 > 其他分享 >flutter Getx 的管理(看完就学会)

flutter Getx 的管理(看完就学会)

时间:2024-05-11 15:10:24浏览次数:23  
标签:GetX Get 状态 学会 class Getx extends flutter 路由

前沿

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

 

 

 

 

 

标签:GetX,Get,状态,学会,class,Getx,extends,flutter,路由
From: https://www.cnblogs.com/yf-html/p/18186537

相关文章

  • Flutter 开发过程中的配置问题汇总
    一、MacOS上Flutter3.19.6修改maven的源将Flutter中的maven访问源修改为国内镜像源。因为目前网上多数教程已经不适用了,找了很久才找到替换方法,故特此记录。本篇方法参考了此链接。下面是修改的方法:(1)打开Flutter的安装目录/packages/flutter_tools/lib/src/http_......
  • MacOS 上 Flutter 3.19.6 修改 maven 的源
    将Flutter中的maven访问源修改为国内镜像源。因为目前网站多数教程已经不适用了,找了很久才找到替换方法,故特此记录。本篇方法参考了此链接。下面是修改的方法:(1)打开Flutter的安装目录/packages/flutter_tools/lib/src/http_host_validator.dart文件 (2)将maven的访......
  • 架构每日一学 4:成为首席架构师,你必须学会顺应人性
    本文首发于公众平台:腐烂的橘子架构师生存法则之二:架构活动需要顺应人性程序员入行的第一天起就进入了一个机器的世界。在别人的眼中,程序员平时很少说话,更多的时间在和电脑打交道。程序员工作时间久了大脑会被格式化,就像一个一个方格。它有一定好处,就是你在写代码的时候更容易......
  • Flutter中向Widget子组件传参数(多个参数)
    以下是传递参数的示例import'package:flutter/material.dart';classInspectListextendsStatefulWidget{constInspectList({super.key});@overrideState<StatefulWidget>createState()=>_InspectListState();}class_InspectListStateexte......
  • Flutter 中的 GlobalKey
    前沿flutter局部刷新可以用到GlobalKeyGlobalKey是一个特殊的标识符,它用于在Widget树中唯一标识一个Widget,并允许我们在Widget树之外访问该Widget的状态或属性。它通常用于在多个Widget之间共享状态、访问子Widget的方法或属性,以及执行一些全局操作。 注意:GlobalKey不应......
  • flutter 编译环境部署
    一. 编译环境安装1.安装ubuntu20.04,详细的教程请看以下链接VMware虚拟机下安装Ubuntu20.04(保姆级教程)_ubuntu20.04虚拟机-CSDN博客2.部署flutter环境,详细教程请参照以下链接构建flutter应用程序·sony/flutter-elinux维基·GitHub上注意:在进行docker映射时,必须在d......
  • 学会使用 NumPy:基础、随机、ufunc 和练习测试
    NumPyNumPy是一个用于处理数组的Python库。它代表“NumericalPython”。基本随机ufunc通过测验测试学习检验您对NumPy的掌握程度。通过练习学习NumPy练习练习:请插入创建NumPy数组的正确方法。arr=np.([1,2,3,4,5])示例创建NumPy数组:importnumpy......
  • flutter项目安装nfc_manager后项目运行不起来
    安装nfc_manager后运行一直卡着,生成不了APPAndroidManifest.xml中的已经添加了的权限,插件版本也是对的上的后面进行卸载→重装进行测试、在安装插件时看到有这样一段提示PleaseenableDeveloperModeinyoursystemsettings.Run startms-settings:developers toopense......
  • 什么是 Docker?Docker详解,7分钟学会
    Docker容器是一种打包格式,可通过标准格式打包应用的所有代码和依赖关系,确保应用能够快速、可靠地在计算环境下运行。Docker容器是一种广受欢迎的轻量级、可执行的独立容器,其中包含应用运行所需的一切要素,包括库、系统工具、代码和运行时。此外,Docker还是一个软件平台,支持开发人......
  • 新手也能学会的甘特图制作教程
    ##甘特图是什么?甘特图(GanttChart)是一种以图表形式直观展示项目计划的工具,由20世纪初的管理学家亨利·甘特(HenryGantt)发明并命名。它具有以下几个主要特点:1.水平时间轴甘特图的横轴是一条时间轴,通常按天、周或月来刻度,直观展示了项目从开始到结束的整个时间跨度。2.任......