Flutter: MobX和flutter_mobx状态管理器
安装依赖
dependencies:
mobx:
flutter_mobx:
dev_dependencies:
build_runner: ^1.3.1
mobx_codegen:
编写store
/// counter.dart
import 'package:mobx/mobx.dart';
// 包含生成的文件
part 'counter.g.dart';
class Counter = _Counter with _$Counter;
// The store-class
abstract class _Counter with Store {
/// 定义state
@observable
int value = 0;
/// 定义修改state的事件
/// MobX.dart自动处理异步操作,不需要使用runInAction包装代码
@action
void increment() {
value++;
}
/// 定义计算属性
@computed
String get valueString => 'value is $value';
}
build
flutter packages pub run build_runner build // 执行一次build命令
flutter packages pub run build_runner watch // 文件更改自动打包
flutter packages pub run build_runner watch --delete-conflicting-outputs // 删除旧文件在打包
UI
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'counter.dart'; // Import the Counter
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DashPage(),
);
}
}
class DashPage extends StatefulWidget {
@override
_DashPageState createState() => _DashPageState();
}
class _DashPageState extends State<DashPage> {
int _currentIndex = 0;
final PageController _controller = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
fixedColor: Colors.purple,
onTap: (int index) {
setState(() {
_currentIndex = index;
_controller.jumpToPage(index);
});
},
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
activeIcon: Icon(Icons.home),
title: Text("Home")),
BottomNavigationBarItem(
icon: Icon(Icons.search),
activeIcon: Icon(Icons.search),
title: Text("Search")),
],
),
body: PageView(
controller: _controller,
onPageChanged: (int index) {
setState(() {
_currentIndex = index;
});
},
children: <Widget>[
HomePage(),
Center(child: Text('Search Page')),
],
),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final counter = Counter();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('demo'),
),
body: Column(
children: <Widget>[
Observer(builder: (_) => Text(counter.value.toString())),
Observer(builder: (_) => Text(counter.valueString)),
OutlineButton(
child: Text('add'),
onPressed: counter.increment,
),
],
),
);
}
}
Flutter: MobX和flutter_mobx状态管理器的更多相关文章
- 对于React各种状态管理器的解读
首先我们要先知道什么是状态管理器,这玩意是干啥的? 当我们在多个页面中使用到了相同的属性时就可以用到状态管理器,将这些状态存到外部的一个单独的文件中,不管在什么时候想使用都可以很方便的获取. reac ...
- vue状态管理器(用户登录简单应用)
技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一 vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...
- VueX状态管理器 的应用
VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...
- Mobx | 强大的状态管理工具 | 可以用Mobx来替代掉redux
来源简书 电梯直达 https://www.jianshu.com/p/505d9d9fe36a Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情 ...
- Flutter 基础组件:状态管理
前言 一个永恒的主题,"状态(State)管理",无论是在React/Vue(两者都是支持响应式编程的Web开发框架)还是Flutter中,他们讨论的问题和解决的思想都是一致的. ...
- vue - 状态管理器 Vuex
状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.
- vue项目--vuex状态管理器
本文取之官网和其他文章结合自己的理解用简单化的语言表达.用于自己的笔记记录,也希望能帮到其他小伙伴理解,学习更多的前端知识. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态 ...
- Vue中的状态管理器 - Vuex
我们知道vue是组件式开发的,当你的项目越来越大后,每个组件背后的数据也会变得越来越难以理顺, 这个时候你就可以考虑使用vuex了. 备注: 官方建议小项目不要使用,引入vuex会带来新的概念和模式, ...
- ngxs 状态管理器
官网文档 ng6,rxjs6.0.0,ngxs3.0.1 λ ng new ngxs --style=styl --routing --skip-install λ cd ngxs λ yarn λ ...
随机推荐
- 转载,Pandas 数据统计用法
pandas模块为我们提供了非常多的描述性统计分析的指标函数,如总和.均值.最小值.最大值等,我们来具体看看这些函数: 1.随机生成三组数据import numpy as npimport panda ...
- Spark练习之action操作开发
Spark练习之action操作开发 一.reduce 1.1 Java 1.2 Scala 二.collect 2.1 Java 2.2 Scala 三.count 3.1 Java 3.2 Sca ...
- Spring5源码,@ModelAttribute
一.什么是@ModelAttribute注解 二.@ModelAttribute注解相关代码详解 一.什么是@ModelAttribute注解 @ModelAttribute注解主要用来将请求转换为使 ...
- 我用了半年的时间,把python学到了能出书的程度
Python难学吗?不难,我边做项目边学,过了半年就通过了出版社编辑的面试,接到了一本Python选题,并成功出版. 有同学会说,你有编程基础外带项目实践机会,所以学得快.这话不假,我之前的基础确实加 ...
- sql如何查询数据库最后10条记录并正序输出
select * from (select * from 表名 order by 字段 desc limit 10) 临时表 order by 字段
- 【noi 2.6_9267】核电站(DP)
题意:n个数中不能同时选连续m个或以上,问方案数. 解法:f[i][j]表示从前i个中选,到第i个已经连续选了j个.j!=0时, =f[i-1][j-1] ; j=0时, =f[i-1][0~m-1 ...
- Java 窗口 绘制图形 #1
写在前面: editplus换成eclipse了 Sketchpad要钱,买不起 自己搞(rua) by emeralddarkness 建立了一个平面直角坐标系 两个变元x,y,参数i 实现了以下功 ...
- JavaScript_继承
- java源码之集合类ArrayList
1. ArrayList概述: ArrayList是List接口的可变数组的实现.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类还提供一些方法来操作内部 ...
- spring再学习之整合JDBC
一.JDBCTemplate JDBC模板 user类 package cn.itcast.bean; import java.util.Date; public class User { priva ...