首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何观察Mobx flutter中其他类的字段变量?

在Mobx Flutter中观察其他类的字段变量,可以通过以下步骤实现:

  1. 导入所需的包:在Flutter项目中的pubspec.yaml文件中添加mobx和flutter_mobx依赖,并执行flutter packages get命令进行包的安装。
  2. 创建被观察的类:创建一个需要被观察的类,该类需要继承自mobx的Observable类。在该类中定义需要被观察的字段变量,并使用@observable注解进行标记。
  3. 创建观察者类:创建一个观察者类,用于观察被观察类的字段变量的变化。观察者类需要继承自mobx的ObserverWidget类。
  4. 注册观察者:在观察者类中,使用@override注解重写build方法,并在该方法中使用mobx的autorun函数来注册观察者。在autorun函数中,可以访问被观察类的字段变量,并进行相应的处理。

下面是一个示例代码,演示了如何观察Mobx Flutter中其他类的字段变量:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:mobx/mobx.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

// 被观察的类
class Counter extends Observable {
  @observable
  int value = 0;
}

// 观察者类
class CounterObserver extends ObserverWidget {
  final Counter counter;

  CounterObserver({required this.counter});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Value: ${counter.value}'),
        ElevatedButton(
          onPressed: () {
            counter.value++;
          },
          child: Text('Increment'),
        ),
      ],
    );
  }

  @override
  void afterBuild(BuildContext context) {
    autorun((_) {
      // 在这里可以观察counter的字段变量的变化,并进行相应的处理
      print('Counter value changed: ${counter.value}');
    });
  }
}

void main() {
  final counter = Counter();

  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mobx Flutter Example'),
        ),
        body: CounterObserver(counter: counter),
      ),
    ),
  );
}

在上述示例中,Counter类是被观察的类,其中的value字段变量被标记为@observable。CounterObserver类是观察者类,它继承自ObserverWidget,并重写了build方法和afterBuild方法。在afterBuild方法中,使用autorun函数注册了观察者,并在其中打印了counter的value字段变量的变化。

这样,当点击Increment按钮时,counter的value字段变量会发生变化,并触发观察者的afterBuild方法,打印出相应的变化信息。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。您可以通过以下链接了解更多关于这些产品的信息:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Java 和对象,如何定义Java如何使用Java对象,变量

