自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

  1. import QtQuick 2.0
  2. import QtQuick.Window 2.0
  3.  
  4. Window {
  5. id:root;
  6. visible: true;
  7. width:;
  8. height:;
  9.  
  10. Image {
  11. id: bg
  12.  
  13. width: root.width;
  14. height:root.height;
  15. source: "qrc:///images/bg.png";// 路径根据自己设置的修改
  16. }
  17.  
  18. Image {
  19. id: wheel;
  20. anchors.centerIn: parent;
  21. source: "qrc:///images/wheel.png";// 路径根据自己设置的修改
  22.  
  23. Behavior on rotation {
  24.  
  25. NumberAnimation {
  26. duration: 5000
  27. }
  28. }
  29.  
  30. MouseArea {
  31. width: wheel.width;
  32. height: wheel.height;
  33.  
  34. onClicked: {
  35. wheel.rotation = 360;
  36. }
  37. }
  38. }
  39.  
  40. }

运行,是不是一个漂亮的窗口程序出现在了眼前呢?点击中间的风车就会转起来。

源代码下载:http://download.csdn.net/detail/csulennon/8670283

在接下来的文章中会介绍QML的基本语法。

从头学Qt Quick(1) --体验快速构建动态效果界面的更多相关文章

  1. 从头学Qt Quick(3)-- 用QML写一个简单的颜色选择器

    先看一下效果图: 实现功能:点击不同的色块可以改变文字的颜色. 实现步骤: 一.创建一个默认的Qt Quick工程: 二.添加文件Cell.qml 这一步主要是为了实现一个自定义的组件,这个组件就是我 ...

  2. 从头学Qt Quick(2)-- QML语法从一个简单的例子说起

    在上一篇文章中,我们对QtQuick做了简单的介绍,体验了使用QML语言构建一个UI的便捷.这里我们简要介绍一下QML的语法. QML将界面分成一些更小的元素,这些元素可以组成一个组件,QML语言描述 ...

  3. 从头学Qt Quick系列

    http://www.cnblogs.com/csulennon/category/686605.html

  4. UIkit – 轻量级前端框架,帮助你快速构建 Web 界面

    UIKit 是一个轻量级,模块化的前端框架,用于构建快速和强大的 Web 界面.UIKit 为您提供了 HTML,CSS 和 JavaScirpt 组件,使用简单,容易定制和扩展.UIKit 基于 L ...

  5. 快速构建App界面的框架(●'◡'●) -----SalutJs

    前言 卤煮在公司之初接触到的是一个微信APP应用.前端技术采用的是Backbone+zepto等小型JS类库.在项目开发之初,这类中小型的项目采用这两种库可以满足基本的需求.然而,随着迭代的更新和业务 ...

  6. [转]快速构建App界面的框架(●'◡'●) -----SalutJs

    前言 卤煮在公司之初接触到的是一个微信APP应用.前端技术采用的是Backbone+zepto等小型JS类库.在项目开发之初,这类中小型的项目采用这两种库可以满足基本的需求.然而,随着迭代的更新和业务 ...

  7. Qt Quick 基本元素初体验

    Qt Quick 作为 QML 语言的标准库,提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用,这节我们简要地介绍一些 Qt Quick 元素. 一. 基本可视化项 1.1 Item I ...

  8. [Qt Quick入门] 基本元素初体验

    Qt Quick作为QML语言的标准库,提供了很多基本元素和控件来帮助我们构建Qt Quick应用.这节我们简要地介绍一些Qt Quick元素,如Rectangle.Item.Text.Button. ...

  9. 浏览器上的Qt Quick

    你想不想在浏览器上运行你的Qt Quick程序呢?在Qt 5.12之前,唯一的方法是使用Qt WebGL Streaming技术把界面镜像到浏览器上.但该方法有不少缺陷,下文会说.前不久随着Qt 5. ...

随机推荐

  1. iOS开发---集成百度地图

    由于iOS MapKit框架很多情况并不能满足我们的需求,我们可以选择集成百度地图,那该如何操作呢? 申请Key 登录百度API管理中心申请Key http://lbsyun.baidu.com/ap ...

  2. java获取静态页面内容

    package collection_map; import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.F ...

  3. 分析system_call中断处理过程

    分析system_call中断处理过程 上周我们使用gcc内嵌汇编调用系统调用,这次我们具体分析下过程. 将getpid嵌入menuos 代码从github下载,步骤如下: 1. 增加一个函数,get ...

  4. PHP中常用的正则表达式由哪些元素构成?

    在程序开发中,我们常常要用到正则表达式,对于新手来说,很多时候知道正则表达式是怎么回事,但当真正需要使用的时候,却不知该用什么函数,具体的修饰符也比较混乱.下面小编就为大家整理了一些php正则表达式中 ...

  5. Android Studio no debuggable applications解决方案2

    android studio 默认是没有开启debuggable 功能的,在tools里打开该功能即可,Tools->Android->Enable ADB Integration. 刚设 ...

  6. 无线电源传输 Wireless Power Consortium (WPC) Communication

    Universally Compatible Wireless Power Using the Qi Protocol Wireless charging of portable electronic ...

  7. css3动画特效:纯css3制作win8加载动画特效

    Windows 8     完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下:   css特效代码: <style type="text/css"> ...

  8. Android酷炫实用的开源框架——UI框架(转)

    转载别人整理好的文章,列出了很多炫酷的UI开源设计 原文地址:http://www.androidchina.net/1992.html 1.Side-Menu.Android分类侧滑菜单,Yalan ...

  9. Javascript - 栈 和 单链表

    最近在重温数据结构,于是写了一些代码玩玩,都是很初级的,表喷各位.... function Stack() { this.dataStore = []; this.top = 0; } Stack.p ...

  10. 小试ijkplayer编译

    同步发表于 http://avenwu.net/ijkplayer/2015/05/07/hands_on_ijkplayer_preparation 谈到视频播放大家都知道ffmpeg,基于其的衍生 ...