QML官方系列教程——Using Qt Quick Designer

附网址：http://qt-project.org/doc/qtcreator-3.1/creator-using-qt-quick-designer.html

Using Qt Quick Designer —— 使用Qt Quick设计师

你可以在Qt Quick Designer可视化编辑器或者代码编辑器中编辑.qml文件。

在工程中双击一个.qml文件可以在代码编辑器中打开它，然后选择设计模式在可视化编辑器中打开它。



使用可视化编辑窗格来管理你的工程：

导航面板（1）：以树结构形式显示当前QML文件中的各个项目。

库面板（2）：显示你可以用来构建应用程序的模块：引入的或资源中的预定义的QML类型，你自己的QML组件，Qt Quick组件或是Qt Quick Controls。

画布（3）：你创造QML组件及设计应用程序的工作区域。

属性面板（4）：设置选定项目的属性，你也可以在代码编辑器中改变这些属性。

状态面板（5）：显示该项目的不同状态。QML不同状态通常伴随用户界面的不同配置，比如UI控件的属性和行为以及可用的行为的转变。

Managing Item Hierarchy

导航面板显示了当前QML文件中的各个项目以及他们的关系。（1）所有项目以树形结构被列出，顶层是他们的父对象Rectangle（2）。



你可以在导航面板选中一个项目并在属性面板中编辑它的属性。子项可以访问父项的属性。在画布中选择这个项目，右击它，然后在菜单中可以选择其父对象以及其他该位置的对象。
通常情况下，子项通常在画布中被放置在父项内。然而这并不是必须的。例如，像下面图中所示，你可能希望鼠标区域大于这个矩形或是图像。



当你复制一个对象，它所有的子对象都将被复制；当删除一个对象，它所有的子对象都将被删除。

你可以使用显示/隐藏来针对应用程序中的特别需求。点击这个图标

来改变该对象在画布上的可见性。想要改变该对象在应用程序中的可见性，可以使用属性面板中的Visibility选择框，或是Opacity的大小。如果你将Opacity设置为0，该对象将被隐藏。你也可以将它应用于动画。

像所有属性一样，可见性与透明度由父对象继承而来，想要隐藏或显示所有的子对象，应该编辑父对象的相关属性。

查看文件清单或工程，在“导航”的下拉框中选择“文件系统”、“打开文档”及“工程”。要同时查看多个内容，点击

。

Setting the Stacking Order —— 设置堆放层次

一个对象的z property决定了它与项目树中兄弟姐妹之间的层次关系。默认情况下，拥有更高z值的对象将被绘制在其他对象的上方，而相同z值的两个对象，在列表后面的被绘制在上方。

要改变一个项目的堆叠顺序，在画布上右击并选择Stack(Z)，你可以选择Raise/Lower增加或减小这个值，或选择To Front / To Back将这个对象移动到所有兄弟姐妹的前方或者后方。要重置Z属性，请选择Reset z Property。

Switching Parent Items —— 改变父对象

当你拖放一个QML类型的实例到画布上时，Qr Quick Designer会将该对象设置为当前位置下那个实例的子对象。当你在画布上移动该对象时，Qt Quick Designer不知道你是想要单纯地移动该对象还是将他们添加到新的父对象中去。因此，在这种操作下，该对象的父对象不会被改变。想要改变其父对象，请在拖放该对象前按下Shift键，在光标下最上方的组件成为该项目新的父对象。你也可以在导航面板中改变它的父对象：在项目树中拖放该对象，或使用箭头按钮来移动它在项目树中的位置。



QML Type Library

库面板使得你可以选择QML类型，UI组件，资源，以及管理你的import引入。

QML Types面板以类别分组显示：你自己的QML组件，基本类型，布局，位置类型，以及视图。

Qt Quick 1就开始为特定的移动设备平台提供的相关观感的UI组件。自Qt 5.1开始，我们可以在Qt Quick 2.1中使用一组Qt Quick Controls组件来创建经典的桌面风格的用户图形界面。Qt Quick Components和Controls都是基于标准QML类型创建而来。想要在Library库中查看components和controls，请在Imports面板中引入这些组件。



Resources面板显示了与当前QML文件在同一目录下的文件。

