QML学习【一】Basic Types

 

QML入门教程(1)

QML是什么？

QML是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子)，但又支持javacript形式的编程控制。它结合了QtDesigner UI和QtScript的优点。QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于QObject的图形对象非常不方便，只能在Qt代码中创建图形对象，然后从 QtScript中进行访问。而QML可以在脚本里创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟Qt写的C++代码进行方便的交互，使用起来非常方便。

如何使用？

在Qt C＋＋文件中通过QDeclarativeView加载，就像使用UiLoader加载.ui文件一样。不过本文不会去介绍如何在Qt C＋＋中使用QML，而是把重点放在QML的语法上，不过别担心看不到.qml文件的效果。Qt提供了一个工具QML Viewer可以查看.qml文件生成的效果，该程序在Qt的bin目录下，应用名字叫qml(Windows下叫qml.exe)。所以你在看到别人提供的.qml文件时，你可以用下面命令qml filename.qml 查看.qml的执行结果，咱们的第一个Hello,World生成界面如下

开始QML吧

上面的Hello,World源代码如下

Js代码

  1. import QtQuick 1.0
  2. Rectangle {
  3. id: page
  4. width: 500; height: 200
  5. color: "lightgray"
  6. Text {
  7. id: helloText
  8. text: "Hello world!"
  9. y: 30
  10. anchors.horizontalCenter: page.horizontalCenter
  11. font.pointSize: 24; font.bold: true
  12. }
  13. }

第1行是Qt QML的统一用法，指明当前QML会使用Qt-4.7里已经定义好的类型，比如第3行的Rectangle和第8行的Text。

第3行开始至文章结束处则定义了一个矩形的图形区域对象，第4行则申明了该矩形区域对象的id为”page”可以被其它对象识别并通过该id访问其成员属性，另外几个属性width/height/color则很好理解，语法跟CSS类似，可以写在一行中用分号”;”隔开。

第8行至第12行则是一个文本对象，看它代码的嵌套结构可以知道它是内嵌于Rectangle的。Text的属性除了anchors其它几个都能顾名思义。anchors描诉的是当前对象的位置和其它对象的相对关系，这里看到其水平中心位置在“page“的水平中心位置。如果想对anchors了解更多，请参考锚的解释。

以上就是Hello,World的全部代码，将其存为hellowordl.qml，那么只要执行qml hellowrold.qml就能看到文章前头的界面了。

更多对象？

在上面的代码中我们用到了Rectangle和Text，那么我还有哪些对象以及这些对象有哪些属性呢。那么请访问QML-Item类,Item类是QML最基础的类，通过查看它的继承类以及这些继承类可用的属性，你可以添加更多你感兴趣的内容。

QML入门教程(2)

在上一篇文章里我们使用了最基础的QML类型实现了文字Hello,World的显示。这篇文章中将会增加颜色选项面板，用户可以给 Hello,World设置不同的颜色，如下图显示

QML组件

从图中可以看到选项面板由6个颜色小块组成，它们唯一的区别就是颜色不一样。那么我们就可以用组件(Component)来实现一个颜色块，然后在需要的时候使用这个组件就可以了。组件其实和其它编程语言中的宏，函数，类，结构体等功能差不多，就是代码复用。作为程序员，我知道你懂的。组件由一个单独的QML文件名组成，文件名总是以大写字母开头，要使用该组件的时候直接使用该文件名就可以了。关于如何定义自己的组件，请访问 Defining new Components。我们为一个颜色块定义了一个Cell.qml文件，然后使用Cell作为一个去访问它。

Cell.qml的内容

Js代码

  1. import QtQuick 1.0
  2. Item {
  3. id: container
  4. property alias cellColor: rectangle.color
  5. signal clicked(color cellColor)
  6. width: 40; height: 25
  7. Rectangle {
  8. id: rectangle
  9. border.color: "white"
  10. anchors.fill: parent
  11. }
  12. MouseArea {
  13. anchors.fill: parent
  14. onClicked: container.clicked(container.cellColor)
  15. }
  16. }

挨个看代码～

