Quick矩形元素的使用和自定义按钮

import QtQuick 2.3

Rectangle {

property alias mouseArea: mouseArea;

property alias topRect:topRect;  //定义属性别名

width:360;      //设置矩形的宽度和高度

height:360;

MouseArea  //定义鼠标的移动区域

{

id:mouseArea;   //定义属性id

anchors.fill: parent;  //布局整个父窗口

}

//添加Rectangle对象

Rectangle

{

rotation: 45;  //设置角度为旋转45

x:40;          //x方向的坐标

y:60;          //y方向的坐标

width:100;     //宽度100

height:100;    //高度100

color:"red";     //颜色为红色

}

Rectangle

{

id:topRect; //id标志符

opacity: 0.6;  //设置透明度为0.6

scale:0.8; //缩小到原来的尺寸的80%

x:135;  //x 方向的坐标

y:60;    //y方向的坐标

width: 100; //宽度100

height:100;  //高度100

radius: 8;  //绘制圆角的矩形

gradient: Gradient //渐变填充属性

 {

GradientStop{position:0.0;color:"#ffffff"}  //顶部的颜色值

GradientStop{position:1.0;color:"teal"}  //底部的颜色值

 }

border  //为矩形添加一个3像素的蓝色边框

{

width:3;

color:blue;

}

}

}

import QtQuick 2.3

import QtQuick.Window 2.0

import QtQuick.Controls 1.2

Window{

visible: true; //设置可以显示

MainForm   //定义一个对象

{

anchors.fill: parent;  //该对象填充整个父窗口

mouseArea.onClicked:   //鼠标单击的处理信号

 {

topRect.visible=!topRect.visible; //控制topRect的隐藏和显示

 }

}

}

二：自定义按钮的实现

import QtQuick 2.0

//将该对象自定义成按钮

Rectangle {

id:btn;    //按钮的id值

width: 100;  //按钮的宽度

height: 62;  //按钮的高度

color:"teal";  //设置按钮的颜色

border.color: "aqua";  //设置按钮的边界颜色

border.width: 3; //设置按钮的边界宽度

Text  //该对象作为按钮的文本

{

id:lable;  //id值

anchors.centerIn:parent; //处在按钮的中间位置

font.pointSize:16; //设置按钮文本的字体大小

text:"开始"; //设置按钮的文本

}

//定义鼠标的事件响应区域

MouseArea

{

anchors.fill: parent;  //整个父窗口都是鼠标的响应区域

onClicked:   //鼠标按下的事件处理代码

{

lable.text="按钮已按下"; //设置按钮已经按下

lable.font.pointSize=11; //改变按钮的字体大小

btn.color="aqua";  //改变按钮的颜色

btn.border.color="teal"; //改变按钮的边界色

}

}

}