Qt QML 锚定（Anchors）全解析

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 分配子组件），能实现几乎所有复杂界面的自适应布局。