一：矩形的使用
實現的效果圖，並且當鼠標在窗口中單擊時,會使漸變的矩形時隱時現
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"; //改變按鈕的邊界色 } }}博文索引 持續更新中。。。