hohomy / flutter_mvc

flutter mvc框架

flutter_mvc

分离UI跟业务逻辑的框架(动静分离)

特点

• 生命周期完善
• 动静分离
• 逻辑清晰
• 提高效率
• diff算法优化性能

INSTALL

  flutter_mvc:
    git: https://github.com/lxiuyuan/flutter_mvc.git

AndroidStudio Plugin

• 快速生成mvc基础代码
• 右侧维护mvc列表
• 快速生成fluro代码
• json to dart
  

安装插件

开始

引用MvcMaterialApp替换MaterialApp

    MvcMaterialApp(
          home: ...,
    );

Controller

var controller=new Controller();

• 跳转界面：controller.push(context);
• 关闭界面: controller.pop(result);
• 获取widget跳转:

Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
  new Controller().widget;
}));

其他组件介绍

1.Stateful：

Stateful(
  ///绑定用到的变量
  bind: ()=>[c.text],
  builder: (ctx){
    return Text(c.text);
  },
)

controller.setState((){})的时候会根据算法进行进行刷新

2.子控件获取BasePage下controller

2.1. ControllerBuild

• 获取BasePage下的ThisController

Widget build(context){
  return ControllerBuilder(
    builder: (ThisController c) {
      return Text(c.statelessText);
    },
  );
}

2.2. BaseState:

• 获取BasePage下的ThisController

class ThisStateful extends StatefulWidget {
  @override
  _ThisStatefulState createState() => _ThisStatefulState();
}

class _ThisStatefulState extends BaseState<ThisStateful,ThisController> {
  @override
  Widget build(BuildContext context) {
    return Text(c.text);
  }
}

3.FragmentWidget

• 类似于淘宝切换首页、分类、购物车的组件
• 生命周期完善
• 需要传递controller数组
  

controller.dart

class MainController extends BaseController {
   
   MainController():super(MainPage());
   var fragmentController=FragmentController();
   @override
   void initState(){
       super.initState();
       
   }

   void setPage(int index){
     fragmentController.animToPage(index);
   }
   
}

view.dart

class MainPage extends BasePage<MainController> {
  var fragments = [OneController(), TwoController()];

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Expanded(
              child: FragmentWidget(
            controller: c.fragmentController,
            children: fragments,
          )),
          Row(
            children: <Widget>[
              Expanded(
                  child: FlatButton(
                      onPressed: () {
                        c.setPage(0);
                      },
                      child: Text("OnePage"))),
              Expanded(
                  child: FlatButton(
                      onPressed: () {
                        c.setPage(1);
                      },
                      child: Text("TwoPage"))),
            ],
          )
        ],
      ),
    );
  }
}

管理组件MvcManager：

• Mvc
• 可以获取到app全部的BaseController
• current:获取当前显示的Controller

example

• 基础用法
• demo-Home界面:
  /example/lib/mvc/home/controller.dart
  /example/lib/mvc/home/view.dart