QML基础——初识Qt Quick Designer

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

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

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

浅析Qt Quick Designer

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

浅析Qt Quick Designer

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

浅析Qt Quick Designer

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

浅析Qt Quick Designer

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

浅析Qt Quick Designer

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

浅析Qt Quick Designer

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

浅析Qt Quick Designer

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

原文地址:https://www.cnblogs.com/hicjiajia/p/2332219.html