anchors布局

import QtQuick 2.2
import QtQuick.Window 2.2
Window {visible: truewidth: 640height: 480title: 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.2Window {visible: truewidth: 640height: 480title: 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";}}}}

运行结果如下：