# 布局项

QML提供了一种使用锚点来布局项的灵活方式。锚定是Item的基础概念，可用于所有可视化的QML元素。锚点就像签订合同一样，比几何变化的效果更强健。锚是具有相对性的表达，总是需要一个相关的元素来锚定。

一个元素有6条主要的锚线（top、bottom、left、right、horizontalCenter、verticalCenter）。此外，在Text元素中有文本的基线锚点。每条锚线都有一个偏移量。在top、bottom、left和right锚点的情况下，它们被称为边距；对于horizontalCenter、verticalCenter和baseline，它们被称为偏移量。

(1) 元素填充父元素

GreenSquare {
    BlueSquare {
        width: 12
        anchors.fill: parent
        anchors.margins: 8
        text: '(1)'
    }
}

(2) 元素与父元素左对其

GreenSquare {
    BlueSquare {
        width: 48
        y: 8
        anchors.left: parent.left
        anchors.leftMargin: 8
        text: '(2)'
    }
}

(3) 元素的左侧边与父元素的右侧边对其

GreenSquare {
    BlueSquare {
        width: 48
        anchors.left: parent.right
        text: '(3)'
    }
}

(4) 居中对其元素。Blue1和Blue2都与父元素居中对其，Blue2的顶部与Blue1的底部对其

GreenSquare {
    BlueSquare {
        id: blue1
        width: 48; height: 24
        y: 8
        anchors.horizontalCenter: parent.horizontalCenter
    }
    BlueSquare {
        id: blue2
        width: 72; height: 24
        anchors.top: blue1.bottom
        anchors.topMargin: 4
        anchors.horizontalCenter: blue1.horizontalCenter
        text: '(4)'
    }
}

(5) 元素放在父元素中心

GreenSquare {
    BlueSquare {
        width: 48
        anchors.centerIn: parent
        text: '(5)'
    }
}

(6) 元素使用垂直和水平居中线，并在父元素居中向左偏移定位

GreenSquare {
    BlueSquare {
        width: 48
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: -12
        anchors.verticalCenter: parent.verticalCenter
        text: '(6)'
    }
}

# 隐藏的彩蛋

方块已经神奇地被增强以支持拖动。试试这个例子并在一些方块周围拖动。将看到(1)无法拖动，因为它在所有边上都锚定(尽管您可以拖动(1)的父级，因为它根本没有锚定)。 (2)可以垂直拖动，因为只有左侧是锚定的。这同样适用于(3)。 (4)只能垂直拖动，因为两个方块都水平居中。 (5)以父级为中心，因此无法拖动。这同样适用于(6)。拖动一个元素意味着改变它的x,y位置，由于锚定属性比x,y属性更强健，拖动受到锚定线的限制。稍后将在讨论动画时看到这种效果。

← 定位元素输入元素 →