Specifying Item Properties —— 指定项目属性

Properties面板显示了当前项目的所有属性。这些属性由类型分组。所有QML类型上面部分的几个属性都是相同的，例如位置，尺寸和可见性等。

面板中的下半部分所对应的属性根据QML类型的不同而不同。例如：下图展示了Rectangle(1)和Text(2)分别包含的不同属性。



你可以在右击菜单中将某些属性重置为默认值。右击该对象并选择Edit > Reset Position or Reset Size来重置对象的位置与大小。选择Edit
> Visibility设置对象的可见性。

按F1来了解一个对象的更多属性信息。

Viewing Changes in Properties —— 查看属性变化

属性的默认值被显示为白色，被改变过的值以蓝色高亮显示。另外，在多个状态中被改变的属性也被蓝色高亮显示。

这样你可以很容易知道.qml文件中类型或组件的哪些属性被设置过，而哪些是默认值。

当编辑多状态时，你也可以很容易看到哪些值在当前状态被显式设置，哪些值来自基本状态。

下面这张图阐述了这一点。在基本状态中，被显式设置的Size和Colors属性的值被高亮显示。



状态1中，仅有相对于基本状态（base state）改变了的“Color”被高亮显示了。



重置一个属性集将使它返回默认值，并在.qml文件中将其值删除。

注：因此，所有的布尔值以四种不同的情况展现。

比如，visiility属性可以表现为以下形式：


TRUE —— 该类型默认可见。或由初始状态继承而来。


TRUE(高亮) —— 该类型被显式设置为可见。


FALSE —— 该类型默认不可见。或由初始状态继承而来。


FALSE(高亮) —— 该类型被显式设置为不可见。

Marking Text Items for Translation

为了支持翻译器(translators)，需要标记上每个应该被翻译的文本项目。在属性面板中的Text中，选择tr(1)。



这样文本字符串将被封闭在qsTr函数调用中去。



Loading Placeholder Data —— 加载占位符数据

Qt Quick Designer支持视图、模型和委托，因此当你添加一个网格视图、列表视图、或路径视图项目时，ListModel和委托项目也将被自动添加。

然而，应用程序中缺失的上下文（context）给Qt Quick Designer提出了一个挑战，特别是在C++中定义的模型。一般来讲，这些缺失的上下文都是些简单的属性，它们可能被定义在C++，或者QML文件中。一个典型的例子是一个组件使用了它父对象的属性，类似parent.width。

Using Dummy Models —— 使用虚拟模型

如果你在Qt Quick Designer中打开一个引用了C++模型的文件，画布上将不会显示任何东西。如果模型中的数据是从因特网获取，你将完全无法控制它。为了获取可靠的数据，需要使用到下面的dummy data。

例如，以下代码段描述了在文件example.qml中包含了一个ListView，它指定了一个C++模型。

ListView {
model: dataModel
delegate: ContactDelegate {
name: name
}
}

在工程根目录下创建一个名为dummydata的文件夹，这样不会依赖特定平台。在dummydata目录中，创建一个QML文件，命名与ListView中model一致：

qml/exampleapp/example.qml
dummydata/dataModel.qml

然后在dataModel.qml中包含虚拟数据：

import QtQuick 1.0

ListModel {
ListElement {
name: "Ariane"
}
ListElement {
name: "Bella"
}
ListElement {
name: "Corinna"
}
}

Creating Dummy Context —— 创建虚拟的上下文
下面的示例介绍了QML中一种常见的模式：

Item {
width: parent.width
height: parent.height
}

这个方式对应用程序而言很不错，但是在Qt Quick Designer中将显示一个大小为0的item。这个被打开的文件不存在父对象——由于上下文的缺失。要绕过这种缺失的情况，一个方法就是使用虚拟环境。如果你在dummydata/context目录中放置一个与应用程序同名的文件(这里是，example.qml)，你可以虚拟一个父类的背景：

import QtQuick 1.0
import QmlDesigner 1.0

DummyContextObject {
parent: Item {
width: 640
height: 300
}
}

Building Transformations on Items—— 创建项目的变换

