QML anchors（锚定）详解（从入门到精通，附实战示例）

QML anchors（锚定）详解（从入门到精通，附实战示例）

• 一、QML anchors详解
• • 1、核心概念
  • 2、常用锚定属性
  • 3、重要注意事项
  • 4、示例
• 二、代码示例
• • 1、源码分享
  • 2、运行展示
  • 3、示例说明

一、QML anchors详解

anchors 是 QML 中一个强大且核心的属性，它用于声明式地定位和调整 Item 及其派生类型（如 Rectangle、Image、Text 等）的大小。它允许你相对于另一个 Item（通常是父元素或同级元素）的边界或中心点来定义当前元素的位置和尺寸。

1、核心概念

2、常用锚定属性

• 锚定到边缘:

  anchors.left: parent.left // 左边缘对齐父元素左边缘
  anchors.right: parent.right // 右边缘对齐父元素右边缘
  anchors.top: parent.top // 上边缘对齐父元素上边缘
  anchors.bottom: parent.bottom // 下边缘对齐父元素下边缘

  可以组合使用：

  anchors.left: parent.left
  anchors.right: parent.right
  anchors.top: parent.top
  anchors.bottom: parent.bottom // 填满父元素

• 锚定到中心:

  anchors.horizontalCenter: parent.horizontalCenter // 水平中心对齐
  anchors.verticalCenter: parent.verticalCenter // 垂直中心对齐
  anchors.centerIn: parent // 水平和垂直都居中的快捷方式

• 锚定到其他元素:

  anchors.left: siblingItem.right // 左边缘锚定到同级元素siblingItem的右边缘
  anchors.top: otherItem.bottom // 上边缘锚定到另一个元素otherItem的下边缘

• 快捷属性:

  • anchors.fill: parent: 等价于同时设置 left, right, top, bottom 都锚定到 parent 的相应边缘，元素会填满父元素。
  • anchors.centerIn: parent: 等价于同时设置 horizontalCenter 和 verticalCenter 都锚定到 parent 的中心。

• 设置边距:

  anchors.margins: 10 // 所有锚定边（如果设置了）统一使用10像素边距
  anchors.leftMargin: 15 // 单独设置左边缘边距为15像素
  anchors.topMargin: 5 // 单独设置上边缘边距为5像素
  anchors.horizontalCenterOffset: 20 // 水平中心点向右偏移20像素

3、重要注意事项

4、示例

import QtQuick

Rectangle {
id: root
width: 400
height: 300
color: "lightgray"

Rectangle {
id: blueRect
width: 100
height: 100
color: "blue"
anchors {
left: parent.left // 左对齐父元素左边缘
top: parent.top // 顶对齐父元素顶边缘
margins: 20 // 所有边距20像素 (实际是左20，上20)
}
}

Rectangle {
id: redRect
width: 150
height: 80
color: "red"
anchors {
top: blueRect.bottom // 顶边锚定在蓝色矩形的底边
left: parent.left // 左边锚定在父元素的左边
topMargin: 10 // 距离蓝色矩形底部10像素
leftMargin: 20 // 距离父元素左边20像素
}
}

Text {
id: centeredText
text: "Centered Text"
anchors.centerIn: parent // 文本水平和垂直居中于父元素
}

Rectangle {
id: greenRect
color: "green"
anchors {
left: blueRect.right // 左边锚定在蓝色矩形的右边
right: parent.right // 右边锚定在父元素的右边
top: parent.top // 顶边锚定在父元素的顶边
bottom: centeredText.top // 底边锚定在居中文本的顶边
leftMargin: 10 // 距离蓝色矩形10像素
rightMargin: 20 // 距离父元素右边20像素
topMargin: 20 // 距离父元素顶边20像素
bottomMargin: 10 // 距离文本10像素
}
}
}

解释:

• blueRect: 固定在父元素左上角，距离左边和上边各 20 像素。
• redRect: 固定在 blueRect 下方 10 像素，距离父元素左边 20 像素。
• centeredText: 完全居中于父元素。
• greenRect: 其左边紧贴 blueRect 右边 (间隔 10 像素)，右边紧贴父元素右边 (间隔 20 像素)，顶边紧贴父元素顶边 (间隔 20 像素)，底边紧贴 centeredText 顶边 (间隔 10 像素)。它的宽度和高度由这些锚定关系隐含决定。

二、代码示例

1、源码分享

import QtQuick
import QtQuick.Controls

ApplicationWindow {
id: mainWindow
width: 400
height: 300
visible: true
title: "Qt6 QML Anchors 示例"

Rectangle {
id: parentRect
anchors.fill: parent // 填充整个父窗口
color: "lightgray"

Rectangle {
id: topLeftRect
width: 100
height: 50
color: "red"
anchors {
top: parent.top // 顶部对齐父项顶部
left: parent.left // 左侧对齐父项左侧
topMargin: 20 // 顶部外边距
leftMargin: 20 // 左侧外边距
}
Text {
text: "左上"
anchors.centerIn: parent // 文本在矩形内居中
}
}

Rectangle {
id: centerRect
width: 120
height: 70
color: "blue"
anchors.centerIn: parent // 在父项内居中
Text {
text: "中心"
anchors.centerIn: parent
color: "white"
}
}

Rectangle {
id: bottomRightRect
width: 100
height: 50
color: "green"
anchors {
bottom: parent.bottom // 底部对齐父项底部
right: parent.right // 右侧对齐父项右侧
bottomMargin: 20
rightMargin: 20
}
Text {
text: "右下"
anchors.centerIn: parent
}
}

Button {
id: testButton
text: "测试按钮"
anchors {
horizontalCenter: parent.horizontalCenter // 水平居中于父项
bottom: centerRect.top // 底部对齐 centerRect 的顶部
bottomMargin: 10
}
}
}
}

2、运行展示

3、示例说明