QML UI布局管理
概述
使用Qt做過UI的一定對QHBoxLayout, QVBoxLayout, 和QGridLayout這三個最重要也最常使用的layout managers非常熟悉。那么在QML中又是如何控制和管理UI布局的呢？那么我們這篇文章就為大家介紹這些基礎知識。
首先，QML同樣允許大家使用硬編碼的方式將位置數值直接寫到代碼中，但是這樣做首先難以適應UI的調整，其次代碼維護起來也很困難。因此我們不推薦這樣做。推薦大家使用的是以下三種布局管理器：Row,、Column、Grid，以及使用Anchor進行布局。
Row
QML 中的 Row 元素會將其子控件都排列在同一行，相互不重疊。我們還可以使用它的spacing屬性來定義子控件之間的距離。比如下列代碼就會產生如圖所示的效果：
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}
Column
QML 中的 Column元素會將其子控件都排列在同一行，相互不重疊。我們還可以使用它的spacing 屬性來定義子控件之間的距離。比如下列代碼就會產生如圖所示的效果：
Column {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
}
Grid
QML 中的 Grid元素會將其子控件都均勻地排列在一個網格內，相互不重疊，每一個子控件都被放置在一個網格單元的（0，0）位置，也就是左上角。Grid的rows 和columns屬性定義網格的行數和列數，列數默認是4。我們還可以使用Grid的spacing 屬性來定義網格單元之間的距離，這里注意水平和垂直方向的spacing都是一樣的。比如下列代碼就會產生如圖所示的效果：
Grid {
columns: 3
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 }
Rectangle { color: "blue"; width: 50; height: 20 }
Rectangle { color: "cyan"; width: 50; height: 50 }
Rectangle { color: "magenta"; width: 10; height: 10 }
}
混合應用
我們還可以將Grid、Row 和 Column 進行混合應用。比如下面的代碼會產生如圖所示的效果：
Column {
spacing: 2
Rectangle { color: "red"; width: 50; height: 50 }
Row {
spacing: 2
Rectangle { color: "yellow"; width: 50; height: 50 }
Rectangle { color: "black"; width: 20; height: 50 }
Rectangle { color: "blue"; width:50; height: 20 }
}
Rectangle { color: "green"; width: 20; height: 50 }
}
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 { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }
我們還可以使用多個anchors：
Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }
通過定義多個水平或垂直的anchors，我們還可以控制item的大小，例如：
Rectangle { id: rect1; x: 0; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
Rectangle { id: rect3; x: 150; ... }
注意：出于效率方面的考慮，我們只允許對一個item的鄰居和之接父親使用anchor定義。比如下面的定義是不合法的：
Item {
id: group1
Rectangle { id: rect1; ... }
}
Item {
id: group2
Rectangle { id: rect2; anchors.left: rect1.right; ... }
}
留言列表
