技术分享(四)- 从qml开始谈谈界面编程

前言

本文为之前工作中写了一些技术分享文档之一,主要是谈谈自己对界面编程的一些看看,以qml为引,结合我接触的一些其他编写界面的框架。文章为较早之前写的,如发现有引用其他文章,请告知,在文末添加引用。

qml产生的背景

从Qt4.7开始诞生,主要用于开发移动端应用,它支持触摸操作、流畅的动画效果等。从Qt5,开始Qt开始主推qml,即是希望使用qml实现移动端和PC端的统一,虽
然实际上目前还没能做到。

qml(Qt Markable Language),和html一样属于标记语言,通过Qt Quick库,整合了JavaScript的一些特性并支持JavaScript脚本,或者说是结合web前端技术
(html+css+JavaScript)的一些思路,有网页前端基础相对容易适应。

Qt Quick内部继承了google V8引擎作为qml解析器,拥有着不错的渲染速度,同时会使用到gpu进行加速,qwidget只是用到cpu。

优劣

优势:

  • QML 非常灵活,可以做出非常炫酷的效果,在动态控件较多的软件优势较大

  • QML 是标记语言,见名知意,非常容易编写和阅读,大大提高了开发和维护效
    率。

  • QML 界面简洁大气,有很多动画,适合移动端。

  • 不同平台下的 QML 使用相同的渲染机制,界面效果一致,不会随操作系统的不
    同而变化。

  • 如果多平台有包含移动端,优先考虑,一套代码即可

劣势:

  • 发展还不成熟,潜在的bug较多,容易踩坑

与QWidgets相比较?

  • 传统的以C++为基础的 Qt Widgets 项目中,控件的样式和行为比较固定,不适
    合智能手机、平板等那种富含动画效果的界面。
  • QWidgets无法做到动态修改页面,必须重新编译,qml可以,直接修改qml文
    件即可
  • QWidgets前后端分离不彻底,与C++耦合太大,而qml做了强分离。

一般界面模块的思路

(仅限于目前所接触过的一些界面框架,html,QWidgets,qml,Java swing,安卓xml)

页面组件架构

一般页面架构代码都可考虑使用如下方式,从上到下布局,最外层嵌套统一的标签用于区分所在模块位于界面的位置,常见的header,main,footer三大模块,从上到下区分里面内容所在的位置,更加方便代码阅读以及合作开发。
网页前端html

<body>
	<div class="header">
		<p>页面头部,一般为标题栏等</p>
	</div>
	
	<div class="main">
		<p>页面主体,整个页面主要展示的内容</p>
	</div>

	<div class="footer">
		<p>页脚,一般为网站相关信息展示或者友情链接</p>
	</div>
</body>

qml

Window {
	visible: true
	width: 640
	height: 480
	title: qsTr("Hello World")

	Rectangle{   
		id: header
	  	Text {
	    	text: qsTr("页面头部,一般为标题栏等")
	    } 
	}

	Rectangle{
		id: main
	 	Text {      
			text: qsTr("页面主体,整个页面主要展示的内容")
		}
	}
	 
	Rectangle{
	  	id: footer
	  	Text {
			text: qsTr("页脚")
		}
	}
}

MVC设计模式

Qt原本的设计其实就已经实现了前后端分离,因而,QWidgets和qml的可以使用这个设计模式。但QWidgets耦合性会偏高一些,一些界面逻辑需要C++实现。qml的前后端分离做的较好,能基本完成界面逻辑,复杂的数据处理直接通过接口给C++部分进行处理。

  • 定义:Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码。
  • 优点:降低代码的耦合性,提高代码的重用性,可维护性高
  • 缺点:随着项目的复杂度提升,代码会变得很臃肿、View层和Model相互耦合,不易开发和维护

MVC含义

  • Model(模型) 是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库或其他方式中存取数据。
  • View(视图) 是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。
  • Controller(控制器) 是应用程序中处理用户交互的部分。

在这里插入图片描述

通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。举个例子

在这里插入图片描述

在这个计算器程序中,外部的那些按钮和最上面的显示条,就是"视图层",那些需要运算的数字就是"数据层",执行加减乘除的那些内部运算步骤就是"控制层"。每一层
执行不同的功能,整个程序的结构非常清楚。

MVP设计模式

定义:Model-View-Presenter , 是从经典的模式MVC演变而来,它们的基本思想有相通的地方Controller/Presenter负责逻辑的

在这里插入图片描述

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值