聊聊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

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android drawable微技巧,你所不知道的drawable的那些细节

好像有挺久时间没更新博客了,最近我为了准备下一个系列的博客,也是花了很长的时间研读源码。很遗憾的是,下一个系列的博客我可能还要再过一段时间才能写出来,那么为了不...

2508
来自专栏Java后端技术

CSS设置超出指定宽度自动换行

  最近项目中有用到在div中显示用户反馈的信息,是指定宽度的div,超出要自动换行,开始写好后感觉应该没什么问题,后来自己随便输入测试数据的时候发现:如果是纯...

1142
来自专栏潇涧技术专栏

Ways to Use Icons on Android (1)

最近对IconFont特别感兴趣,通过使用IconFont一些常见的制作精良的小图标就可以直接在代码中非常方便的使用,免去了找图标并添加到项目中的很多麻烦。本系...

652
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

99511
来自专栏我和未来有约会

Silverlight SEO优化

Silverlight SEO优化 SEO优化 2008年10月份,微软发布了针对Silverlight应用程序进行搜索引擎优化的指导文档,该文档描述了对Si...

2015
来自专栏BestSDK

原型设计神器——格式刷

就格式刷的易用性来说,不可否认的是,MS Office中word的格式刷给用户的使用习惯造成了深远而难以磨灭的影响。我们希望在使用格式刷时能看见真实的“刷子”,...

3846
来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

2283
来自专栏开源项目

绝对想尝试的创意 Android 库,你关注了吗?| 码云周刊第 43 期

码云项目推荐 随着 Android 开发走向成熟,每天都会涌现出各种各样与 Android 相关的开发工具,但是我们每天使用的各类库总是不可或缺的。这里,小...

4219
来自专栏vue学习

25、商品详情页

(1)复制一份test.vue文件并重命名为goodsDetail作为我们的商品详情页面

5435
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标

我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美。 ? 皮肤颜色来源于AdminLTE系统。我的颜色全部都这里取的。,所以一共取...

4165

扫码关注云+社区

领取腾讯云代金券