从头学Qt Quick(1) --体验快速构建动态效果界面
自2005年Qt4发布以来,Qt已经为成千上万的应用程序提供了框架服务,现在Qt已经基本上支持所有的开发平台了,这里面既包含了桌面、嵌入式领域,也包括了Android、IOS、WP等移动操作平台,甚至支持最新的Ubuntu Phone。
Qt Quick是一个UI技术组,Qt Quick本身主要包含了QML、JavaScript、 Qt C++三种技术。其中的主角就是QML(Qt Declarative Module)也是我打算在这个系列里面描述的主要对象。QML的主要作用我理解就是将界面设计与程序逻辑解耦,通常来说前端需求的变动远超过后台逻辑,因此界面与逻辑分离不仅有利于开发人员之间的分工,也提供了更快速的迭代速度的可能性,也会大大降低程序的后期维护成本。
这套技术的主要框架如下
QML是一种简单的脚本语言,语法和CSS比较接近,因此学起来相当简单。QML最早出现是在Qt4.7版本中,从4.x过度到5.x算起来一共经过了十年的时间。最新的QML相对于4.x时代的QML有了很大的改进(下面列举都是Qt Quick 2.0的特性):
(1)基于OpenGL(ES)的场景实现,提高图形绘制的效率。
(2)QML和JavaScript主导UI的创建,后台图形绘制采用C++。高效,灵活,可扩展性强。
(3)跨平台:这里不能说是完整意义上的跨平台,这里的跨平台是指编译的跨平台“一次编写,到处编译”
这里我们首先创建一个简单的Qt Quick应用,对QML有一个初步的印象。
我们的目标是要创建一个鼠标点击风车图片后能在屏幕上转起来的程序,下面的代码可以随便看一下,看不懂没关系,按照我给出的步骤做出来体验一下就行。
新建一个QtQuick工程:
选择Qt Quick2.x
创建完了大概是这个样子,点那个绿色的按钮就会出现一个简单的窗口:
将两张图片素材放到工程的目录下
将资源添加到Qt工程去,首先 创建一个资源前缀:
将两张图片加进去
编辑main.qml
import QtQuick 2.0
import QtQuick.Window 2.0 Window {
id:root;
visible: true;
width:;
height:; Image {
id: bg width: root.width;
height:root.height;
source: "qrc:///images/bg.png";// 路径根据自己设置的修改
} Image {
id: wheel;
anchors.centerIn: parent;
source: "qrc:///images/wheel.png";// 路径根据自己设置的修改 Behavior on rotation { NumberAnimation {
duration: 5000
}
} MouseArea {
width: wheel.width;
height: wheel.height; onClicked: {
wheel.rotation = 360;
}
}
} }
运行,是不是一个漂亮的窗口程序出现在了眼前呢?点击中间的风车就会转起来。
源代码下载:http://download.csdn.net/detail/csulennon/8670283
在接下来的文章中会介绍QML的基本语法。
从头学Qt Quick(1) --体验快速构建动态效果界面的更多相关文章
- 从头学Qt Quick(3)-- 用QML写一个简单的颜色选择器
先看一下效果图: 实现功能:点击不同的色块可以改变文字的颜色. 实现步骤: 一.创建一个默认的Qt Quick工程: 二.添加文件Cell.qml 这一步主要是为了实现一个自定义的组件,这个组件就是我 ...
- 从头学Qt Quick(2)-- QML语法从一个简单的例子说起
在上一篇文章中,我们对QtQuick做了简单的介绍,体验了使用QML语言构建一个UI的便捷.这里我们简要介绍一下QML的语法. QML将界面分成一些更小的元素,这些元素可以组成一个组件,QML语言描述 ...
- 从头学Qt Quick系列
http://www.cnblogs.com/csulennon/category/686605.html
- UIkit – 轻量级前端框架,帮助你快速构建 Web 界面
UIKit 是一个轻量级,模块化的前端框架,用于构建快速和强大的 Web 界面.UIKit 为您提供了 HTML,CSS 和 JavaScirpt 组件,使用简单,容易定制和扩展.UIKit 基于 L ...
- 快速构建App界面的框架(●'◡'●) -----SalutJs
前言 卤煮在公司之初接触到的是一个微信APP应用.前端技术采用的是Backbone+zepto等小型JS类库.在项目开发之初,这类中小型的项目采用这两种库可以满足基本的需求.然而,随着迭代的更新和业务 ...
- [转]快速构建App界面的框架(●'◡'●) -----SalutJs
前言 卤煮在公司之初接触到的是一个微信APP应用.前端技术采用的是Backbone+zepto等小型JS类库.在项目开发之初,这类中小型的项目采用这两种库可以满足基本的需求.然而,随着迭代的更新和业务 ...
- Qt Quick 基本元素初体验
Qt Quick 作为 QML 语言的标准库,提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用,这节我们简要地介绍一些 Qt Quick 元素. 一. 基本可视化项 1.1 Item I ...
- [Qt Quick入门] 基本元素初体验
Qt Quick作为QML语言的标准库,提供了很多基本元素和控件来帮助我们构建Qt Quick应用.这节我们简要地介绍一些Qt Quick元素,如Rectangle.Item.Text.Button. ...
- 浏览器上的Qt Quick
你想不想在浏览器上运行你的Qt Quick程序呢?在Qt 5.12之前,唯一的方法是使用Qt WebGL Streaming技术把界面镜像到浏览器上.但该方法有不少缺陷,下文会说.前不久随着Qt 5. ...
随机推荐
- MySql的基本操作以及以后开发经常使用的常用指令
第一章:数据类型和操作数据表MySQL语句的规范(1):关键字与函数名称全部大写(2):数据库名称,表名称,字段名称全部小写(3):SQL语句必须以分号结尾 1:命令行模式启动mysql服务net s ...
- 微信小程序笔记(二)
微信小程序环境搭建与开发工具介绍 2-1 开篇介绍及下载工具 1.开发工具下载地址: http://t.cn/RVKH0HS 2.下载安装对应版本:win32,win64,mac; 2-2 小程序 ...
- javaweb学习总结(二十)——JavaBean总结
一.什么是JavaBean JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方法 ...
- LDR 和 ADR 彻底详解
0.什么是位指令? 答:伪指令(Pseudo instruction)是用于告诉汇编程序如何进行汇编的指令.它既不控制机器的操作也不被汇编成机器代码, 只能为汇编程序所识别并指导汇编如何进行. 1.L ...
- Android BitmapShader 实战 实现圆形、圆角图片
转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...
- Unity3D编程学习分享
学习地址:http://www.ixueyun.com/lessons/detail-lessonId-692.html 一.课程概述: 以前大部分3D游戏出现在pc和ps.XBox等专业游戏主机上, ...
- [原创]软件质量保证圈QQ群:197915314
[原创]软件质量保证圈QQ群:197915314 软件质量保证圈QQ群:197915314,讨论软件工程.软件过程改进.软件质量保证等(非测试群)! 欢迎各位同学来,来时请自报家门,名片修改格式:sh ...
- 如何在安装程序中判断操作系统是否是64位 inno
[Setup]; 开启64位模式ArchitecturesInstallIn64BitMode=x64 [Run] ;根据是否是64位进行不同的操作Filename: "..."; ...
- iOS-OC-APP热更新,动态更新(仿QQ打开或关闭某个功能)
一.前言 iOS开发更新APP我觉得是比较坑的就是审核时间比较长,审核比较严,对于刚入行的小伙伴来说,雷区比较多:所以热更新是比较重要的: 大家也许会发现我们常用的QQ现在下来也就一百多兆,但是用了几 ...
- VS SuppressMessage忽略特定方法的警告信息
VS在编译源码的时候有很多警告信息,有些时候 我们需要忽略一个特定方法的特定警告信息,于是就用SuppressMessage特性,可是这个特性的参数不太好搞定,还好有VS,Suppressing Co ...