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

瞎扯.

不管什么语言,都应该有个规范可言.
我从看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迭代.开发维护.咨询业务,付费快速解决问题.

最后编辑于：2019.03.13 10:42:25