QML锚定位

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

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

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

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

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

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

Rectangle { id: rect1; ... }
Rectangle { id: rect2; 
            anchors.left: rect1.right; 
            anchors.top: rect1.bottom; ... }

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

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

还有一些方便的锚点:

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

锚定边距和偏移量

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

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

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

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

以下示例指定左边距:

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

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

改变锚

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

State 
{
    name: "anchorRight"
    AnchorChanges 
    {
        target: rect2
        anchors.right: parent.right
        anchors.left: undefined  //移除左锚点
    }
}

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

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

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

//糟糕的代码 
Rectangle 
{
    width: 50
    anchors.left: parent.left

    function reanchorToRight()
    {
        anchors.right = parent.right
        anchors.left = undefined
    }
}	

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

Rectangle 
{
    width: 50
    anchors.left: parent.left

    function reanchorToRight() 
    {
        anchors.left = undefined
        anchors.right = parent.right
    }
}	

限制

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

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

//糟糕的代码
Item 
{
    id: group1
    Rectangle { id: rect1; ... }
}
Item 
{
    id: group2
    Rectangle { id: rect2; anchors.left: rect1.right; ... }    // 无效的锚
}

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

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值