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

一：矩形的使用

实现的效果图，并且当鼠标在窗口中单击时,会使渐变的矩形时隐时现

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"; //改变按钮的边界色
        }
    }
}

博文索引  持续更新中。。。