《QmlBook》笔记(5):锚

一、概念

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

《QmlBook》笔记(5):锚

一个元素有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: "元素填充它的父元素"
            }
        }

《QmlBook》笔记(5):锚

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

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

《QmlBook》笔记(5):锚

《QmlBook》笔记(5):锚

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

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

 《QmlBook》笔记(5):锚

        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"
            }
        }

《QmlBook》笔记(5):锚

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

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

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

《QmlBook》笔记(5):锚

        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"
            }
        }

《QmlBook》笔记(5):锚 

上一篇:kettle 多表全删全插同步数据 两种方案


下一篇:js中的继承