美文网首页
日更(三十)-Flutter-编写规范,设计模式的思考

日更(三十)-Flutter-编写规范,设计模式的思考

作者: Jlanglang | 来源:发表于2019-01-30 20:00 被阅读0次

    瞎扯.

    不管什么语言,都应该有个规范可言.
    我从看flutter开始,我就在想,这个应该怎么订规范,
    flutter是什么设计模式?

    mvc?mvp?mvvm?

    flutter的设计模式

    之前说了很多次,flutter和react一样.
    确实一样,设计理念也是一样的.

    Model.

    flutter有model吗?当然有.开发应用离不开bean与解析这些东西.

    View

    很明显,weight就是view.

    剩下一个是什么?

    P C VM?

    好像都没有.也不需要.

    只有一个state.(状态)
    state算什么?其实还是可以算mode.

    这么一看的话.

    好像就只有MV了.

    除了state就没有别的逻辑控制了吗?
    有.但是一般都是写在weight里面.

    这些控制逻辑.其实当作V,逻辑上也没问题.
    组件的概念.weight的内部封装逻辑而已.

    所以,用mvc mvp mvvm来分类,确实好像不太合适

    如果非要扯上关系的话,应该算是mvc.但是C的工作基本上框架已经帮我们做了.算MVVM吧,也有,也是框架做了,

    flutter怎么更新ui的

    这点和react也差不多.方法名都一样


    flutter:

     var a = 1;
    
      void update() {
        setState(() {
          a = 2;
        });
      }
    

    react:

      state={
            a: 1,
        };
    
        update=() => {
            this.setState({
                a: 2,
            });
        }
    

    有些许区别.但大致上还是很相似的.


    原理嘛.大致就是先修改数据,然后重新绘制一遍这个weight.
    会根据数据变化,一直遍历重新绘制每一个子weight.
    也就是重新调用这个方法

     @override
      Widget build(BuildContext context) {
        return Row(
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text("123"),
              ],
            )
          ],
        );
      }
    

    关于weight编写的规范问题

    在react中.写布局一般是


    image.png

    这么写的.

    那么在flutter中.我觉得也可以这样写.

    //部分页面内容
    var content = Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Text("123"),
        ],
      );
    
      @override
      Widget build(BuildContext context) {
        return Row(
          children: <Widget>[
            context.hashCode == 0 ? content : null//这里还能写判断代码.
          ],
        );
      }
    

    这样写的好处就是,不会所有内容写在一起.看起来很乱.

    但是

    在flutter里面.这个写法其实是有问题的.


    image.png

    必须使用static修饰的方法.

    那就加static


    image.png

    setState不能使用在static修饰的方法中.


    问题来了,怎么办呢??

    image.png

    如图.这样就可以了.写成方法的形式.

    这样看起来,是不是就没那么乱了.把一个weight再拆成一小块一小块的写.然后拼起来.方便看也方便改.

    当然,如果页面非常简单,也就没必要这样拆了.


    交流群:493180098,这是个很少吹水,交流学习的群.
    APP开发维护咨询群 : 492685472 ,承接APP迭代.开发维护.咨询业务,付费快速解决问题.

    相关文章

      网友评论

          本文标题:日更(三十)-Flutter-编写规范,设计模式的思考

          本文链接:https://www.haomeiwen.com/subject/lrhcsqtx.html