Flutter组件——Getx入门01

news2024/10/5 14:38:55

前言

最近要正式开始写一个flutter项目了,我在浏览flutter如何进行框架设计的时候突然看到了一篇关于如何管理flutter状态的文章。flutter中的状态管理并不是很好理解,但是你需要在页面之间传值或者改变组件中的某个值的时候就必须更改状态。当我在这篇文章中看到作者使用了Getx这个组件,使用起来非常简便,除了帮你管理状态以外还能管理路由、主题、多语言,于是就开始了学习Getx之路。

Getx githubicon-default.png?t=N3I4https://github.com/jonataslaw/getx

使用

新建一个flutter空项目(默认就是一个计数器demo)。先把Getx添加到pubspec.yaml文件中

dependencies:
  get:

 然后在这个默认计数器demo的基础上我们来使用Getx的强大功能

第一步

void main() => runApp(GetMaterialApp(home: Home()));
  • 注意:这并不能修改Flutter的MaterialApp,GetMaterialApp并不是修改后的MaterialApp,它只是一个预先配置的Widget,它的子组件是默认的MaterialApp。你可以手动配置,但绝对没有必要。GetMaterialApp会创建路由,注入它们,注入翻译,注入你需要的一切路由导航。如果你只用Get来进行状态管理或依赖管理,就没有必要使用GetMaterialApp。GetMaterialApp对于路由、snackbar、国际化、bottomSheet、对话框以及与路由相关的高级apis和没有上下文(context)的情况下是必要的。

  • 注2: 只有当你要使用路由管理(Get.to()Get.back()等)时才需要这一步。如果你不打算使用它,那么就不需要做第1步

第二步 

创建业务逻辑类,把所有的变量,方法,控制器都放在这个业务逻辑类中。这里多了一个我们看不懂的代码,“0.obs”,先不用管这句代码有什么用,我们先继续往下走。

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}

第三步

创建主页Home和第二个页面Other,使用Get框架后就基本不用创建有状态的组件了,即StatefulWidget

class Home extends StatelessWidget {

