概述
使用Qt做过UI的一定对QHBoxLayout, QVBoxLayout, 和QGridLayout这三个最重要也最常使用的layout managers非常熟悉。那么在QML中又是如何控制和管理UI布局的呢？那么我们这篇文章就为大家介绍这些基础知识。
首先，QML同样允许大家使用硬编码的方式将位置数值直接写到代码中，但是这样做首先难以适应UI的调整，其次代码维护起来也很困难。因此我们不推荐这样做。推荐大家使用的是以下三种布局管理器：Row,、Column、Grid，以及使用Anchor进行布局。
Row
QML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：
Row {
- I4 m* q" s( D$ }
spacing:
2
" {, ^9 y" C0 Z6 b Z* ` Rectangle { color:
"red"; width:
50; height:
50 }
& b. \1 {5 Q7 S Rectangle { color:
"green"; width:
20; height:
50 }
3 _0 H0 O, B9 ^* E$ B- _6 c
Rectangle { color:
"blue"; width:
50; height:
20 }
, ~, }7 @1 @" Z
}
Column
QML 中的 Column元素会将其子控件都排列在同一列，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：
Column {
( h c4 j; q, _8 P$ E
spacing:
24 y+ Y6 B' x5 o2 a- L/ S: p
Rectangle { color:
"red"; width:
50; height:
50 }
/ S9 q' `) S, N( i4 O Rectangle { color:
"green"; width:
20; height:
50 }
3 P: [& U7 `9 v' C' h2 \6 r5 K
Rectangle { color:
"blue"; width:
50; height:
20 }
+ N* L J1 ~9 o* s* a
}
Grid
QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内，相互不重叠，每一个子控件都被放置在一个网格单元的（0，0）位置，也就是左上角。Grid的rows 和columns属性定义网格的行数和列数，列数默认是4。我们还可以使用Grid的spacing 属性来定义网格单元之间的距离，这里注意水平和垂直方向的spacing都是一样的。比如下列代码就会产生如图所示的效果：
Grid {
6 a* o0 J' y N+ U2 c; v
columns:
37 { `7 X' s. g. V
spacing:
27 l" y4 ^5 V' Z, d, j8 W4 p
Rectangle { color:
"red"; width:
50; height:
50 }
5 t. q. f9 E- E& r4 `: z Rectangle { color:
"green"; width:
20; height:
50 }
) d3 j! P% D: _1 [9 E; G
Rectangle { color:
"blue"; width:
50; height:
20 }
: I. Q) A$ w2 A. S) \ Rectangle { color:
"cyan"; width:
50; height:
50 }
3 } a; K `9 x
Rectangle { color:
"magenta"; width:
10; height:
10 }
1 U6 L U/ r0 G- m6 ^, @ E9 ~}
, h& R# x: N' [8 s# B混合应用
我们还可以将Grid、Row 和 Column 进行混合应用。比如下面的代码会产生如图所示的效果：
Column {
. O6 g! I* s" ?" k2 \& Z spacing:
29 m* ^* d5 F1 k+ v# n3 M8 M9 V
Rectangle { color:
"red"; width:
50; height:
50 }
3 g) q+ U" \* s3 }& q* z
Row {
( O) V& h5 H' S spacing:
2
6 H, ~$ T6 p! `. V- i$ w Rectangle { color:
"yellow"; width:
50; height:
50 }
" `8 N3 W" Y( D7 R v, g
Rectangle { color:
"black"; width:
20; height:
50 }
6 f& g, W. D3 I% j* ?& a7 y# x+ ? Rectangle { color:
"blue"; width:
50; height:
20 }
7 q5 }: ?7 N& l1 ] }
; z) @, E2 W% H9 t6 Q/ E& H Rectangle { color:
"green"; width:
20; height:
50 }
t+ P" C$ V5 }" H
}
" ^) [7 b+ O. g, u" r4 [8 R" ~Anchor
以上方法进行排列是不重叠的，而anchor通俗的说是当前图形相对于某一图形的位置(可重叠)
每一个item 都可以被认为具有 7 条隐藏的“anchor lines"：left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及bottom，如下图所示：
····
其中baseline是指的文本所在的线，在上图中并未标出，如果item没有文字的话baselinw就和top的位置是相同的。; Z3 \9 a k. S, w9 P* }
除此之外，Anchor系统还提供了margins 和offsets。margins 是指一个item和外界之间所留有的空间，而offsets 则可以通过使用 center anchor lines来进行布局。如下图所示
·····
使用 QML anchoring系统，我们可以定义不同items之间的anchor lines之间的关系。例如：
Rectangle { id: rect1; ... }
/ V$ {9 f# F8 U5 V) p2 ]" j9 pRectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }
·····
我们还可以使用多个anchors：
Rectangle { id: rect1; ... }# g8 Y0 i- b+ C& N+ L
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }
·····
通过定义多个水平或垂直的anchors，我们还可以控制item的大小，例如：
Rectangle { id: rect1; x: 0; ... }
8 e2 a- D2 `8 g: s7 \: YRectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }2 L: r+ o9 {- D/ p6 q+ }
Rectangle { id: rect3; x: 150; ... }
·····
注意：出于效率方面的考虑，我们只允许对一个item的邻居和之接父亲使用anchor定义。比如下面的定义是不合法的：
8 Z2 O' E& ^5 n0 p/ tItem {
# o a) h/ x, X! [6 Z id: group1* V9 w1 M# j' T; ?
Rectangle { id: rect1; ... }) Y/ N' U. G3 D& A# ]" d
}
0 `5 m7 E" I- c' |, H1 Z" ]; ~3 JItem {- [$ r1 Y' g8 ?0 A, J" V. W% S
id: group20 `6 q! }+ h7 }% }
Rectangle { id: rect2; anchors.left: rect1.right; ... } // invalid anchor!. N& T9 j7 I2 q
}
4 A- a/ h6 e- f6 J
|一淘宝店|手机版|商店|电子DIY套件|一乐电子
( 粤ICP备09076165号 )
粤公网安备 44522102000183号
发表于 2017-6-9 11:09
发表于 2017-6-10 09:06