qml中使用锚布局

anchor提供了一种方式，可以通过指定一个元素和其他元素的位置关系来确定元素在界面上的位置。
每个Item中都有7条不可见的锚线，左,右，上，下，水平中心，竖直中心，基线，其中基线是用来定位文本的，在没有文本的图元中，基线和top是一样的。
另外还有4个元素可以指定边缘的空白（margin），分别是leftMargin , rightMargin,topMargin,bottomMargin。 其实使用跟css有点类似

具体看下面的使用例子，在例子中跟别对包含在内的两个矩形框进行的布局，制定了他的left，top的边框间隔，以及颜色渐变等。
具体代码如下：

import QtQuick 2.2
import QtQuick.Window 2.1

Rectangle{

    width:300;
    height: 200;

    Rectangle{
        id:rect1;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        anchors.top: parent.top;
        anchors.topMargin: 20;
        width: 120;
        height: 120;

        gradient: Gradient{
            GradientStop{
                position:0.0;
                color: "#202020";
            }
            GradientStop{
                position: 1.0;
                color: "#a0a0a0";
            }
        }
    }



    Rectangle{
        anchors.left: rect1.right;
        anchors.leftMargin: 20;
        anchors.top: rect1.top;

        width: 120;
        height: 120;

        rotation: 90;
        gradient: Gradient{
            GradientStop{
                position: 0.0;
                color:"#202020";

            }
            GradientStop{
                position:1.0;
                color:"#a0a0a0";
            }
        }

    }

}

运行效果如下：

锚点布局还是很简单的