QML基础——初识Qt Quick Designer

在对Qt Quick和QML有了一些了解后，现在我们来熟悉一下这个全新的Qt Quick Designer界面。

在这一篇中我们会用一个例子来介绍一下Qt Quick Designer界面，但是不会对代码进行过多的讲解。到下一篇我们讲解QML组件时会对这个程序生成的代码进行逐行讲解，再往后的几篇，我们就会对Qt Quick中的几个特色功能进行举例讲解，而在讲解例子的同时，我们也会将QML语言的讲述加入其中。我们会在完成几个实例的同时掌握QML语言。

我们新建一个Qt QML Application，我这里的工程名为“helloWorld”。

这是整个Qt Quick Designer界面，它由几个面板组成，下面分别进行介绍。

主设计面板，也就是我们下面所说的场景。这是我们的主设计区，所有的项目都要放到这里，当程序执行时，就是显示的这个面板上的内容。

Navigator导航器面板。场景中所有的项目都在这里列出。在这里，我们可以选中一个特定的项目，那么场景中对应的项目也会被选中，我们也可以在这里拖拽项目来更改它们的从属关系，或者点击项目后面的“眼睛”图标来设置它是否可以显示。

Properties属性面板。在这里我们可以设置项目的属性。比如项目名称，填充颜色，边框颜色，项目大小和位置，以及项目的缩放，旋转和不透明度等。

Library库面板。在这里提供了一些常用的部件，我们可以将它们拖放到场景中来使用。在Resources子面板中，我们可以看到我们工程文件夹下的图片等资源，我们也可以将它们拖拽到场景中直接使用。当我们以后新建了组件后，它也会出现在Library中。

状态面板。这里可以为场景新建或删除一个状态。

设计模式和代码编辑模式的转换，我们可以点击“Edit”图标进入代码编辑界面。