聊聊QML中的MVC文化

Model-View-Delegate

和大家简单介绍一下QML里面的MVC设计（Model-View-Controller的缩写，UI设计常用的一种设计模式）。

先放实例demo, 一张图概括一下mvc在qml中的实现，过过眼瘾

（请忽略美工。。）

实现了2个不同的View，2个不同的Model，2个长的不一样的Delegate。

点击按钮【换Model】可以切换不同的数据，点击【换Delegate】可以切换数据的显示

代码源码打包如下:

什么是Delegate呢？简要来说，就是数据长什么样子。如下图，Qt的MVC构成图。

这种MVC框架是不是用起来非常舒服，使用得当的话，一定会帮你完成扩展性强的设计。

布局--样式--数据

可以总结一下, View提供了布局(html), Delegate提供了样式(css), model则提供数据(data), 这样类比到web语言当中是不是更清晰了? 在前端mvc中, 不仅数据与显示要分离, 在显示中, 布局与样式也要分离, 布局指的是大的框架背景, 元素的排列组合方式和定位模式, 而样式指的是子元素的颜色, 字体, 滤镜等效果.

qml mvc中正是遵循了这一原则, 因为qml本身相当于HTML与CSS的合并(甚至包括JS), 从而使得QML具有更灵活的可扩展性的同时又保证了高内聚低耦合.

个人使用感受

Model-View-Delegate这么做也是为了方便解耦，当需求变了的时候，可以用小一些的代价去适应变化。

Model有不少冗余

习惯了json的我，qml的模型不能原生支持，实在是很痛苦啊。

给一个稍微复杂的例子，看看qml的模型是怎么写的

ListModel{
        ListElement{
            name:"a"
            pics:[
                ListElement{url:"a.png"},
                ListElement{url:"b.png"}
            ]
        }
        ...
    }

是不是花了好的精力在ListElement上？用json又如何呢？

{
  "list":[{
      "name":"a",
      "attrs":[{
        "url":"a.png"
      },{
        "url":"b.png"
      }]
    }
  ]
}

是不是简洁了许多？是不是可以节省时间呢？用json去描述一个数据非常简单呢。

如何在项目中使用json呢？请参考这里

View有坑

视图中明确定义高度和宽度会有意向到不的错误哦！

没什么可说的Delegate

委托的话就跟自己写组件没什么区别。它相当于一个模板，等着模型的数据一来，就产生了非常漂亮的视图。

---------------------