QML 的 anchors（锚定）是最核心的布局方式之一，通过 "锚点对齐" 实现组件的精准定位，比直接设置 x/y/width/height 更灵活、适配性更强。以下是所有常用锚定方式的详细解释 + 示例：
一、基础锚点（单方向对齐）
锚定的核心是把组件的某条边 / 中心点和父组件（或其他组件）的对应位置绑定，基础锚点共 8 个：
表格
| 锚定属性 | 作用 | 示例 |
|---|---|---|
anchors.left |
当前组件的左边缘对齐到目标组件的左边缘 | anchors.left: parent.left（和父组件左对齐） |
anchors.right |
当前组件的右边缘对齐到目标组件的右边缘 | anchors.right: parent.right（和父组件右对齐） |
anchors.top |
当前组件的上边缘对齐到目标组件的上边缘 | anchors.top: parent.top（和父组件上对齐） |
anchors.bottom |
当前组件的下边缘对齐到目标组件的下边缘 | anchors.bottom: parent.bottom（和父组件下对齐） |
anchors.horizontalCenter |
当前组件的水平中线对齐到目标组件的水平中线 | anchors.horizontalCenter: parent.horizontalCenter（水平居中） |
anchors.verticalCenter |
当前组件的垂直中线对齐到目标组件的垂直中线 | anchors.verticalCenter: parent.verticalCenter（垂直居中） |
anchors.baseline |
当前组件的文字基线对齐到目标组件的文字基线（仅文本类组件有效） | anchors.baseline: text1.baseline（两个文字基线对齐） |
anchors.centerIn |
当前组件的中心点完全对齐到目标组件的中心点（水平 + 垂直居中） | anchors.centerIn: parent（在父组件正中间） |
基础示例：
qml
Rectangle {
width: 300
height: 200
color: "#f5f5f5"
// 按钮1：左上角对齐父组件，偏移10px
Button {
text: "左上按钮"
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: 10 // 左偏移10px
anchors.topMargin: 10 // 上偏移10px
}
// 按钮2：水平居中+垂直居中
Button {
text: "居中按钮"
anchors.centerIn: parent // 等价于同时设置horizontalCenter+verticalCenter
}
// 按钮3：右下对齐父组件，偏移10px
Button {
text: "右下按钮"
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.rightMargin: 10
anchors.bottomMargin: 10
}
}二、间距 / 偏移（Margin）
所有基础锚点都可以搭配 Margin 设置偏移量，控制组件和锚定目标的距离：
表格
| 间距属性 | 作用 | 示例 |
|---|---|---|
anchors.leftMargin |
左锚点的偏移量（正数向右，负数向左） | anchors.leftMargin: 20 |
anchors.rightMargin |
右锚点的偏移量（正数向左，负数向右） | anchors.rightMargin: 20 |
anchors.topMargin |
上锚点的偏移量（正数向下，负数向上） | anchors.topMargin: 20 |
anchors.bottomMargin |
下锚点的偏移量（正数向上，负数向下） | anchors.bottomMargin: 20 |
anchors.margins |
统一设置所有方向的间距（优先级低于单独的 margin） | anchors.margins: 15（上下左右都偏移 15px） |
示例：
qml
Rectangle {
width: 200
height: 200
color: "gray"
Rectangle {
width: 100
height: 100
color: "red"
// 左+上锚定父组件，同时偏移20px
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: 20
anchors.topMargin: 20
}
}三、填充锚定（fill）
一次性绑定所有 4 个边缘，让当前组件完全填满目标组件：
表格
| 锚定属性 | 作用 | 示例 |
|---|---|---|
anchors.fill |
左 = 目标左、右 = 目标右、上 = 目标上、下 = 目标下（完全铺满） | anchors.fill: parent（填满父组件） |
示例：
qml
Rectangle {
width: 300
height: 200
color: "lightblue"
// 绿色矩形完全铺满蓝色父矩形，加10px内边距
Rectangle {
anchors.fill: parent
anchors.margins: 10 // 所有方向留10px边距
color: "green"
}
}四、锚定到其他组件（跨组件锚定）
锚定不仅能绑定 parent，还能绑定任意其他命名组件，实现组件间的相对定位：
示例：
qml
Rectangle {
width: 300
height: 200
color: "#f5f5f5"
// 第一个按钮（基准组件）
Button {
id: btn1
text: "按钮1"
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: 10
anchors.topMargin: 10
}
// 第二个按钮：在按钮1右侧，且顶部对齐
Button {
text: "按钮2"
anchors.left: btn1.right // 左边缘对齐按钮1的右边缘
anchors.top: btn1.top // 顶部和按钮1顶部对齐
anchors.leftMargin: 10 // 和按钮1间隔10px
}
}五、锚定优先级（anchors.anchorMargins）
anchors.anchorMargins 是 Qt 5.14+ 新增属性，作用和 margins 一致，但优先级更高（了解即可）：
qml
Rectangle {
anchors.fill: parent
anchors.anchorMargins: 20 // 优先级高于anchors.margins
anchors.margins: 10 // 会被anchorMargins覆盖
color: "red"
}六、锚定限制（anchors.avoid）
anchors.avoid 可以让组件自动避开指定组件（防止重叠），适合动态布局：
qml
Rectangle {
id: block
width: 100
height: 100
color: "black"
x: 50
y: 50
}
Text {
text: "自动避开黑色块"
anchors.centerIn: parent
anchors.avoid: block // 文字会自动偏移，不与black块重叠
}总结
- 基础锚点 ：
left/right/top/bottom/horizontalCenter/verticalCenter/centerIn是核心，实现单方向 / 居中对齐； - 间距控制 ：
margin系列属性给锚定加偏移，margins统一设置，单独leftMargin等精准控制； - 填充布局 ：
anchors.fill: parent一键铺满父组件，比手动设置宽高更灵活； - 跨组件锚定：通过组件 ID 绑定，实现组件间的相对定位（如 "按钮 2 在按钮 1 右侧"）。
锚定是 QML 布局的基础，搭配 Layout 布局使用（比如锚定 Layout 容器，再在容器内用 Layout 分配子组件），能实现几乎所有复杂界面的自适应布局。