QML基礎 UI布局管理

概述

使用qt做過ui的一定對qhboxlayout, qvboxlayout, 和qgridlayout這三個最重要也最常使用的layout managers非常熟悉。那麼在qml中又是如何控制和管理ui布局的呢？那麼我們這篇文章就為大家介紹這些基礎知識。

首先，qml同樣允許大家使用硬編碼的方式將位置數值直接寫到**中，但是這樣做首先難以適應ui的調整，其次**維護起來也很困難。因此我們不推薦這樣做。推薦大家使用的是以下三種布局管理器：row,、column、grid，以及使用anchor進行布局。

row

qml 中的 row 元素會將其子控制項都排列在同一行，相互不重疊。我們還可以使用它的spacing 屬性來定義子控制項之間的距離。比如下列**就會產生如圖所示的效果：

row 
rectangle 
rectangle 
}

column

qml 中的 column元素會將其子控制項都排列在同一行，相互不重疊。我們還可以使用它的spacing 屬性來定義子控制項之間的距離。比如下列**就會產生如圖所示的效果：

qml 中的 grid元素會將其子控制項都均勻地排列在乙個網格內，相互不重疊，每乙個子控制項都被放置在乙個網格單元的（0，0）位置，也就是左上角。grid的rows 和columns屬性定義網格的行數和列數，列數預設是4。我們還可以使用grid的spacing 屬性來定義網格單元之間的距離，這裡注意水平和垂直方向的spacing都是一樣的。比如下列**就會產生如圖所示的效果：

混合應用

我們還可以將grid、row 和 column 進行混合應用。比如下面的**會產生如圖所示的效果：

以上方法進行排列是不重疊的，而anchor通俗的說是當前圖形相對於某一圖形的位置

(可重疊)

每乙個item 都可以被認為具有 7 條隱藏的「anchor lines"：left、 horizontalcenter、 right、 top、 verticalcenter、baseline、以及bottom，如下圖所示：

····

其中baseline是指的文字所在的線，在上圖中並未標出，如果item沒有文字的話baselinw就和top的位置是相同的。

除此之外，anchor系統還提供了margins 和offsets。margins 是指乙個item和外界之間所留有的空間，而offsets 則可以通過使用 center anchor lines來進行布局。如下圖所示

·····

使用 qml anchoring系統，我們可以定義不同items之間的anchor lines之間的關係。例如：

rectangle

·····

我們還可以使用多個anchors：

rectangle

·····

通過定義多個水平或垂直的anchors，我們還可以控制item的大小，例如：

rectangle

·····

注意：出於效率方面的考慮，我們只允許對乙個item的鄰居和之接父親使用anchor定義。比如下面的定義是不合法的：

item 
}item  //
invalid anchor!
}

QML基礎 UI布局管理

QML基礎 UI布局管理

QML基礎 UI布局管理

QML布局管理基礎（一）

相關推薦