QML中基于锚的布局(Anchor-based Layout in QML)

欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！158427611

欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！158427611 

除了传统的格子，行列布局外，QML中还提供了一种基于锚的布局。基于锚的布局，我们可以把每个元素想象它有七条锚线：左锚线(left)，水平中心锚线 (horizontalCenter)，右锚线(right)，顶锚线(top)，垂直中心锚线(verticalCenter)，基线锚线 (baseline)，还有底锚线(bottom)。
如下图所示：


这里baseline是对于文字来说，对于没有文字的元素它的baseline跟顶锚线(top)是一样的。
在QML的锚定位系统中，我们可以使用锚线来定位元素的位置关系。如下例所示：

1. Rectangle { id: rect1; ... }
   
2. Rectangle { id: rect2; anchors.left: rect1.right; ... }

复制代码

这里rect2的左锚线和rect1的右锚线相等，所以显示的效果将会是像下面这样：


在QML的锚定位系统中，我们还可以具体指明元素的边距和偏移。

下面这个例子我们指明左边距：

1. Rectangle { id: rect1; ... }
   
2. Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }

复制代码

他们之间将有5个像素间隔，其显示效果将如下所示：

处于效率考虑，只能对处于同级别的元素或是这个元素的父元素使用锚定位。像下面这样使用锚将会被认为是不合法的：

1. Item {
   
2.      id: group1
   
3.      Rectangle { id: rect1; ... }
   
4. }
   
5. Item {
   
6.      id: group2
   
7.      Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!
   
8. }

复制代码

http://www.thisisqt.com/forum/viewthread.php?tid=123

欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！158427611

欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！158427611