1.代码解释和代码规范

以上是一段简单qml代码,下面逐个解释各行代码的用处

import QtQuick 2.15
import QtQuick.Window 2.15

第一行和第二行是导入了QtQuick库和QtQuick.Window库 它们都将使用2.15 的版本,对应的qt版本(5.15)

以下来自Qt官方对QtQuick的说明,因为QtQuick 提供了QML引擎和语言基础结构所以在qml代码中必须添加该库

• The Qt Quick module provides graphical primitive types. These types are only available in a QML document if that document imports the QtQuick namespace.The current version of the QtQuick module is version 15, and thus it may be imported via the following statement: import QtQuick 2.15

• 以下为上行翻译:

• Qt Quick模块提供图形原语类型。这些类型仅在导入QtQuick名称空间的QML文档中才可使用。QtQuick模块的当前版本是版本15，因此可以通过以下语句导入: import QtQuick 2.15

而QtQuick.Window则是给我们提供顶级窗口的库,新建好工程后默认会使用其中的Window组件,后期将会介绍其他的窗口组件

在qml的编写中 生成对象需要在类名后面用大括号{和} 才能实例化,然后所有的属性需写在大括号内,属性和属性绑定的值要用: 隔开, 每个生成的对象都可以设置一个独一无二id名称 如下

在qml中当然也可以嵌套对象,嵌套对象后对象之间将成为父子对象,例如下代码.rect_2将成为rect_1的子对象,显示画面中ret_2也将在rect_1里面

2.锚点布局

在上一章创建工程的时候我们用了以下代码

其中我们建立了一个矩形对象,并对它使用了锚点,接下来我们来讲下什么是锚点.**

官方对锚点的说明如下锚提供了一种通过指定项与其他项的关系来定位项的方法。, 个人理解锚点就像船锚,你可以用锚点将任意一个可视对象固定四边和居中.或单独固定某一边.未看出差别我们先修改下矩形代码

设置左描点

可以看到我们的矩形的左边已经和主窗口的左边绑定到了一起即使拉伸我们的窗口也始终绑定,有一点要注意下锚点的优先级大于x,y属性设置了瞄点后我们的x属性就失效了

接着我们在设置右锚点

以此类推若我们将四个边都绑定了主窗口的四个边,那也就实现了填充

当然,对于完全填充,可以直接使用 anchors.fill进行绑定,即可实现填充!当然除了四边固定,锚点还可以进行水平居中和垂直居中,为看出差别我们先修改下代码

接下来设置水平居中

当然如果想快速进行水平和垂直的居中也可以用anchors.centerIn: parent来快速进行居中**

常用瞄点总结

上述内容没提到过的有四个边的页边距设置,和居中的偏移下面进行示范

由此可见页边距的作用了,接下来是水平居中偏移如下

由此可见,蓝色矩形向右偏移了100,所以horizontalCenterOffset 正数将会向右偏移,负数将会向左偏移!

垂直中心偏移如下

可以得出结论

水平偏移正数向右偏移,负数向左偏移.

垂直偏移正数向下偏移,负数向左偏移.