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

Using Qt Quick Designer

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

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

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

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

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

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

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

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

Managing Item Hierarchy

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

你可以使用显示/隐藏来针对应用程序中的特别需求。点击这个图标来改变该对象在画布上的可见性。想要改变该对象在应用程序中的可见性，可以使用属性面板中的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
    }
}

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

import QtQuick 1.0

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

下面的示例介绍了QML中一种常见的模式：

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

import QtQuick 1.0
import QmlDesigner 1.0

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

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

当你进行设计时，你可以使用捕捉(snapping)来对画布上的项目进行布局。点击按钮使组件捕捉它们的父对象或同辈对象。拖拽时弹线(snapping lines)会自动出现来帮助你进行布局。点击按钮捕捉它们的父对象或同辈对象，不同时是在代码中会生成anchor代码。

Qt Quick Designer会在画布上显示组件的边界。要隐藏边界，点击按钮。

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

要刷新画布中的图像，按下 R 键或选择(Reset View)。