元素可以被分为可视化元素与非可视化元素。一个可视化元素（例如矩形框Rectangle）有着几何形状并且可以在屏幕上显示。一个非可视化元素（例如计时器Timer）提供了常用的功能，通常用于操作可视化元素。现在我们将专注于几个基础的可视化元素，例如Item（基础元素对象），Rectangle（矩形框），Text（文本）Image（图像）和MouseArea（鼠标区域）。

基础元素对象（Item Element）
Item（基础元素对象）是所有可视化元素的基础对象，所有其它的可视化元素都继承自Item。它自身不会有任何绘制操作，但是定义了所有可视化元素共有的属性：

代码

import QtQuick 2.0 Item{width:540 height:320 Rectangle{id: rect1 x: 12 y: 12 width: 76 height: 96 color: "lightsteelblue" MouseArea{id:areawidth:parent.widthheight:parent.heightonClicked:rect2.visible = !rect2.visible}}Rectangle{id:rect2x:112y:12width:96height:96 border.color:"lightsteelblue"border.width:4radius:60}Rectangle{id:rect3x:240;y:12width:176;height: 96 gradient: Gradient{//从上到下渐变 GradientStop{position:0.0;color:"lightsteelblue"}//顶点颜色 GradientStop{position:1.0;color:"slategray"}//底部颜色}border.color:"slategray"}Text{x:12y:120width:40height:120text:"The quick brown fox"//可省略字符 //elide:Text.ElideMiddlestyle:Text.Sunken //verticalAlignment:Text.AlignTop // only sensible when no elide mode //wrapMode:Text.WordWrap//可换行字符color:"#303030"font.family:"Ubuntu"font.pixelSize:28}Image{x:12;y:180 //width:48 //height:118source:"assets/rocket.png"}Image{x:112;y:180width:48height:118/2source:"assets/rocket.png"fillMode:Image.PreserveAspectCropclip:true}}

效果