Js代码

  1. Item {
  2. id: container
  3. property alias cellColor: rectangle.color
  4. signal clicked(color cellColor)
  5. width: 40; height: 25

Item是最常使用的QML类型，一般用作其它类型的容器，可以理解成最顶级的父类，功能类似于QtGui中的QWidget。用一个属性别名访问其内嵌对象rectangle的color属性。在其它文件中可以用Cell对象的cellColor获得rectangle的color值。 signal clicked(color cellColor)则为对象定义了一个信号，在代码的其它部分可以发出这个信号。

Js代码

  1. Rectangle {
  2. id: rectangle
  3. border.color: "white"
  4. anchors.fill: parent
  5. }

这一部分没有特别好说的，在Item中内嵌了一个id为rectangle白边框的矩形区域，大小占满整个Item。

Js代码

  1. MouseArea {
  2. anchors.fill: parent
  3. onClicked: container.clicked(container.cellColor)
  4. }

MouseArea则为Item增加了一块鼠标响应区，看它的anchors知道，在整个Item区域内都是鼠标活动区，都能侦听到鼠标事件。 onClicked那一行则相当于为鼠标单击事件增加了一个处理行为，这里是发出了一个clicked()的信号。这个信号正是我们在Item里定义的那 个signal。 Cell.qml写完了，再来看看程序的主文件。

 

main.qml的内容

Js代码

  1. import QtQuick 1.0
  2. Rectangle {
  3. id: page
  4. width: 500; height: 200
  5. color: "lightgray"
  6. Text {
  7. id: helloText
  8. text: "Hello world!"
  9. y: 30
  10. anchors.horizontalCenter: page.horizontalCenter
  11. font.pointSize: 24; font.bold: true
  12. }
  13. Grid {
  14. id: colorPicker
  15. x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
  16. rows: 2; columns: 3; spacing: 3
  17. Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
  18. Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
  19. Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
  20. Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
  21. Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
  22. Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
  23. }
  24. }

这里在原来的基础上增加了一个Grid网格。x坐标是4，底部挨着page的底部，所以我们看到的是在左下角。新增的6个Cell，名字和Cell.qml是一样的。通过cellColor属性将颜色传给了每个颜色块。当Cell接收到onClicked事件的时候,关联的代码回去修改Hello,World上的颜色。细心的朋友可能会注意到Cell只是定义了 clicked()的信号，并没有定义onClicked()啊，是的这就是Component的语法规则了。如果你在Cell.qml里定义的是 clicked(),那么你在main.qml中引用的时候就该用onClicked()了。

QML入门教程(3)

 

经过前面两个教程，文字也能显示，也能处理鼠标事件了，来点动画吧.

这个教程实现了当鼠标按住的时候，Hello,World从顶部到底部的一个旋转过程，并带有颜色渐变的效果。

完整的源代码main.qml

  import QtQuick 1.0

Js代码

  1. Rectangle {
  2. id: page
  3. width: 500; height: 200
  4. color: "lightgray"
  5. Text {
  6. id: helloText
  7. text: "Hello world!"
  8. y: 30
  9. anchors.horizontalCenter: page.horizontalCenter
  10. font.pointSize: 24; font.bold: true
  11. MouseArea { id: mouseArea; anchors.fill: parent }
  12. states: State {
  13. name: "down"; when: mouseArea.pressed == true
  14. PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
  15. }
  16. transitions: Transition {
  17. from: ""; to: "down"; reversible: true
  18. ParallelAnimation {
  19. NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
  20. ColorAnimation { duration: 500 }
  21. }
  22. }
  23. }
  24. Grid {
  25. id: colorPicker
  26. x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
  27. rows: 2; columns: 3; spacing: 3
  28. Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
  29. Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
  30. Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
  31. Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
  32. Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
  33. Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
  34. }
  35. }

 

除了这个main.qml之外，还有一个Cell.qml也是需要的，和教程(2)中的完全一样。下面来看一看比起教程(2)的代码增加出来的内容。

Js代码

  1. Text {
  2. ....
  3. states: State {
  4. name: "down"; when: mouseArea.pressed == true
  5. PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
  6. }
  7. transitions: Transition {
  8. from: ""; to: "down"; reversible: true
  9. ParallelAnimation {
  10. NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
  11. ColorAnimation { duration: 500 }
  12. }
  13. }
  14. .....

tates内嵌于Text之中，可以为Text元素添加多个状态，现在的这个例子只增加了一个状态。该状态的名为为”down”,然后由“when”指 定了什么时候触发这个状态。PropertyChanges则指定了哪个元素的哪些属性会发生什么样的变化。例子中PropertyChanges利用 “target”指定了id为”helloText”的元素会发生变化，包括其y,rotation,color等属性。
transitions 是用于增加动画效果的（如果把transitions这一段代码删去，Hello,World的文字也会发生变化,但是看不到中间动画渐变效果)。同样可 以看到transitions是复数形式，意味着可以添加多个动画过程。“from”和”to”指明了当前的动画作用于哪两个状态变化之间。 “from”和”to”的参数名来自于State中的”name”属性。
ParalleAnimation则指定了有多个 有多个动画并行发生。NumberAnimation用于qreal类型的属性变化,ColorAnimation则用于颜色变化。更多 Animation请在QML文档中查找”Animation and Transitions”。

More Information, please refer to to:

QML Tutorial

QML Tutorial 1 - Basic Types

QML Tutorial 2 - QML Components

QML Tutorial 3 - States and Transitions

QML Item Element

http://qimo601.iteye.com/blog/1404314

时间： 2024-11-03 03:46:57

QML学习【一】Basic Types的相关文章

[C++] Variables and Basic Types

Getting Started compile C++ program source $ g++ -o prog grog1.cc run C++ program $ ./prog The library, iostream, define four IO object: cin, cout, cerr, clog. std::cout << "hello world" << std::endl; The result of the output operato

A Tour of Go Basic types

Go's basic types are bool string int int8 int16 int32 int64 uint uint8 uint16 uint32 uint64 uintptr byte // alias for uint8 rune // alias for int32 // represents a Unicode code point float32 float64 complex64 complex128 package main import ( "fmt&quo

[GraphQL] Use GraphQL&#39;s Object Type for Basic Types

We can create the most basic components of our GraphQL Schema using GraphQL's Object Types. These types allow us to group related fields together under a specific type, such as a Video or a User, and then allows us to fetch these types when we query

[Guava学习笔记]Basic Utilities: Null, 前置条件, Object方法, 排序, 异常

我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3842433.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验. Null Guava用Optional表示可能为null的T类型引用. 创建:Optional.of(T)不接受null Optional.fromNullable(T)接受null Optional.absent() 查询:isPresent() get() or(T)如果为null则为T o

编译器重复定义错误：error C2371: &#39;SIZE&#39; : redefinition; different basic types

我们常常会定义自己工程用的数据类型,可能会与Windows的基本数据类型冲突. vs会报重复定义错误:error C2371: 'SIZE' : redefinition; different basic types 解决方法:欺骗编译器 #define SIZE wSIZE typedef long SIZE; #undef SIZE typedef int SIZE; int _tmain(int argc, _TCHAR* argv[]) { SIZE n = 0; //SIZE = in

qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）

原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516201 qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等) 本学章节笔记主要详解Item元素(上半场主要涉及anchors锚),因为所有可视化的界面元素都继承于Item,熟悉Item后,不同的继承子类,有其定制的属性(从几个到几十个不等). <Qt实用技巧:在Qt Gui程

QML学习之浅谈Window

转载地址:http://blog.csdn.net/kanchuan1905/article/details/53762788 在Qt Quick的世界里,Window对象用于创建一个与操作系统相关的顶层窗口,包含了如Text, Rectangle, Image等元素.Window还有一个派生类,即大名鼎鼎的ApplicationWindow,也可以作为QML文档的根对象.上一篇文章,我们提到的使用QQuickView加载QML的方式,顶层窗口是由QQuickView创建的. 要使用Window

QML学习心得

Qt Quick之于QML,正如Qt 之于 C++,QML是Qt中开发的一个新的语言,而Qt Quick是这个语言的一个组件库,其中包含了很多用QML写的可以现成使用的组件. QML Hello World // 导入语句部分 import QtQuick 2.4 import QtQuick.Window 2.2 //对象声明部分 Window { visible: true MainForm { anchors.fill: parent mouseArea.onClicked: { Qt.q

QML学习之Loader

main.qml ------------------------------------ import QtQuick 1.0 Item { property bool isFirst : false; width: 200 height: 200 Loader { id: pageLoader } MouseArea { anchors.fill: parent onClicked: changePage(); } function changePage() { if(isFirst) {