状态管理

Get 并不是比任何其他状态管理器更好或更差,而是说你应该分析这些要点以及下面的要点来选择只用
Get,还是与其他状态管理器结合使用。
Get不是其他状态管理器的敌人,因为Get是一个微框架,而不仅仅是一个状态管理器,既可以单独使
用,也可以与其他状态管理器结合使用。
Get有两个不同的状态管理器:响应式状态管理器、简单的状态管理器。

响应式状态管理器

响应式编程可能会让很多人感到陌生,因为它很复杂,但是GetX将响应式编程变得非常简单。
你不需要创建StreamControllers.
你不需要为每个变量创建一个StreamBuilder。
你不需要为每个状态创建一个类。
你不需要为一个初始值创建一个get。
使用 Get 的响应式编程就像使用 setState 一样简单。

响应式状态管理器-计数器

让我们想象一下,你有一个名称变量,并且希望每次你改变它时,所有使用它的小组件都会自动刷新。
这就是你的计数变量。
int _counter = 0;
要想让它变得可观察,你只需要在它的末尾加上".obs"。
RxInt _counter = 0.obs;
而在UI中,当你想显示该值并在值变化时更新页面,只需这样做。
Obx(() => Text("$_counter"));
完整代码
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
RxInt _counter = 0.obs;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Gex 计数器"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Obx(() => Text("${_counter.value}"))
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_counter++;
},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
 

声明一个响应式变量三种方式

第一种 使用 Rx{Type}。
final name = RxString('');
final isLogged = RxBool(false);
final count = RxInt(0);
final balance = RxDouble(0.0);
final items = RxList<String>([]);
final myMap = RxMap<String, int>({});
第二种是使用 Rx,规定泛型 Rx。
final name = Rx<String>('');
final isLogged = Rx<Bool>(false);
final count = Rx<Int>(0);
final balance = Rx<Double>(0.0);
final number = Rx<Num>(0)
final items = Rx<List<String>>([]);
final myMap = Rx<Map<String, int>>({});
自定义类 - 可以是任何类
final user = Rx<User>();
第三种 更实用、更简单、更可取的方法,只需添加 .obs 作为value的属性。(推荐)
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;

监听自定义类数据的变化

1.类里面的属性响应式变化

创建Person 类
import 'package:get/get.dart';
class Person {
// rx 变量
RxString name = "Jimi".obs;
RxInt age = 18.obs;
}
获取类属性值以及改变值
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
var person = Person();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Getx Obx"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Obx(() => Text(
"我的名字是 ${person.name.value}",
style: const TextStyle(color: Colors.red, fontSize: 30),
))
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
person.name.value = person.name.value.toUpperCase();
},
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

2.整个类的响应式变化

创建Person 类
class Person {
String name;
int age;
Person(this.name, this.age);
}
获取类属性值以及改变值
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
var person = Person("aotoman", 9999).obs;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Getx Obx"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Obx(() => Text(
"我的名字是 ${person.value.name}",
style: const TextStyle(color: Colors.red, fontSize: 30),
))
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
person.value.name = person.value.name.toUpperCase(); //转大小 person.value = person.value; //重新赋值 *必须
},
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

Flutter Getx 状态管理 --- 响应式状态管理器的更多相关文章

  1. Bootstrap的响应式后台管理模板推荐

    1.Admin LTE 该模版开源免费.已用到项目中,客户评价说UI很好看... AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕 ...

  2. Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  3. 推荐几款基于Bootstrap的响应式后台管理模板

    1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...

  4. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  5. 基于 Bootstrap 的响应式后台管理面板

    你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...

  6. SASS优化响应式断点管理

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 原文:<Managing Responsive Breakpoints with Sass> 作者:Hugo Giraude ...

  7. SwiftUI 中一些和响应式状态有关的属性包装器的用途

    SwiftUI 借鉴了 React 等 UI 框架的概念,通过 state 的变化,对 View 进行响应式的渲染.主要通过 @State, @StateObject, @ObservedObject ...

  8. 转:Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板

    http://www.cnblogs.com/lhb25/p/metronic-responsive-admin-dashboard-template.html

  9. CSS躬行记(11)——管理后台响应式改造

    为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作. 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px ...

  10. Flutter GetX使用---简洁的魅力!

    前言 使用Bloc的时候,有一个让我至今为止十分在意的问题,无法真正的跨页面交互!在反复的查阅官方文档后,使用一个全局Bloc的方式,实现了"伪"跨页面交互,详细可查看:flutt ...

随机推荐

  1. RocketMQ版控制台,在左侧

    打开IntelliJ IDEA,创建一个Java工程. 在pom.xml文件中添加以下依赖引入Java SDK的依赖库.   <dependency> <groupId>org ...

  2. macbook-键盘连击问题001

    最近一段时间,我的笔记本(17年款 macbook pro 13寸)经常出现键盘连击问题. 最大的表现是 e/n/i 这几个按键,按下的时候,会有概率的出现两个或三个. 这不是个案 搜索了一下,有不少 ...

  3. Linux账号密码安全运维

    前言 随着云计算厂商的兴起,云资源如ECS不再只有企业或者公司才会使用,普通人也可以自己买一台ECS来搭建自己的应用或者网站.虽然云计算厂商帮我们做了很多安全相关的工作,但并不代表我们的机器资源就绝对 ...

  4. 初识FreeRTOS

    FreeRTOS是一个迷你的实时操作系统内核.作为一个轻量级的操作系统,功能包括:任务管理.时间管理.信号量.消息队列.内存管理.记录功能.软件定时器.协程等,可基本满足较小系统的需要.   一.Fr ...

  5. ELK日志企业案例:(5.3版本)

    1.shell三剑客同居.分析nginx日志: 1)在企业生产环境中,日志内容主要用来做什么? 日志内容主要用于运维人员.开发人员.DBA排错软件服务故障的,因为通过日志内容能够第一时间找到软件服务的 ...

  6. Unity - UIWidgets 3. 页面跳转

    Flutter的Route概念, 移动开发常指Page, 在android中指activity, ios中指viewcontroller, UGUI中常称为Panel\Form\View? 大概说的就 ...

  7. umich cv-5-1 神经网络训练1

    这节课中介绍了训练神经网络的第一部分,包括激活函数的选择,权重初始化,数据预处理以及正则化方法 训练神经网络1 激活函数 数据预处理 权重初始化 正则化方法 激活函数 这部分主要讨论我们之前提到的几种 ...

  8. Leetcode.402单调栈

    给你一个以字符串表示的非负整数 num 和一个整数 k ,移除这个数中的 k 位数字,使得剩下的数字最小.请你以字符串形式返回这个最小的数字. 示例 1 : 输入:num = "143221 ...

  9. Prometheus+Grafana实现服务性能监控:windows主机监控、Spring Boot监控、Spring Cloud Alibaba Seata监控

    1.Prometheus介绍 Prometheus使用Go语言开发,中文名称叫:普罗 米修斯.Prometheus是一个开源系统最初在SoundCloud构建的监控和警报工具包.自 2012 年成立以 ...

  10. OpenJDK里的AsmTools简介

    前言 转自:http://hengyunabc.github.io/openjdk-asmtools/ https://wiki.openjdk.java.net/display/CodeTools/ ...