  @override
  Widget build(context) {

    // 使用Get.put()实例化你的类,使其对当下的所有子路由可用。
    final Controller c = Get.put(Controller());

    return Scaffold(
      // 使用Obx(()=>每当改变计数时,就更新Text()。
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // 用一个简单的Get.to()即可代替Navigator.push那8行,无需上下文!
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

class Other extends StatelessWidget {
  // 你可以让Get找到一个正在被其他页面使用的Controller,并将它返回给你。
  final Controller c = Get.find();

  @override
  Widget build(context){
     // 访问更新后的计数变量
     return Scaffold(body: Center(child: Text("${c.count}")));
  }
}

到此,我们就可以直接运行并打开这个app,可以看到我们实现了在StatelessWidget组件中实现了状态改变,这是怎么做到的呢??

 

 

使用原理

我们在Controller类中声明了一个变量count = 0.obs,由于dart的语法糖我们在这并不知道这个变量是什么类型的。我们可以在这个GetxController的生命周期里,把count变量的类型打印出来看看。

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
  @override
  void onInit() {
    super.onInit();
    print(count.runtimeType);
  }
}

可以看到,打印出来的类型是RxInt,Int类型我们熟呀,但是前面加了个Rx这又是啥?

这其实是Getx框架中定义的一个类型叫做响应式变量,Rx_Type,后面跟的Type可以是任意基础类型,包括list,map 等,还能声明自定义响应式变量。

声明响应式变量官方给了三种办法,前面两种不怎么常用,最实用的是第三种方法。

 第三种方法:

final name = ''.obs;
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs;

// 自定义类 - 可以是任何类
final user = User().obs;

只需要在变量的末尾添加一个.obs,就可以把这个变量变成可观察的。

使用时需要用Obx()把组件包裹起来,只要观察的值发生了变化,这个组件就会重建

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/514682.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C生万物 | 字符串函数与内存函数解读【附英译中图解】

文章目录 求字符串长度一、strlen() 长度不受限制的字符串函数一、strcpy()二、strcat()三、strcmp() 长度受限制的字符串函数一、引入二、strncpy()三、strncat()四、strncmp() 字符串查找函数一、strstr()二、strtok() 错误信息报告函数一、strerror() 字符操作函数内存操作函…

从“能用”到“好用”:它的出现,解决你80%的转型困境【内含免费试用附教程】

免费试用地址&#xff1a;引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构引迈信息&#xff0c;提供快速开发平台、快速开发框架、低代码开发平台、低代码开发框架、0代码开发平台、0代码开发框架、零代码开发平台、零代码开发…

战略投资奥琦玮,微盟冲在餐饮复苏最前线

作者 | 辰纹 来源 | 洞见新研社 好起来了&#xff0c;一切都好起来了。 刚刚过去的五一假期&#xff0c;广州费大厨正佳广场店每天取号1000多桌&#xff0c;餐厅翻台率达到了1200%&#xff1b;长沙文和友单日最高排号超过1万&#xff0c;到店人数近6万&#xff1b;武汉主力龙…

OpenGL高级-帧缓冲

效果展示 知识点 颜色缓冲记录帧的颜色值&#xff0c;深度缓冲记录深度信息&#xff0c;模板缓冲允许我们基于一些条件丢弃指定片段。这几种缓冲结合起来叫做帧缓冲(FrameBuffer)&#xff0c;它被储存于内存中。  OpenGL给了我们自己定义帧缓冲的自由&#xff0c;我们可以选择…

Linux网络——shell脚本之正则表达式

Linux网络——shell脚本之正则表达式 一、概述二、基本的正则表达式三、实践操作1.匹配输出规定的电话号码2.匹配规定格式的邮箱 一、概述 正则表达式是对字符串操作的一种逻辑公式&#xff0c;就是用事先定义好的一些特定字符、及这些特定字符的组合&#xff0c;组成一个“规则…

实时聊天如何做,让客户眼前一亮(二)

让我们继续讨论一下如何利用SaleSmartly&#xff08;ss客服&#xff09;在网站中的实时聊天视图如何提供出色的实时聊天体验。 四、在实时聊天会话期间 让我们来看看我们可以确保尽可能的提高客户体验的各种方法&#xff0c;使用SaleSmartly&#xff08;ss客服&#xff09;时聊…

Magic-API的部署

目录 概述简介特性 搭建创建元数据表idea新建spring-boot项目pom.xmlapplication.properties打包上传MagicAPI-0.0.1-SNAPSHOT.jar开启服务访问 magic语法 概述 简介 magic-api是一个基于Java的接口快速开发框架&#xff0c;编写接口将通过magic-api提供的UI界面完成&#xf…

性能优化之Tomcat优化策略

一、优化策略 系统性能的衡量指标&#xff0c;主要是响应时间和吞吐量。 1&#xff09;响应时间&#xff1a;执行某个操作的耗时&#xff1b; 2) 吞吐量&#xff1a;系统在给定时间内能够支持的事务数量&#xff0c;单位为TPS&#xff08;Transactions PerSecond的缩写&…

WhatsApp App Vs WhatsApp API,哪一个更适合你?

WhatsApp在全球拥有超过20亿月度活跃用户&#xff0c;是一个深受欢迎、可靠和安全的跨平台信息服务&#xff0c;使其成为与朋友、家人、同事和客户通信的首选移动信息程序。使用WhatsApp聊天机器人使推销你的公司和获得新客户变得更简单。 一、让我们先来看看WhatsApp个人应用…

VR全景的价值体现在哪里?VR全景创业有市场吗?

在这个5G时代&#xff0c;思维一定要快&#xff0c;动作还得要帅&#xff0c;动作快的现在已经挣到钱了。VR全景行业赶上了风口&#xff0c;在5G的搭载下发展非常迅速。 随着时代的发展&#xff0c;各行各业百花齐放&#xff0c;而创业的门槛也越来越低&#xff0c;作为创业项目…

怎样使用CAD在nVisual中创建楼层场景

nVisual是一款网络基础设施可视化管理软件&#xff0c;通过模型可规划即将建设的机房效果&#xff0c;或者将已有的机房场景复刻至系统中&#xff0c;便于运维管理者清晰的了解数据中心/机房设备及线缆路由连接关系。 用户手里的资料一般都会有机房的CAD图纸&#xff0c;在nVi…

玩转Typora

玩转Typora 文章目录 玩转Typora我的用法安装typoraMath行内公式&#xff1a;块公式&#xff1a;矩阵行列式 DiagramsFlowMermaidClass DiagramFlowchartPie ChartSequence Diagram SequenceIframeAudio 文本颜色、居中设置Typora修改css格式主题修改滚动条颜色背景色**webkit下…

使用 Jetson Orin Nano 在 Ubuntu 20.04 中编译安装 ROS2 Foxy

本文详细介绍了在 Jetson Orin Nano 类似的 ARM 设备上编译安装 ROS2 的 Foxy 分支的过程&#xff0c;包括从源代码编译、安装依赖库、设置环境变量等方面。同时&#xff0c;针对安装过程中可能遇到的问题&#xff0c;提供了相应的解决方案&#xff0c;以帮助读者顺利完成 ROS2…

calHist()-使用OpenCV和C++计算直方图

calHist()-使用OpenCV和C计算直方图 在计算机视觉中&#xff0c;几乎处处都使用直方图。对于阈值计算&#xff0c;我们使用灰度直方图。对于白平衡&#xff0c;我们使用直方图。对于图片中的对象跟踪&#xff0c;比如CamShift技术&#xff0c;我们使用颜色直方图&#xff0c;采…

SpringCloud Alibaba 之 Config配置中心,Redis分布式锁详解

目录 1.服务配置中心 1.1 服务配置中心介绍 1.2 Nacos Config 实践 1.2.1 Nacos config 入门案例 1.2.2 Nacos 配置动态刷新 1.2.3 配置共享 1.2.4 nacos 几个概念 2.分布式锁 2.1 分布式锁介绍 2.2 Redisson 2.2.1 Redisson 实践 2.2.2 Redisson 原理 1.服务配置中心…

HTTPS协议详解

https是http over TLS&#xff08;transport security layer&#xff09;的缩写。也即说明http协议是不安全的&#xff0c;是TLS协议保证的安全。协议层级图如下: 我们常说https协议是安全的&#xff0c;主要是指两点&#xff1a; 第一&#xff0c;通信两端可以进行身份验证。…

复习一周,面了京东和百度,不小心都拿了Offer...

我个人情况是5年软件测试经验&#xff0c;在家复习了一周&#xff0c;面了京东和百度&#xff0c;都顺利拿下offer&#xff0c;下面是我的面试经历分享&#xff0c;希望能带来一些不一样的启发和帮助。 两家公司最常问的就是下面这些问题&#xff1a; 请介绍一下你之前做过哪些…

万用表位数的定义以及对应的ADC位数

万用表的精度通常会用几位半来描述&#xff1a; 比如大部分普通的万用表是 3 / 的精度&#xff0c;也就是俗称的3位半。 也就是说这个万用表最多显示4个数字&#xff0c;其中3位可以显示完整的0~9&#xff0c; 而这位是4个数字中的最高位&#xff0c;2代表只能显示0和1两个数…

【OAI】OAI5G核心网VPP-UPF网元分析

文章目录 VPP_UPF_CONFIG_GENERATION.mdVPP UPF Configuration GenerationEnvironment variablesInterfacesInterface Configuration ExamplesCentral UPFA-UPFI-UPFUL CL FEATURE_SET.mdVPP_UPG_CLI参考文献 VPP_UPF_CONFIG_GENERATION.md VPP UPF Configuration Generation …

(十三)地理数据库创建——进一步定义数据库①

地理数据库创建——进一步定义数据库① 目录 地理数据库创建——进一步定义数据库① 1.建立索引1.1建立属性索引1.2修改空间索引 2.创建子类和属性域2.1属性域2.2子类型2.3属性分割和合并2.4属性域操作2.4.1建立属性域2.4.2修改属性域2.4.3关联属性域 2.5子类型操作2.5.1建立子…