一:矩形的使用
实现的效果图,并且当鼠标在窗口中单击时,会使渐变的矩形时隐时现
1,ui.qml文件
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;
}
}
}
2,main.qml文件
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"; //改变按钮的边界色
}
}
}
博文索引 持续更新中。。。