专栏首页Web行业观察聊聊QML中的MVC文化
原创

聊聊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 条评论
登录 后参与评论

相关文章

  • MySQL向MongoDB的妥协之JSON

    MySQL在5.7.8版本中增加了对json数据的支持,而不再是需要使用字符串形式进行存储。下面简单介绍下MySQL对json的操作:

    Jean
  • 从JSON进化到BSON

    自从MEAN引导的JSON数据格式取代传统JAVA推崇的XML以后, json的发展却停滞不前了, 当然这是好事, 因为稳定的结构是不需要向下兼...

    Jean
  • 你所不知道的ndJSON:序列化与管道流

    一直以为对JSON所有的语法都了如指掌,毕竟json的标准用一只手都数的过来,直到我发现了一个叫ndJSON的标准,简单说,以下2种语法都是合法的:

    Jean
  • python中报错"json.decod

    在学习python语言中用json库解析网络数据时,我遇到了两个编译错误:json.decoder.JSONDecodeError: Expecting pro...

    py3study
  • 170多万篇论文,存储量达1.1 TB,Kaggle上线arXiv完整数据集

    众所周知,arXiv 是我们搜索、浏览和下载学术论文的重要工具。近 30 年来,arXiv 为公众和研究社区提供了开放获取学术论文的服务。这些论文涉及物理学的庞...

    机器之心
  • ubuntu上安装scrapy框架

    Scrapy的安装有多种方式,它支持Python2.7版本及以上或Python3.3版本及以上, scrapy的依赖库比较多,而且各个平台的都不一样,这里我只介...

    kevinfaith
  • 玩机器学习,再也不缺数据集了

    众所周知,arXiv 是我们搜索、浏览和下载学术论文的重要工具。近 30 年来,arXiv 为公众和研究社区提供了开放获取学术论文的服务。这些论文涉及物理学的庞...

    龙哥
  • 玩机器学习,再也不缺数据集了

    众所周知,arXiv 是我们搜索、浏览和下载学术论文的重要工具。近 30 年来,arXiv 为公众和研究社区提供了开放获取学术论文的服务。这些论文涉及物理学的庞...

    统计学家
  • PHP使用Http Post请求发送Json对象数据代码解析

    因项目的需要,PHP调用第三方 Java/.Net 写好的 Restful Api,其中有些接口,需要 在发送 POST 请求时,传入对象。

    砸漏
  • 前端测试题:Generator函数的yield关键字的作用是?

    Generator 函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用 Generator 函数后,该函数并不执行,返回的也不是函数运...

    舒克

扫码关注云+社区

领取腾讯云代金券