anchors布局

anchors布局

import QtQuick 2.2
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        width: 300;
        height: 200;
        color: "blue";

        Rectangle {
             id: rectl;
             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: rectl.right;
            anchors.leftMargin: 20;
            anchors.top: rectl.top;
            anchors.topMargin: 20;

            width: 120;
            height: 120;
            rotation: 90;
            gradient: Gradient {
                GradientStop {position: 0.0;color: "#202020";}
                GradientStop {position: 1.0;color: "#A0A0A0";}
        }
    }
  }
}

运行结果如下：

示例中第二个矩形的左边从第一个矩形的右边开始，顶部比第一个顶部低20.对于第一个矩形的引用，是通过它的id属性来完成的。

centerIn表示将一个Item居中放置到另一个Item中；fill表示充满某个Item。

import QtQuick 2.2
import QtQuick.Window 2.2


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        width: 300;
        height: 200;
        color: "blue";

        Rectangle {
            color: "red";
            anchors.fill: parent;
            border.width: 6;
            border.color: "#121212";

            Rectangle {
                anchors.centerIn: parent;
                width: 120;
                height: 120;
                radius: 8;         //圆角矩形
                border.width: 2;
                border.color: "black";
                antialiasing: true;     //消除混叠现象
                color: "red";

            }
        }
    }

}

运行结果如下：