《QmlBook》笔记（5）：锚

一、概念

anchors是 Item 的基本属性。可以被所有的可视化QML元素使用。

一个元素有6条锚定线：

• top
• bottom
• left
• right
• horizontalCenter
• verticalCenter

在文本元素 Text 中有一条文本的锚定基线（baseline） 。

每一条锚定线都有一个 offset 值，top、bottom、left、right 的锚定线中的它被称作边距。对于 horizontalCenter、verticalCenter、baseline被称作偏移值。

二、示例

BlueSquare.qml

import QtQuick 2.0

Rectangle
{
    width: 12
    color:"#0000FF"
    property alias text: centertxt.text
    Drag.active: dragArea.drag.active;//开启拖拽

    Text
    {
        id:centertxt
        font.pixelSize:20
        anchors.centerIn: parent
        color: "#000000"
    }
    MouseArea
    {
        id: dragArea;
        anchors.fill: parent;
        drag.target: parent;
    }
}

        Rectangle
        {
            width: 200
            height: 120
            color:"#005536"

            BlueSquare
            {
                anchors.fill: parent
                anchors.margins: 8
                text: "元素填充它的父元素"
            }
        }

即使中心的子项开启了拖拽实际上也无法拖拽，因为拖拽实际上是改变项目的x、y值，这里设置了锚填充父项，即它的每条边都被固定了。

        Rectangle
        {
            width: 200
            height: 120
            color:"#005536"
            BlueSquare
            {
                width: 100
                height: 100//这种情况要设置宽高才会显示
                anchors.left: parent.left
                anchors.leftMargin: 8
                text: "元素左对齐它的父元素"
                color:"#0000FF"
            }
        }

 这个子项可以上下拖拽，因为它只固定了左边。

        Rectangle
        {
            width: 200
            height: 120
            color:"#005536"
            BlueSquare
            {
                width: 100
                height: 100//这种情况要设置宽高才会显示
                anchors.left: parent.right
//                anchors.leftMargin: 8
                text: "元素的左边与它父元素的右边对齐"
                color:"#0000FF"
            }
        }

 

        Rectangle
        {
            width: 200
            height: 120
            BlueSquare
            {
                id:fense
                width: 100
                height: 100
                anchors.horizontalCenter: parent.horizontalCenter
                text: "粉色"
                color:"#FF00FF"
            }

            BlueSquare
            {
                width: 100
                height: 100
                anchors.top: fense.bottom
                anchors.topMargin: 4
                anchors.horizontalCenter: fense.horizontalCenter
                text: "元素中间对齐"
                color:"#44AA55"
            }
        }

 这里可以拖拽粉色项但不能拖拽绿色项，因为设置了绿色项顶部依赖于粉色项的底部。

        Rectangle
        {
            width: 200
            height: 120
            color:"#005536"

            BlueSquare
            {
                width: 100
                height: 100
                anchors.centerIn: parent
                text: "元素在它的父元素中居中"
                color:"#FF00FF"
            }
        }

        Rectangle
        {
            width: 200
            height: 120
            color:"#005536"

            BlueSquare
            {
                width: 100
                height: 100
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: -20
                anchors.verticalCenter: parent.verticalCenter
                text: "元素水平方向居中对齐父元素并向左偏移20像素，垂直方向居中对齐"
                color:"#FF00FF"
            }
        }