Advanced面板允许你设置丰富的变换，例如旋转、缩放、平移。你可以为一个对象分配一个任意的变换值。每种变换将一个接一个地按顺序进行。
查看Transform来了解更多有关Transform类型的信息。

Adding States —— 添加状态
用户界面需要在不同的场景中呈现不同的界面构造，或者在用户交互时改变它的外表。通常这种情况下伴随一组同时进行的改变，这样的界面就可以被看做是从一个状态到另一个状态所发生的内部改变。
状态的改变可以屏蔽其内部的复杂性，因此通常被用作接口。例如照片浏览器可能会将图像初始化在一个网格中，当其中一个图片被点击时，程序切换到详细信息状态，这个图片被放大，而用户交互切换成提供新的参数用来进行图像编辑。换一个小规模的例子，当一个简单按钮被按下，它可以改变为被按下状态，其颜色和位置都被改变从而表现为一个被按下的样子。
在QML中，任何项目都可以在多个不同状态间进行切换以完成一组改变，这个改变需要通过修改有关项目的属性来实现。每一个状态都提出一个不同配置，例如：
· 展示某些UI组件并隐藏另一些。
· 向用户展示不同的可用响应。
· 开始，停止和暂停动画。
· 在新的状态执行某些需要执行的脚本。
· 改变一个特定项目的属性值。
· 展示另一个视景。

Qt Quick Designer中的State面板展示了组件的不同状态。



点击其中的空格来添加状态，然后在编辑器中修改新的状态。例如，要改变一个按钮的外观，你可以隐藏这个按钮并在它的位置上显示另一张图片。或者，你可以在不同的状态间改变一个对象在画布上的位置，然后为其添加动画，这样来达到动态显示的效果。
你可以通过点击State面板中的每个状态以在画布上面查看它们。
查看Creating Screens来获取更多信息。
如果你为多个状态添加了动画，可以通过运行这个应用程序来进行测试。
查看Animating Screens来获取更多信息。

Working with QML Types on Canvas
通过放置项目在画布上来设计你的应用程序。

Snapping to Parent and Sibling Items—— 捕捉父对象与兄弟姐妹
当你进行设计时，你可以使用捕捉(snapping)来对画布上的项目进行布局。点击

按钮使组件捕捉它们的父对象或同辈对象。拖拽时弹线(snapping lines)会自动出现来帮助你进行布局。点击

按钮捕捉它们的父对象或同辈对象，不同时是在代码中会生成anchor代码。
下面这张图显示了当Parent item padding设置为5像素时的捕捉线。



Hiding Item Boundaries —— 隐藏组件边界
Qt Quick Designer会在画布上显示组件的边界。要隐藏边界，点击

按钮。

Selecting Items —— 选择组件
当使用鼠标选择重叠的组件时，默认最上层的组件将被选中。然而，有些组件不含任何内容，比如MouseArea，它通常位于包含内容的组件的上层，比如Rectangles或者border images。要默认仅选中有内容的组件，可以点击

按钮。

Previewing Component Size —— 预览组件尺寸
根对象的宽高决定了组件的尺寸。你可以复用这个组件，类似buttons，在不同的设备配置、屏幕分辨率、屏幕方向上需要有不同的尺寸。但如果它最终大小由属性绑定决定，其尺寸可能变为零(0,0)。
为了试验不同组件尺寸，在画布的工具栏上输入Height和Width(1)的数值。其改变被应用到状态面板(2)及画布(3)上，但属性的值并未在QML文件中被永久性改变。你可以在属性面板中永久性改变这个属性值。

Specifying Canvas Size —— 指定画布尺寸
要改变画布尺寸，选择Tools > Options > Qt Quick > Qt Quick Designer并在Canvas组指定画布宽高。

Refreshing the Canvas —— 刷新画布
当使用Qt Quick Designer打开一个QML文件时，文件中的组件将被绘制在画布上。当你在Qt Quick Designer中编辑这些项目的属性，QML文件与画布中的图像可能不会同步更新。例如，当你改变一个项目的行列位置时，新的位置可能没有在画布上正确显示。
要刷新画布中的图像，按下 R 键或选择

(Reset View)。

Creating Qt Quick Projects Creating Components