mvvm_initial

A new Flutter package for mvvm.

Getting Started

基于provider实现的mvvm架构,此插件只进行了简单的封装,使用方式和provider形式一致.

github项目主页地址

安装依赖

dependencies:
  mvvm_initial: xx

使用方法

在已安装依赖的前提下,按如下操作完成:
  • 创建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;
  }
}
  • 创建状态(实际项目中可直接使用已有的状态)
enum ModelState{
  LOADING,
  COMPLETE,
  ERROR,
  EMPTY
}
  • 继承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);
  }
}
  • 创建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('跳转下一页'),)
            ],
          ),
        ),
      ),
    );
 }
  • 触发更新
Provider.of<FourViewModel>(context, listen: false).changeMode();

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]
    ),);
  }

应用场景:

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

Libraries

frode_mvvm