用Rectangle创建基本的布局

来源：互联网发布：淘宝的聊天记录怎么查编辑：程序博客网时间：2024/05/16 09:41

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

红色的rectangle有两个儿子，一个是蓝色的，另一个是绿色的。

像下面一样创建一个test.qml文件

import QtQuick 2.0Rectangle {    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.

0 0