mvvm_initial

Description:

mvvm initial

mvvm_initial #
A new Flutter package for mvvm.
Getting Started #
基于provider实现的mvvm架构,此插件只进行了简单的封装,使用方式和provider形式一致.
github项目主页地址
安装依赖 #
dependencies:
mvvm_initial: xx
copied to clipboard
使用方法 #
在已安装依赖的前提下,按如下操作完成:


创建model


class User {
int _age;
String _name;
User(this._age,this._name);

String get name => _name;

set name(String value) {
_name = value;
}

int get age => _age;

set age(int value) {
_age = value;
}
}
copied to clipboard


创建状态(实际项目中可直接使用已有的状态)


enum ModelState{
LOADING,
COMPLETE,
ERROR,
EMPTY
}
copied to clipboard


继承BaseViewModel创建viewModel


class FourViewModel extends BaseViewModel<User,ModelState>{
FourViewModel(User mode, ModelState state) : super(mode, state);
@override
void changeMode() {
this.mode.name='xxxx';
super.changeMode(newMode);
}
}
copied to clipboard


创建view


@override
Widget build(BuildContext context) {
// TODO: implement build
return ChangeNotifierProvider(
create: (_)=>TwoViewModel(User(100,'aaa'),ModelState.LOADING),
builder: (context,child)=>Scaffold(
body: Container(
child: Column(
children: [
Text('Consumer简化写法:${context.watch<TwoViewModel>().mode.name}'),
Consumer<TwoViewModel>(
builder: (context,vm,child)=>Text('Consumer非简化写法:${vm.mode.name}'),
),
Text('Selector简化写法:${context.select<TwoViewModel,int>((value) => value.mode.age)}'),
Selector<TwoViewModel,int>(builder: (context,age,child){
return Text('Selector非简化写法:$age');
},selector: (context,vm)=>vm.mode.age,),
RaisedButton(onPressed: (){
Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
return new Four();
},));
},child: Text('跳转下一页'),)
],
),
),
),
);
}
copied to clipboard


触发更新


Provider.of<FourViewModel>(context, listen: false).changeMode();
copied to clipboard
MultiProvider使用及跨组件更新方案 #
使用场景:

一个页面包含多个viewmodel
一个应用包含多个viewmodel

@override
Widget build(BuildContext context) {
return MultiProvider(providers: [
ChangeNotifierProvider<Counter>(create: (_)=>Counter(10000)),
ChangeNotifierProvider<TwoViewModel>(create: (_)=>TwoViewModel(User(1101,'aaaa'),ModelState.LOADING)),
],child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
navigatorObservers: [routeObserver]
),);
}
copied to clipboard
应用场景:

多个页面会使用到用户登录信息,当用户信息变更时,则需要触发全部刷新.
用户定位信息在不同页面的展示