qml之锚点Anchors

一、锚点概念

QML 中的锚点(Anchors)是一种声明式的布局系统，它允许你定义 UI 元素之间的相对位置关系，而不是使用绝对坐标定位。

锚点的核心概念

1. 关系绑定：

   • 锚点不是固定位置，而是建立元素之间的相对关系

   • 类似于"将这个按钮的右边固定在那个文本框的左边"

2. 动态响应：

   • 当被锚定的元素移动或改变大小时，依赖它的元素会自动调整

   • 自动适应不同屏幕尺寸和方向变化

3. 布局系统：

   • 比传统(x,y)坐标定位更高级的抽象

   • 属于声明式布局(描述"什么"而不是"如何")

与绝对定位的对比

特性	锚点布局	绝对定位
定位方式	相对其他元素	固定坐标
响应式	自动适应变化	需要手动调整
复杂度	声明简单关系	需要精确计算
维护性	高(关系明确)	低(硬编码值)
性能	优化过的求解	直接赋值

 二、锚点 (Anchors) 使用

锚布局（Anchors）是QML中一种通过指定元素之间的相对位置关系来确定元素在界面中位置的布局方式。它允许你定义一个元素如何相对于其父元素或其他元素进行定位，例如，你可以指定一个元素的左边与父元素的左边对齐，或者一个元素的顶部与另一个元素的底部对齐等。

1. 基本锚点：

   • anchors.left - 左边缘

   • anchors.right - 右边缘

   • anchors.top - 顶部边缘

   • anchors.bottom - 底部边缘

   • anchors.horizontalCenter - 水平中心

   • anchors.verticalCenter - 垂直中心

   • anchors.baseline - 文本基线，是用于定位文本的，对于没有文本的图元，baseline和top一致。
     

2. 边距：

   • anchors.leftMargin - 左边缘边距

   • anchors.rightMargin - 右边缘边距

   • anchors.topMargin - 顶部边距

   • anchors.bottomMargin - 底部边距

   • anchors.horizontalCenterOffset - 水平中心偏移

   • anchors.verticalCenterOffset - 垂直中心偏移

   • anchors.centerIn  - 用于将一个元素居中于另一个元素或父元素。
     

3. 填充：

   • anchors.fill: parent - 填充整个父元素

   • anchors.margins - 设置所有边距的统一值

 

三、示例代码

示例1：基本锚定

Rectangle {
    id: parentRect
    width: 200; height: 200
    color: "lightblue"
    
    Rectangle {
        id: childRect
        width: 100; height: 50
        color: "salmon"
        // 锚定到父元素的中心
        anchors.centerIn: parent
    }
}

 

示例2：边距使用

Rectangle {
    id: container
    width: 300; height: 200
    color: "lightgray"
    
    Rectangle {
        id: box
        color: "navy"
        // 锚定到父元素，但留有10像素的边距
        anchors.fill: parent
        anchors.margins: 10
    }
}

示例3：填充

    Rectangle {
        width: 200; height: 200
        color: "lightblue"

        Rectangle {
            width: 100; height: 100
            anchors.leftMargin:20
            color: "salmon"
            anchors.fill: parent  // 填充整个父元素
        }
    }

 

示例4：元素占据右侧 20% 区域

 

示例5：复杂锚定

Rectangle {
    width: 400; height: 400
    color: "white"
    
    Rectangle {
        id: leftColumn
        width: 100; color: "lightgreen"
        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
            topMargin: 20
            bottomMargin: 20
        }
    }
    
    Rectangle {
        id: rightItem
        height: 50; color: "orange"
        anchors {
            top: parent.top
            right: parent.right
            left: leftColumn.right
            margins: 10
        }
    }
}