当前位置:   article > 正文

QML锚定位_anchors.fill

anchors.fill

除了更传统的 GridRow Column 之外,Qt Quick 还提供了使用锚点概念来布局项目的方法。

每个项目都可以被认为有一组 7 条不可见的“锚线”:左、水平中心、右、顶部、垂直中心、基线(默认与顶部相同)和底部。

Qt Quick 锚定系统允许定义不同项目的锚线之间的关系。例如:

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

rect2 的左边缘绑定到 rect1 的右边缘:

可以指定多个锚点。例如:

  1. Rectangle { id: rect1; ... }
  2. Rectangle { id: rect2;
  3. anchors.left: rect1.right;
  4. anchors.top: rect1.bottom; ... }

通过指定多个水平或垂直锚点,可以控制项目的大小。下面,rect2 锚定在 rect1 的右侧和 rect3 的左侧。 如果移动任何一个蓝色矩形,rect2 将根据需要拉伸和收缩:

  1. Rectangle { id: rect1; x: 0; ... }
  2. Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
  3. Rectangle { id: rect3; x: 150; ... }

还有一些方便的锚点:

  • anchors.fill:与设置目标项的左、右、上、下左、右、上、下锚点相同。
  • anchors.centerIn:与将 verticalCenter horizontalCenter 锚点设置为目标项的verticalCenter horizontalCenter 相同。

锚定边距和偏移量

锚定系统还允许为项目的锚定指定边距和偏移量。

边距:要离开项目锚点外部的空白空间量。

偏移量:允许使用中心锚线来操纵定位。

一个项目可以通过 leftMarginrightMargintopMargin bottomMargin 单独指定其锚点边距,或者使用 anchors.margins 为所有四个边指定相同的边距值。使用 horizontalCenterOffsetverticalCenterOffset baselineOffset 指定锚偏移。

以下示例指定左边距:

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

rect2 左侧保留 5 个像素的边距:

改变锚

Qt Quick 提供了 AnchorChanges 类型来指定状态中的锚点。

  1. State
  2. {
  3. name: "anchorRight"
  4. AnchorChanges
  5. {
  6. target: rect2
  7. anchors.right: parent.right
  8. anchors.left: undefined //移除左锚点
  9. }
  10. }

可以使用 AnchorAnimation 类型对 AnchorChanges 进行动画处理。

  1. Transition
  2. {
  3. AnchorAnimation {} //在相应的状态更改中为任何 AnchorChanges 设置动画
  4. }

锚点也可以在 JavaScript 中强制更改。但是,这些更改应谨慎操作,否则可能会产生意想不到的结果。以下示例说明了该问题:

  1. //糟糕的代码
  2. Rectangle
  3. {
  4. width: 50
  5. anchors.left: parent.left
  6. function reanchorToRight()
  7. {
  8. anchors.right = parent.right
  9. anchors.left = undefined
  10. }
  11. }

当调用 reanchorToRight() 时,该函数首先设置右锚点。 此时,左右锚点均已设置,项目将水平拉伸以填充其父项。 当左锚点未设置时,新宽度将保持不变。 因此,在 JavaScript 中更新锚点时,应该首先取消设置不再需要的任何锚点,然后才设置任何需要的新锚点,如下所示:

  1. Rectangle
  2. {
  3. width: 50
  4. anchors.left: parent.left
  5. function reanchorToRight()
  6. {
  7. anchors.left = undefined
  8. anchors.right = parent.right
  9. }
  10. }

限制

出于性能原因,只能将项目锚定到其兄弟姐妹和直接父项

例如,以下锚点无效并会产生警告:

  1. //糟糕的代码
  2. Item
  3. {
  4. id: group1
  5. Rectangle { id: rect1; ... }
  6. }
  7. Item
  8. {
  9. id: group2
  10. Rectangle { id: rect2; anchors.left: rect1.right; ... } // 无效的锚
  11. }

此外,基于锚的布局不能与绝对定位混合。如果一个项目指定了它的 x 位置并且还设置了 anchors.left,或者锚定了它的左右边缘但另外设置了一个宽度,结果是不确定的,因为项目应该使用锚定还是绝对定位并不清楚。对于使用 anchors.topanchors.bottom 设置项目的 y 和高度,或者设置 anchors.fill 以及宽度或高度,也同样如此。这也适用于使用定位器(例如 Row Grid)时,它们可以设置项目的 x 和 y 属性。如果希望从使用基于锚的定位更改为绝对定位,可以通过将锚值设置为 undefined 来清除锚值。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/117484
推荐阅读
相关标签
  

闽ICP备14008679号