用Rectangle创建基本的布局

Rectangle是基本的Qml类型，我将介绍如何在一个rectangle中嵌入两个rectangle。首先看一下截图：



红色的rectangle有两个儿子，一个是蓝色的，另一个是绿色的。
像下面一样创建一个test.qml文件
import QtQuick 2.0
Rectangle {
Rectangle {
id: r1
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
anchors.topMargin: 5
width: 107
height: 309
color: "red"
Rectangle {
id: r11
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: r1.top
anchors.topMargin: 5
width: 90
height: 94
color: "blue"
}
Rectangle {
id: r12
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: r11.bottom
anchors.topMargin: 5
width: 90
height: 94
color: "green"
}
}
}
最外面的rectangle可以被忽略。现在用下面的命令运行test.qml文件
~/Qt5.2.0/5.2.0/gcc_64/bin/qmlscene ./test.qml
你应该能够看到上面的图了。注意，不要忘记设置rectangle的width属性，否则你不会看到内部的rectangle.