第14章：QML之Anchor

1，Anchor（锚）
用来元素的位置布局
2，代码

import QtQuick 2.6

//anchors(锚)
//1，每一个元素都有一组锚线：left,horizontal,Center,right,top,verticalCenter,bottom
//2，这些元素对应了元素中的：anchors.left,anchors.horizontalCenter等
//3，锚系统还允许为一个元素的锚指定边距（margin）和偏移（offert），边距指定了元素锚到外边界的空间里
//   偏移允许使用中心锚来定位
//4，一个元素可以通过leftMargin,rightMargin,topMargin,bottomMargin来独立指定边距
//5，锚偏移使用horizontalCenterOffset, verticalCenterOffset, baselineOffset来指定
//6，通常使用anchors.fii将一个元素充满另一个元素



Rectangle {
    property alias mouseArea: mouseArea                //定义属性别名

    property alias chgRect1: changingRect1             //定义矩形1，矩形2的属性别名
    property alias chgRect2: changingRect2
    property alias redRect: redRect                    //定义红色矩形的属性别名
    property alias blueRect: blueRect


    width: 360
    height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    /*使用Anchor对三个矩形元素进行横向布局*/
    BlueRectangle{
        id: blueRect
        anchors.left: parent.left                      //与窗口的左锚线锚定
        anchors.top: parent.top                        //与窗口的顶锚线锚定
        anchors.leftMargin: 25                         //左锚边距
        anchors.topMargin: 25                          //右锚边距
    }

    GreenRectangle{
        id: greenRect
        anchors.left: blueRect.right                   //绿矩形左锚线与蓝矩形的右锚线锚定
        anchors.top: blueRect.top                      //绿矩形顶锚线与蓝矩形顶锚线锚定
        anchors.leftMargin: 40                         //左边边距（与蓝矩形的边距）
    }

    RetRectangle{
        id: redRect
        anchors.left: greenRect.right
        anchors.top: greenRect.top
        anchors.leftMargin: 40
    }


    RetRectangle{
        id: changingRect1
        anchors.left: parent.left
        anchors.top: blueRect.bottom
        anchors.leftMargin: 25
        anchors.topMargin: 25
    }

    RetRectangle{
        id: changingRect2
        anchors.left: parent.left
        anchors.top: changingRect1.bottom
        anchors.leftMargin: 25
        anchors.topMargin: 20
    }

    Button{
        width: 95; height: 35
        anchors.right: redRect.right
        anchors.top: changingRect2.bottom
        anchors.topMargin: 10
    }


}

import QtQuick 2.0
//文件名为button.qml

Rectangle{
    id: btn
    property bool btnClick: false

    width: 100; height: 62                  //大小

    color: "teal"                           //颜色
    border.color: "aqua"                    //边框颜色
    border.width: 3                         //按钮边框

    Text{
        id: label

        anchors.centerIn: parent
        font.pointSize: 16
        text: "开始"
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            if (btnClick == false)
            {
                label.text = "按钮已按下"
                label.font.pointSize = 11
                btn.color = "aqua"
                btn.border.color = "teal"

                //改变changingRect1d的右锚属性
                chgRect1.anchors.left  = undefined
                chgRect1.anchors.right = redRect.right

                chgRect2.anchors.left = redRect.right
                chgRect2.anchors.left = undefined

                btn.btnClick = true
            }
            else
            {
                label.text = "开始"
                btn.color  ="teal"                           //颜色
                btn.border.color = "aqua"                    //边框颜色

                chgRect1.anchors.left  = undefined
                chgRect1.anchors.right = blueRect.right

                chgRect2.anchors.left = blueRect.right
                chgRect2.anchors.left = undefined

                btn.btnClick = false

            }

        }
    }

}

3，效果