Flutter Getx 状态管理 --- 响应式状态管理器
状态管理
响应式状态管理器
响应式状态管理器-计数器
int _counter = 0;
RxInt _counter = 0.obs;
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 状态管理 --- 响应式状态管理器的更多相关文章
- Bootstrap的响应式后台管理模板推荐
1.Admin LTE 该模版开源免费.已用到项目中,客户评价说UI很好看... AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕 ...
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- 推荐几款基于Bootstrap的响应式后台管理模板
1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- 基于 Bootstrap 的响应式后台管理面板
你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...
- SASS优化响应式断点管理
前端开发whqet,csdn,王海庆,whqet,前端开发专家 原文:<Managing Responsive Breakpoints with Sass> 作者:Hugo Giraude ...
- SwiftUI 中一些和响应式状态有关的属性包装器的用途
SwiftUI 借鉴了 React 等 UI 框架的概念,通过 state 的变化,对 View 进行响应式的渲染.主要通过 @State, @StateObject, @ObservedObject ...
- 转:Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
http://www.cnblogs.com/lhb25/p/metronic-responsive-admin-dashboard-template.html
- CSS躬行记(11)——管理后台响应式改造
为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作. 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px ...
- Flutter GetX使用---简洁的魅力!
前言 使用Bloc的时候,有一个让我至今为止十分在意的问题,无法真正的跨页面交互!在反复的查阅官方文档后,使用一个全局Bloc的方式,实现了"伪"跨页面交互,详细可查看:flutt ...
随机推荐
- RocketMQ版控制台,在左侧
打开IntelliJ IDEA,创建一个Java工程. 在pom.xml文件中添加以下依赖引入Java SDK的依赖库. <dependency> <groupId>org ...
- macbook-键盘连击问题001
最近一段时间,我的笔记本(17年款 macbook pro 13寸)经常出现键盘连击问题. 最大的表现是 e/n/i 这几个按键,按下的时候,会有概率的出现两个或三个. 这不是个案 搜索了一下,有不少 ...
- Linux账号密码安全运维
前言 随着云计算厂商的兴起,云资源如ECS不再只有企业或者公司才会使用,普通人也可以自己买一台ECS来搭建自己的应用或者网站.虽然云计算厂商帮我们做了很多安全相关的工作,但并不代表我们的机器资源就绝对 ...
- 初识FreeRTOS
FreeRTOS是一个迷你的实时操作系统内核.作为一个轻量级的操作系统,功能包括:任务管理.时间管理.信号量.消息队列.内存管理.记录功能.软件定时器.协程等,可基本满足较小系统的需要. 一.Fr ...
- ELK日志企业案例:(5.3版本)
1.shell三剑客同居.分析nginx日志: 1)在企业生产环境中,日志内容主要用来做什么? 日志内容主要用于运维人员.开发人员.DBA排错软件服务故障的,因为通过日志内容能够第一时间找到软件服务的 ...
- Unity - UIWidgets 3. 页面跳转
Flutter的Route概念, 移动开发常指Page, 在android中指activity, ios中指viewcontroller, UGUI中常称为Panel\Form\View? 大概说的就 ...
- umich cv-5-1 神经网络训练1
这节课中介绍了训练神经网络的第一部分,包括激活函数的选择,权重初始化,数据预处理以及正则化方法 训练神经网络1 激活函数 数据预处理 权重初始化 正则化方法 激活函数 这部分主要讨论我们之前提到的几种 ...
- Leetcode.402单调栈
给你一个以字符串表示的非负整数 num 和一个整数 k ,移除这个数中的 k 位数字,使得剩下的数字最小.请你以字符串形式返回这个最小的数字. 示例 1 : 输入:num = "143221 ...
- Prometheus+Grafana实现服务性能监控:windows主机监控、Spring Boot监控、Spring Cloud Alibaba Seata监控
1.Prometheus介绍 Prometheus使用Go语言开发,中文名称叫:普罗 米修斯.Prometheus是一个开源系统最初在SoundCloud构建的监控和警报工具包.自 2012 年成立以 ...
- OpenJDK里的AsmTools简介
前言 转自:http://hengyunabc.github.io/openjdk-asmtools/ https://wiki.openjdk.java.net/display/CodeTools/ ...