参考链接: Java对象和 1.对象概念 :万物皆对象,客观存在事物皆为对象  2.什么是面向对象:人关注一个对象,实际上是关注该对象事务信息   3.是模子,确定对象将会拥有的特征(...对象是一个你能够看得到,摸得着具体实体    如何定义Java:  1.重要性:所有Java程序都以class为组织单元  2.什么是是模子,确定对象将会拥有的特征(属性)和行为(方法...5    引用对象方法:对象.方法       phone.sendMessage() ; //调用对象senMessage()方法  成员变量和局部变量  1.成员变量     在定义,用来描述对象将要有什么...  2.局部变量      在方法定义,在方法临时保存数据  成员变量和局部变量区别  1.作用域不同:        局部变量作用域仅限于定义他方法        成员变量作用域在整个内部都是可见...  2.初始值不相同:          Java会给成员变量一个初始值          Java不会给局部变量赋予初始值,必要初始化  3.在同一个方法,不允许有同名局部变量;  在不同方法

6.9K00

带你走进Flutter_Mobx

Flutter 状态管理框架很多,笔者个人使用起来比较舒适flutter_mobx,使用了不短时间,最近抽时间了解了一下 flutter_mobx 实现。今天在这里分享一下。...如果你还不熟悉 flutter_mobx 使用,可以参考它文档:https://pub.dev/packages/flutter_mobx,也可以参考我之前写一篇文章: FlutterMobx...在 enforceWitePolicy,会检查是否有在计算中去观察变量行为,有的话会报错。...可以理解成是观察者 Atom 具体被观察变量 image.png flutter_mobx flutter_mobx 提供了一个 Observer 组件,在这个组件里面使用 Store 里面的被观察对象...总结 到这里我们就比较完整了解了flutter_mobx核心流程。这里能看到,如果我们理清楚了数据流向,找到了观察者和被观察者,其实大体流程就比较清晰了。

71710
  • NewLife.XCode如何借助分部抽象多个具有很多共同字段实体

    背景: 两个实体:租房图片、售房图片 这两个表用于存储房源图片记录,一个房源对应多个图片,两个表差别就在于一个业务关联字段。...因为两个实体操作极为相似,我们可以提取出来一个接口,进行统一操作。这里只有两个实体,可能优势不明显,但如果有八个十个呢?...由于XCode是充血模型,我们可以为这两个实体做一个统一来达到我目的,但是这个统一里面无法访问子类字段,编码上很不方便。 这一次,我们用分部接口!...先来看看这两个实体 image.png image.png 这两个实体,就RentID和SaleID字段不同,其它都一样,包括名字、类型、业务意义。...实际上也不应该修改原有的接口文件,因为原有的接口位于实体数据文件,那是随时会被新代码生成覆盖。

    2.2K60

    MobXMobX 简单入门教程

    也提供使用装饰器 @observable 来将其转换成可观察,可以使用在实例字段和属性上。...,而是达到一个效果(如:打印日志,发起网络请求等命令式副作用); @computed,如果一个计算值不再被观察了,MobX 可以自动地将其垃圾回收,而 autorun 值必须要手动清理才行。...注意 第一个参数,必须是根据可观察数据来返回布尔值,而不是普通变量布尔值。 如果第一个参数默认值为 true,则 when 函数会默认执行一次。...修改可观察数据 在上一部分内容,我们了解到,对可观察数据做出反应时候,需要我们手动修改可观察数据值。...多数情况下,这种高频触发是完全没有必要。 比如用户对视图一次点击操作需要很多修改 N 个状态变量,但是视图更新只需要一次就够了。 为了优化这个问题, MobX 引入了 action 。

    1.5K00

    C++11模板:如何判断是否有指定名称成员变量?

    https://blog.csdn.net/10km/article/details/51113805 如何判断中有指定成员函数,网上可以找到不少文章,比如下面这两篇就写得很详细了...《C++11之美》 《C++模板,判断是否存在成员函数,实现差异化操作 》 我现在关心如何判断一个中有成员变量?...成员变量有可能是数组,也可能是其他。...std::is_void::value}; }; 上面这个模板是用来检查是否有名为s成员, 以openclcl_int2向量类型举例,下面是cl_int2定义: /* ---...但是对于数组类型变量,上面的写法,在gcc下编译能通过,但运行结果错误。 大概gcc认为返回值不能是int[2]这样数组,只能是指针。

    4.2K10

    MobX】391- MobX 入门教程(下)

    三、MobX 常用 API 介绍 3. 修改可观察数据 在上一部分内容,我们了解到,对可观察数据做出反应时候,需要我们手动修改可观察数据值。...这种修改是通过直接向变量赋值来实现,虽然简单易懂,但是这样会带来一个较为严重副作用,就是每次修改都会触发 autorun 或者 reaction 运行一次。...多数情况下,这种高频触发是完全没有必要。 比如用户对视图一次点击操作需要很多修改 N 个状态变量,但是视图更新只需要一次就够了。 为了优化这个问题, MobX 引入了 action 。...2019102301.png 在这个案例,我们引用 mobx-react 库来实现,很明显可以看出 mobx-react 是作为 mobx 和 react 之前桥梁。...@observer 在需要根据数据变换,而改变UI组件去引用,另外建议有使用到相关数据都引用。

    89620

    用故事解读 MobX 源码(二)computed

    这两个问题: 从哪儿来:从观察员那儿获取,也可以从其他会计师那儿获取; 到哪儿去:所生产数据,要么是被探长消费,要么被其他会计师所用;(当然,没有人消费他所生产数据也是可能,不过这就得追究 MobX...变量和 divisor 变量;其中在获取 bankUser.debit 变量之时会让观察员 O2 触发 reportObserved方法,这个上一篇文章着重讲过,此处就不详细展开了;而请求 divisor...3、其他说明 本文为了方便说明,所以单独使用 mobx.computed 方法定义计算值,平时使用更多则是直接应用在 对象属性 上,使用 get 语法: var bankUser = mobx.observable...4、小测试 4.1、测试1 问题:当我们更改张三贷款数额 bankUser.debit = 4; 时,请从源码角度解答 MobX 执行流程是如何?...官方文档对计算值说明 下一篇文章将探讨 MobX 与 autorun 和 computed 相关计算性能优化机制,看看 MobX 如何平衡复杂场景下状态管理时效率和性能。 完

    48521

    用故事解读 MobX源码(四) 装饰器 和 Enhancer

    因为在 MobX 是使用装饰器设计模式实现观察,所以说要先掌握装饰器,才能进一步去理解观察值。 所以这是一篇 “插队” 文章,用于去理解 MobX 装饰器和 Enhancer 概念。...学会装饰器 1、装饰器基础知识 和其他语言(Python、Java)一样,装饰器语法是借助 @ 符号实现,现在问题就归结到如何用 JS 去实现 @ 语法。... dependencies 字段比较陈旧了,可以自己手动更新到最新版本 打开控制台就可以看到 bundle.js 文件了: ?...从另一个角度来讲,在 mobx 代码实现,Enhancer 是实现 Observable 观察值必不可少一部分,没有它就实现不了观察值功能,也就构建不起 MobX 体系了;而如果缺失 @observable...MobX 其他 enhancer 也是基于这个函数创建相应装饰器: ?

    90920

    用故事解读 MobX 源码(一)autorun

    而作为执行官(MobX),你得知道 A计划 中部署方案每一步细节。下面我们来一探究竟执行官 MobX 到底是如何部署 A计划 。...由于环境是自己营造MobX 可以为所欲为,在环境穿插各种因素:探长、观察员、数据情报室等等(后续还有其他角色),这样就将任务运行尽最大可能地控制在这套所创造体系 —— 孙猴子不也翻不出如来佛五指山么...如果任务不涉及到 income 这项属性,那么就不会有 (3.5)操作,也就没有 (3.6)什么事) 由于探长 R1 所执行任务中用到 bankUser.income 变量,这里 ....冰山一角 故事还还有很多问题,比如: 如何成为一名合格探员、观察员?(用程序员的话讲,就是有哪些属性和方法) 数据情报室到底还存有哪些关键信息? 组织机构是否还有其他组、成员?...多个探长、观察员情况下,这套部署方案又是如何呢? ….

    46120

    用故事解读 MobX 源码(一)autorun

    而作为执行官(MobX),你得知道 A计划 中部署方案每一步细节。下面我们来一探究竟执行官 MobX 到底是如何部署 A计划 。...由于环境是自己营造MobX 可以为所欲为,在环境穿插各种因素:探长、观察员、数据情报室等等(后续还有其他角色),这样就将任务运行尽最大可能地控制在这套所创造体系 —— 孙猴子不也翻不出如来佛五指山么...如果任务不涉及到 income 这项属性,那么就不会有 (3.5)操作,也就没有 (3.6)什么事) 由于探长 R1 所执行任务中用到 bankUser.income 变量,这里 ....冰山一角 故事还还有很多问题,比如: 如何成为一名合格探员、观察员?(用程序员的话讲,就是有哪些属性和方法) 数据情报室到底还存有哪些关键信息? 组织机构是否还有其他组、成员?...多个探长、观察员情况下,这套部署方案又是如何呢? ….

    1K10

    MobX】390- MobX 入门教程(上)

    也提供使用装饰器 @observable 来将其转换成可观察,可以使用在实例字段和属性上。...这里我们使用 computed 第一种声明方式为例,其他几种方式实现起来类似: import {observable, computed} from "mobx"; class Money {...当修改 autorun 任意一个可观察数据即可触发自动运行。...,而是达到一个效果(如:打印日志,发起网络请求等命令式副作用); @computed,如果一个计算值不再被观察了,MobX 可以自动地将其垃圾回收,而 autorun 值必须要手动清理才行。...注意 第一个参数,必须是根据可观察数据来返回布尔值,而不是普通变量布尔值。 如果第一个参数默认值为 true,则 when 函数会默认执行一次。

    82520

    为啥Flutter Hooks没有受到太多关注和青睐?

    在本文中,我会试着告诉大家如何使用 Flutter Hooks 来减少样板代码,并基本上摆脱你现在用几乎所有有状态小部件(StatefulWidget),让大家知道 Hooks 用起来是多么简单利落!...,我们无需放弃控制器,也无需像有状态小部件那样提供 ticker provider。...Hooks 允许你创建自己 Hooks,这意味着如果你找不到内置 Hooks,则只需创建自己版本即可。 下面我们看看如何创建一个管理 TabController Hook。...定制 Hooks flutter_hooks 包提供了两种自定义 Hooks 方法,只需使用一个函数或创建一个自定义即可。...你有一个有状态,即 HookState ,可以访问自定义 Hook 字段(此处为 hook.length )。而 hookState 构建方法将构建你 Hook 结果。

    1.1K20

    MobX管理状态(ES5实例描述)-2.可观察类型

    () ,其所有属性都会成为可观察,并被拷贝到一个副本(对副本更改也同时影响原始对象值) 默认是递归处理,如果一个属性是对象或数组,其元素也会被观察 var $ctn = document.querySelector...2.4 基本类型值和引用 所有JS基本值都是不可变,因此单个变量无法被观察 MobX将这些类型转换成可观察“boxed value” 转换后对象可调用如下方法: get() - 取得当前值 set...{b: 22} */ 2.5 实例 对于实例,需要在构造函数或对实例对象调用mobx.extendObservable(targetName, ...props)方法: var Person =...实例描述符 描述符被用来对指定属性定义特殊行为 比如用observable.ref()来浅观察引用、用computed()来声明一个派生属性,或用action()定义一个改变状态动作 var...}); };var p3 = new Person3; p3.fullName = "ivanka trump"; console.log(p3.fullName, p3.firstName); 实例观察

    70130

    最近,前端又火了哪些技术

    在这篇文章,将带大家盘点一下,近期前端比较火五大技术。 你可以看一下你自己技术体系和当下流行技术栈,有多大区别,以及接下来你该如何去规划自己接下来学习方向。...我们发现在最近新版本已经完成到可用状态。 ?...Flutter框架(上图中绿色部分)在移动和web平台中共享,它提供了FlutterUI基础层高层次抽象,包括动画、基础组件、以及大多数应用需要物化主题组件集。...Mobx倒是对拥抱Hooks带了更多诚意推出了mobx-react-lite。 4. TypeScript 官方解释:TypeScript是一种由微软开发自由和开源编程语言。...它是JavaScript一个超集,而且本质上向这个语言添加了可选静态类型和基于面向对象编程。说成人话:拥有了强、抽象、接口啥那些之后端语言才有的语法特性Js。 我们为什么需要他?

    1.1K50

    实现简版 react 状态管理器 mobx

    React 使用react 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染这里配上官网 mobx 执行流程图图片页面的状态存储在 mobx ,通过事件触发 mobx 方法函数,改变状态,...如果有计算属性(类似 vue)依赖了 state,计算属性值也会改变, mobx 监听到了 react render 变量修改,重新执行 render 实现渲染。.../mobx/observable.jsconst observable = (target) => { // 需要将 target 进行代理,创建可观察对象 return createObservable...用过 vue3 朋友应该了解,effect 函数也是和内部属性进行关联,我们可以定义一个全局变量存储,当执行 autorun 函数时,对该变量进行赋值,同时我们可以通过拦截 get 方法对属性和全局值进行关联...mobx 还有很多其他属性,感兴趣小伙伴可以自行查阅资料学习。如果有问题,欢迎交流学习!

    1.4K30
    领券