1.代碼解釋和代碼規(guī)范

以上是一段簡單qml代碼,下面逐個解釋各行代碼的用處

import QtQuick 2.15
import QtQuick.Window 2.15

第一行和第二行是導(dǎo)入了QtQuick庫和QtQuick.Window庫 它們都將使用2.15 的版本,對應(yīng)的qt版本(5.15)

以下來自Qt官方對QtQuick的說明,因?yàn)?code>QtQuick 提供了QML引擎和語言基礎(chǔ)結(jié)構(gòu)所以在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模塊提供圖形原語類型。這些類型僅在導(dǎo)入QtQuick名稱空間的QML文檔中才可使用。QtQuick模塊的當(dāng)前版本是版本15，因此可以通過以下語句導(dǎo)入: import QtQuick 2.15

而QtQuick.Window則是給我們提供頂級窗口的庫,新建好工程后默認(rèn)會使用其中的Window組件,后期將會介紹其他的窗口組件

在qml的編寫中 生成對象需要在類名后面用大括號{和} 才能實(shí)例化,然后所有的屬性需寫在大括號內(nèi),屬性和屬性綁定的值要用: 隔開, 每個生成的對象都可以設(shè)置一個獨(dú)一無二id名稱 如下

在qml中當(dāng)然也可以嵌套對象,嵌套對象后對象之間將成為父子對象,例如下代碼.rect_2將成為rect_1的子對象,顯示畫面中ret_2也將在rect_1里面

2.錨點(diǎn)布局

在上一章創(chuàng)建工程的時候我們用了以下代碼

其中我們建立了一個矩形對象,并對它使用了錨點(diǎn),接下來我們來講下什么是錨點(diǎn).**

官方對錨點(diǎn)的說明如下錨提供了一種通過指定項(xiàng)與其他項(xiàng)的關(guān)系來定位項(xiàng)的方法。, 個人理解錨點(diǎn)就像船錨,你可以用錨點(diǎn)將任意一個可視對象固定四邊和居中.或單獨(dú)固定某一邊.未看出差別我們先修改下矩形代碼

設(shè)置左描點(diǎn)

可以看到我們的矩形的左邊已經(jīng)和主窗口的左邊綁定到了一起即使拉伸我們的窗口也始終綁定,有一點(diǎn)要注意下錨點(diǎn)的優(yōu)先級大于x,y屬性設(shè)置了瞄點(diǎn)后我們的x屬性就失效了

接著我們在設(shè)置右錨點(diǎn)

以此類推若我們將四個邊都綁定了主窗口的四個邊,那也就實(shí)現(xiàn)了填充

當(dāng)然,對于完全填充,可以直接使用 anchors.fill進(jìn)行綁定,即可實(shí)現(xiàn)填充!當(dāng)然除了四邊固定,錨點(diǎn)還可以進(jìn)行水平居中和垂直居中,為看出差別我們先修改下代碼

接下來設(shè)置水平居中

當(dāng)然如果想快速進(jìn)行水平和垂直的居中也可以用anchors.centerIn: parent來快速進(jìn)行居中**

常用瞄點(diǎn)總結(jié)

上述內(nèi)容沒提到過的有四個邊的頁邊距設(shè)置,和居中的偏移下面進(jìn)行示范

由此可見頁邊距的作用了,接下來是水平居中偏移如下

由此可見,藍(lán)色矩形向右偏移了100,所以horizontalCenterOffset 正數(shù)將會向右偏移,負(fù)數(shù)將會向左偏移!

垂直中心偏移如下

可以得出結(jié)論

水平偏移正數(shù)向右偏移,負(fù)數(shù)向左偏移.

垂直偏移正數(shù)向下偏移,負(fù)數(shù)向左偏移.