概述
使用Qt做过UI的一定对QHBoxLayout, QVBoxLayout, 和QGridLayout这三个最重要也最常使用的layout managers非常熟悉。那么在QML中又是如何控制和管理UI布局的呢？那么我们这篇文章就为大家介绍这些基础知识。
首先，QML同样允许大家使用硬编码的方式将位置数值直接写到代码中，但是这样做首先难以适应UI的调整，其次代码维护起来也很困难。因此我们不推荐这样做。推荐大家使用的是以下三种布局管理器：Row,、Column、Grid，以及使用Anchor进行布局。
Row
QML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：
Row {
# t. F' L8 w, s' _: b0 a4 i spacing:
25 b7 P0 R" q6 z1 F; L G$ m
Rectangle { color:
"red"; width:
50; height:
50 }
/ V& Z, W& O3 r9 \6 L1 z Rectangle { color:
"green"; width:
20; height:
50 }
4 v0 q; ~% d: O; I3 M# Q
Rectangle { color:
"blue"; width:
50; height:
20 }
5 B6 Q* @" s. ]}
Column
QML 中的 Column元素会将其子控件都排列在同一列，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：
Column {
$ o) i& z% H6 |3 A4 Y
spacing:
2
+ t# W$ A4 O+ _- C Rectangle { color:
"red"; width:
50; height:
50 }
: F7 H1 s, W/ W: D' Y% I
Rectangle { color:
"green"; width:
20; height:
50 }
5 e& J* l0 D& g Rectangle { color:
"blue"; width:
50; height:
20 }
3 T2 I7 d" {9 w3 n) I) Q& e}
Grid
QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内，相互不重叠，每一个子控件都被放置在一个网格单元的（0，0）位置，也就是左上角。Grid的rows 和columns属性定义网格的行数和列数，列数默认是4。我们还可以使用Grid的spacing 属性来定义网格单元之间的距离，这里注意水平和垂直方向的spacing都是一样的。比如下列代码就会产生如图所示的效果：
Grid {
; x! i1 d: o1 _+ |8 Y" h
columns:
3. a B' ^! j* o+ k" ?' X. E
spacing:
27 {' ?% X5 x/ H" f! B/ j
Rectangle { color:
"red"; width:
50; height:
50 }
y: C/ I+ L: I& U0 _ Rectangle { color:
"green"; width:
20; height:
50 }
/ i z' R' T" r. I4 W6 B
Rectangle { color:
"blue"; width:
50; height:
20 }
! ^6 T+ ?1 z3 D+ q* K) X0 O4 r: d
Rectangle { color:
"cyan"; width:
50; height:
50 }
4 S3 N9 i* L$ q3 C9 r! ? p
Rectangle { color:
"magenta"; width:
10; height:
10 }
L0 u9 g7 @! Y6 \( Y6 r
}
: v; m1 B4 N! D0 ? T% r8 h' A混合应用
我们还可以将Grid、Row 和 Column 进行混合应用。比如下面的代码会产生如图所示的效果：
Column {
+ l/ H0 Y0 {5 n' d$ B5 b; A4 x2 c
spacing:
2
" K+ @7 b% d7 f1 D Rectangle { color:
"red"; width:
50; height:
50 }
# \# ~0 ^% P$ v/ u) c Row {
O+ v. x2 {" @- q' H
spacing:
2
* d: D" _% }4 W Rectangle { color:
"yellow"; width:
50; height:
50 }
7 Q$ X- ?# ^2 M Rectangle { color:
"black"; width:
20; height:
50 }
* G2 Q1 @4 C6 k8 m" D Rectangle { color:
"blue"; width:
50; height:
20 }
6 E* u% R# I! l: G' J7 ~# V }
) I% \ t. Y, w4 Z& }) ]
Rectangle { color:
"green"; width:
20; height:
50 }
4 a; y* O2 m* `}
% v# F% d! T" J$ x/ |/ vAnchor
以上方法进行排列是不重叠的，而anchor通俗的说是当前图形相对于某一图形的位置(可重叠)
每一个item 都可以被认为具有 7 条隐藏的“anchor lines"：left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及bottom，如下图所示：
····
其中baseline是指的文本所在的线，在上图中并未标出，如果item没有文字的话baselinw就和top的位置是相同的。
! N5 N; m8 f, _4 `! S2 G除此之外，Anchor系统还提供了margins 和offsets。margins 是指一个item和外界之间所留有的空间，而offsets 则可以通过使用 center anchor lines来进行布局。如下图所示
·····
使用 QML anchoring系统，我们可以定义不同items之间的anchor lines之间的关系。例如：
Rectangle { id: rect1; ... } ^4 o) S0 v7 O6 F# J7 \$ {
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }
·····
我们还可以使用多个anchors：
Rectangle { id: rect1; ... }
# W% ~0 }2 _* K; R4 iRectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }
·····
通过定义多个水平或垂直的anchors，我们还可以控制item的大小，例如：
Rectangle { id: rect1; x: 0; ... }
0 V9 [! y: @5 o' {" B" j6 lRectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }0 D3 m! m9 w' \( @" B
Rectangle { id: rect3; x: 150; ... }
·····
注意：出于效率方面的考虑，我们只允许对一个item的邻居和之接父亲使用anchor定义。比如下面的定义是不合法的：
$ U9 X! |8 N, ]6 |& K4 _
Item {
* f3 _0 D$ d6 n' \! g, v id: group1- M( i' m8 X! k3 }
Rectangle { id: rect1; ... }: S* i) F# _0 e& ~) Y
} k( N, J7 b5 f. _
Item {
- E6 [3 V# w) U! r* ?8 m id: group21 L) Z& v: ]3 F. Q/ e5 u- h
Rectangle { id: rect2; anchors.left: rect1.right; ... } // invalid anchor!
$ ` i; S5 D+ u}, j! Q$ b6 z; M, E
|一淘宝店|手机版|商店|电子DIY套件|一乐电子
( 粤ICP备09076165号 )
粤公网安备 44522102000183号
发表于 2017-6-9 11:09
发表于 2017-6-10 09:06