概述
使用Qt做过UI的一定对QHBoxLayout, QVBoxLayout, 和QGridLayout这三个最重要也最常使用的layout managers非常熟悉。那么在QML中又是如何控制和管理UI布局的呢？那么我们这篇文章就为大家介绍这些基础知识。
首先，QML同样允许大家使用硬编码的方式将位置数值直接写到代码中，但是这样做首先难以适应UI的调整，其次代码维护起来也很困难。因此我们不推荐这样做。推荐大家使用的是以下三种布局管理器：Row,、Column、Grid，以及使用Anchor进行布局。
Row
QML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：
Row {
2 C L! f2 q; _: E2 ?+ x( |
spacing:
2# s; U' F9 H" u9 l4 ?# m
Rectangle { color:
"red"; width:
50; height:
50 }
+ u# ^3 s# U( z S- N4 T6 s Rectangle { color:
"green"; width:
20; height:
50 }
% `1 M. f) n; G* F* Q* D" i
Rectangle { color:
"blue"; width:
50; height:
20 }
7 A+ `# ?/ e' u! V2 x7 p
}
Column
QML 中的 Column元素会将其子控件都排列在同一列，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：
Column {
7 `) B# q0 e( c
spacing:
27 w; Z$ y5 b: n# Z2 |
Rectangle { color:
"red"; width:
50; height:
50 }
! t* X$ B% z: V! _
Rectangle { color:
"green"; width:
20; height:
50 }
$ M& S5 J5 \" P' l# _2 e1 N5 D Rectangle { color:
"blue"; width:
50; height:
20 }
- r% T4 }: `# T d; s' S1 Z' ^% ]}
Grid
QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内，相互不重叠，每一个子控件都被放置在一个网格单元的（0，0）位置，也就是左上角。Grid的rows 和columns属性定义网格的行数和列数，列数默认是4。我们还可以使用Grid的spacing 属性来定义网格单元之间的距离，这里注意水平和垂直方向的spacing都是一样的。比如下列代码就会产生如图所示的效果：
Grid {
6 r( T6 G: Q8 D1 z+ C ]* E1 H# Q
columns:
3
) G$ } \6 N4 ]" U9 J spacing:
2
0 \/ m2 G0 w5 `8 |/ v9 {; n. A Rectangle { color:
"red"; width:
50; height:
50 }
3 n9 Z2 g1 M8 p; Q% J+ n; ^
Rectangle { color:
"green"; width:
20; height:
50 }
: r+ g, D# L( C
Rectangle { color:
"blue"; width:
50; height:
20 }
, K$ q. N* Q0 d6 R* ]9 j
Rectangle { color:
"cyan"; width:
50; height:
50 }
; r, z( s; v1 g" f D4 X9 `6 e( B Rectangle { color:
"magenta"; width:
10; height:
10 }
$ K9 r t5 a. g# v2 n
}
7 L/ y" T) l. N5 j8 Y
混合应用
我们还可以将Grid、Row 和 Column 进行混合应用。比如下面的代码会产生如图所示的效果：
Column {
: i' B I0 a$ |, C Q5 @
spacing:
2
4 y* R8 A* c+ L- H# [! Z( ? Rectangle { color:
"red"; width:
50; height:
50 }
% O9 S( w; P, ? T2 f* E
Row {
E9 E* E' w* @4 d+ p+ l' o8 N spacing:
21 Z; D2 J1 H6 ]! @/ B" C3 ^3 l% I; h: t
Rectangle { color:
"yellow"; width:
50; height:
50 }
! v# x; s' p, C# ?5 r Rectangle { color:
"black"; width:
20; height:
50 }
' y0 H/ [' \" Y0 `/ O7 P
Rectangle { color:
"blue"; width:
50; height:
20 }
* r- @: v/ a2 F f, B }
2 U& e7 z3 |! E; K0 q
Rectangle { color:
"green"; width:
20; height:
50 }
+ v# ]) t( Z& B) ~& }}
3 [/ W+ y/ r5 B: m2 p
Anchor
以上方法进行排列是不重叠的，而anchor通俗的说是当前图形相对于某一图形的位置(可重叠)
每一个item 都可以被认为具有 7 条隐藏的“anchor lines"：left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及bottom，如下图所示：
····
其中baseline是指的文本所在的线，在上图中并未标出，如果item没有文字的话baselinw就和top的位置是相同的。
% `' ~' P/ v0 O: |9 i除此之外，Anchor系统还提供了margins 和offsets。margins 是指一个item和外界之间所留有的空间，而offsets 则可以通过使用 center anchor lines来进行布局。如下图所示
·····
使用 QML anchoring系统，我们可以定义不同items之间的anchor lines之间的关系。例如：
Rectangle { id: rect1; ... }
W7 }6 ]' J" m7 RRectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }
·····
我们还可以使用多个anchors：
Rectangle { id: rect1; ... }2 d0 E' ]: H) H, x! v9 s9 O* k
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }
·····
通过定义多个水平或垂直的anchors，我们还可以控制item的大小，例如：
Rectangle { id: rect1; x: 0; ... }
* `- ?# m8 J3 t6 Z! u, jRectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }5 A. N: N! L$ r0 m: i
Rectangle { id: rect3; x: 150; ... }
·····
注意：出于效率方面的考虑，我们只允许对一个item的邻居和之接父亲使用anchor定义。比如下面的定义是不合法的：
# P5 Z5 b* m% i. W3 l
Item {
4 {& D, j4 D: l5 o id: group1
, W/ u+ g. r2 L4 `3 P Rectangle { id: rect1; ... }
0 Z: b+ E# ~) o3 l}
4 `) q* U$ f# z7 z/ r7 [$ s% kItem {7 J2 M4 `/ @ A) e5 X, Q
id: group2
3 }" n1 G; X" C0 ~ Rectangle { id: rect2; anchors.left: rect1.right; ... } // invalid anchor!
* m0 `# @$ F( F, x}
) Z3 x, w1 `% V5 t
|一淘宝店|手机版|商店|电子DIY套件|一乐电子
( 粤ICP备09076165号 )
粤公网安备 44522102000183号
发表于 2017-6-9 11:09
发表于 2017-6-10 09:06