QML官方系列教程——First Steps with QML

文章出处：http://blog.csdn.net/cloud_castle/article/details/28442735#t0

 

附网址：http://qt-project.org/doc/qt-5/qmlfirststeps.html


Creating a QML Document —— 创建一个QML文件

一个QML文件定义了对象的层次结构：具有高度可读的，结构化的布局。每个QML文件由两部分组成：一个引入(import)部分，以及一个对象声明(declaration)部分。用户界面中最常用的的类型(types)和功能由引入QtQuick提供。


Importing and Using the QtQuick Module —— 引入和使用QtQuick模块

为了使用Qt Quick组件，一个QML文件需要引入QtQuick。引入语法类似如下：

 

[php] view plain copy
  1. import QtQuick 2.0  

现在Qt Quick提供的类型和功能可以被用在这个QML文件里了~

Defining an Object Hierarchy —— 定义一个对象的层次结构

QML文件中的对象声明定义了对象在视景中的显示样式。Qt Quick提供了用于构建所有用户界面的基本构建块，例如显示图像或者文本、或是处理用户输入的对象等。

一个简单对象声明可以是一个中心带有文本的彩色的矩形框：

[javascript] view plain copy
  1. Rectangle {    
  2.     width: 200    
  3.     height: 100    
  4.     color: "red"    
  5.     
  6.     Text {    
  7.         anchors.centerIn: parent    
  8.         text: "Hello, World!"    
  9.     }    
  10. }  

这里定义了一个对象层次：根对象为Rectangle，它拥有一个孩子Text对象。Text对象的父对象被自动设置为这个Rectangle，类似地，Text对象被添加到这个Rectangle对象的子对象属性中。该工作由QML完成。


Putting it All Together —— 放在一起

上面例子中的Rectangle和Text类型都是由引入的QtQuick提供的。将引入语句和对象声明放在一起，我们就得到了一个完整的QML文件：

 

[plain] view plain copy
  1. import QtQuick 2.0  
  2.   
  3. Rectangle {  
  4.     width: 200  
  5.     height: 100  
  6.     color: "red"  
  7.   
  8.     Text {  
  9.         anchors.centerIn: parent  
  10.         text: "Hello, World!"  
  11.     }  
  12. }  

如果我们可以保存这个文件为"HelloWorld.qml"，然后加载并显示它。

Loading and Displaying the QML Document —— 加载和显示QML文档

为了显示这个QML文档定义的图形界面，可以使用qmlscene工具加载它。qmlscene工具安装在Qt的安装目录中。假设Qt的二进制文件被安装在系统可执行路径，你可以使用以下的命令显示这个QML文档：

 

[plain] view plain copy
  1. qmlscene HelloWorld.qml  

你将看到文本"Hello, World"在一个红色矩形的中心。

Handling User Input —— 处理用户输入

一个使用QML定义用户界面的很大优点是，它允许用户界面设计师利用简单的JavaScript表达式来决定应用程序该如何对事件作出响应。在QML中，我们将这些事件作为signals；而这些信号则被signal handlers进行处理。

举例来说，考虑下面这个例子：

 

[ruby] view plain copy
  1. import QtQuick 2.0  
  2.   
  3. Rectangle {  
  4.     width: 200  
  5.     height: 100  
  6.     color: "red"  
  7.   
  8.     Text {  
  9.         anchors.centerIn: parent  
  10.         text: "Hello, World!"  
  11.     }  
  12.   
  13.     MouseArea {  
  14.         anchors.fill: parent  
  15.         onClicked: parent.color = "blue"  
  16.     }  
  17. }  

这个例子可以被保存为"ClickableHelloWorld.qml"并在qmlscene中运行。无论用户点击这个窗口的什么地方，这个矩形都将由红色变成蓝色。注意这个MouseArea类型在触摸事件发生时也会发出clicked信号，因此这段代码可以同样工作在移动设备上。

用户的键盘输入也能被类似的处理通过一段简单的表达式：

 

[python] view plain copy
  1. import QtQuick 2.0  
  2.   
  3. Rectangle {  
  4.     width: 200  
  5.     height: 100  
  6.     color: "red"  
  7.   
  8.     Text {  
  9.         anchors.centerIn: parent  
  10.         text: "Hello, World!"  
  11.     }  
  12.   
  13.     focus: true  
  14.     Keys.onPressed: {  
  15.         if (event.key == Qt.Key_Return) {  
  16.             color = "blue";  
  17.             event.accepted = true;  
  18.         }  
  19.     }  
  20. }  

通过接受焦点，无论何时返回键按下，矩形框的颜色都将被改变成蓝色。

Property Bindings —— 属性绑定

对象和它们的属性来源于QML文件对图形界面定义的定义。QML语言允许属性通过多种方式互相绑定。从而创造高动态性的用户界面。

在下面的例子中，每个子Rectangle的几何属性都被绑定到父Rectangle上。如果父Rectangle的几何形状改变，由于属性绑定，每个孩子的几何形状也都会自动更新。

Animations —— 动画

属性也可以通过动画动态更新。QtQuick提供了多种动画类型，可以用来动态地改变一个属性的值。在下面的例子中，我们设置了一个动态的属性，并且在Text区域中进行显示

 

[html] view plain copy
  1. import QtQuick 2.0  
  2.   
  3. Rectangle {  
  4.     color: "lightgray"  
  5.     width: 200  
  6.     height: 200  
  7.   
  8.     property int animatedValue: 0  
  9.     SequentialAnimation on animatedValue {  
  10.         loops: Animation.Infinite  
  11.         PropertyAnimation { to: 150; duration: 1000 }  
  12.         PropertyAnimation { to: 0; duration: 1000 }  
  13.     }  
  14.   
  15.     Text {  
  16.         anchors.centerIn: parent  
  17.         text: animatedValue  
  18.     }  
  19. }  

所显示的值将在0到150之间周期地变化。


Defining Custom QML Types for Re-use —— 定义可复用的自定义QML类型

在QML中最重要的概念之一就是类型的复用。一个应用程序可能含有多个相同的可视类型(例如，多个按钮)，同时QML允许这类事物被定义为可复用的、定制的类型，以减小代码重复性并提高可读性。

例如，想象下开发者在Button.qml文件中定义了一个新的按钮类型：

 

[objc] view plain copy
  1. // Button.qml  
  2. import QtQuick 2.0  
  3.   
  4. Rectangle {  
  5.     width: 100; height: 100  
  6.     color: "red"  
  7.   
  8.     MouseArea {  
  9.         anchors.fill: parent  
  10.         onClicked: console.log("Button clicked!")  
  11.     }  
  12. }  

这个类型可能在应用程序中被复用多次，像下面这样：

 

[css] view plain copy
  1. // application.qml  
  2. import QtQuick 2.0  
  3.   
  4. Column {  
  5.     Button { width: 50; height: 50 }  
  6.     Button { x: 50; width: 100; height: 50; color: "blue" }  
  7.     Button { width: 50; height: 50; radius: 8 }  
  8. }  


在这种方式下，模块化的用户界面类型就可以在应用程序中被组装和复用了。

参考QML Object Attributes来获取关于如何开发你自己的可复用组件的更多信息。

Where to Go from Here —— 接下来的旅程

现在你已经看到了QML的响应机制，是时候开始你的下一步了。以下页面将在你与QML的旅程中引导下你。

QML Applications

posted @ 2017-08-11 16:26  zxx_0727  阅读(709)  评论(0)  编辑  收藏  举报