fpuremvc 0.0.6 fpuremvc: ^0.0.6 copied to clipboard
puremvc for flutter
puremvc #
puremvc for flutter
页面与逻辑完全分离,页面可以不知道模型,模型可以不知道页面。
为什么要有这个库?
目前的状态管理库要么使用过于复杂,要么并不能做到模型和页面完全隔离,所以有这个库。
Getting Started #
导入
import 'package:fpuremvc/fpuremvc.dart';
因为这里puremvc已经被占用了,所以只能这样
流程
定义一个模型,模型用于存储数据和接收dispatch的消息并处理,完成之后notify通知已经完成
class NumberModel extends BaseModel{
@override
String get name => "number";
int counter=0;
@override
void update(String event, data) {
if(event == "add"){
add();
}
}
void add(){
++counter;
notify("counter", counter);
}
}
注册模型
NumberModel numberModel = new NumberModel();
Models.add(numberModel);
页面使用:
第一种:StatefulWidget
class MyHomePage extends StatefulWidget {
final int counter;
MyHomePage({Key key, this.title,this.counter}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends ObserverState<MyHomePage> {
int _counter;
@override
void initState() {
_counter= widget.counter;
bind("counter", onCounter);
super.initState();
}
void onCounter(int counter){
this._counter = counter;
}
void _incrementCounter() {
dispatch("number/add", null);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
new RaisedButton(onPressed: (){
Navigator.push(context, new MaterialPageRoute(builder: (c){
return MyHomePage(title: 'Flutter Demo Home Page',counter: _counter,);
}));
},child: new Text("Next"),)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
第二种:通过build来创建StateLess页面
class StatelessDemo extends StatelessWidget{
int counter;
String title;
StatelessDemo({
this.counter,
this.title
});
void _incrementCounter() {
dispatch("number/add", null);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$counter',
style: Theme.of(context).textTheme.display1,
),
new RaisedButton(onPressed: (){
Navigator.pop(context);
},child: new Text("Back"),)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
WidgetBuilder statelessBuilder= PureMvc.eventBuilder(["counter"], (c){
return StatelessDemo(title: 'Flutter Demo Home Page',counter: numberModel.counter,);
});
Navigator.push(context, new MaterialPageRoute(builder: statelessBuilder));
这里可以使用一些路由组件使得页面和模型隔离,或者全局保存这些WidgetBuilder