用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.