QML基礎 UI布局管理

2021-06-26 13:22:21 字數 2145 閱讀 2727

概述

使用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

rectangle

·····

我們還可以使用多個anchors:

rectangle

rectangle

·····

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

rectangle

rectangle

rectangle

·····

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

item 

}item //

invalid anchor!

}

QML基礎 UI布局管理

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

QML基礎 UI布局管理

概述 使用qt做過ui的一定對qhboxlayout,qvboxlayout,和qgridlayout這三個最重要也最常使用的layout managers非常熟悉。那麼在qml中又是如何控制和管理ui布局的呢?那麼我們這篇文章就為大家介紹這些基礎知識。首先,qml同樣允許大家使用硬編碼的方式將位置...

QML布局管理基礎(一)

在qt中的布局主要採用qhboxlayout,qvboxlayout和qgridlayout這三個類進行實現,在qml中該如何進行ui的布局管理呢?答案是 qml中提供了三種布局管理器 row,column grid,在使用時靈活使用anchor進行布局,可以很方便的調整ui,省去了布局通過 維護的...