第14章：QML之Visual Elements

1， 可视元素

2， 源码

import QtQuick 2.6

Rectangle {
    property alias mouseArea: mouseArea                    //属性别名
    property alias topRect: topRect

    width: 360
    height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    Rectangle{

        rotation: 45                                       //选择45°
        x: 40                                              //x方向坐标位置
        y: 60                                              //y方向坐标位置
        width: 100                                         //宽度
        height: 100                                        //高度
        color: "red"                                       //颜色
    }

    Rectangle{
        id: topRect                                        //ID标识符
        opacity: 0.6                                       //透明的
        scale: 0.8                                         //缩小为原尺寸
        x: 135
        y: 60
        width: 100
        height: 100
        radius: 8                                          //绘制成圆角矩形
        gradient: Gradient{                                //以垂直方向的渐变色填充矩形
            GradientStop{position: 0.0; color: "#ffffff"}
            GradientStop{position: 1.0; color: "teal"}
        }

        border{width: 3; color: "blue"}                    //为矩形添加一个3个像素的蓝色边框
    }
}

//Rectangle:项目用来使用纯色或者渐变来填充一个区域，也经常用来存放其他项目
//color:    用一个纯色来填充；
//gradient: 指定一个Gradient元素定义的渐变来填充
//border:   可以为一个矩形添加一个可选的边界，并通过border.color和border.width为其指定颜色和宽度
//radius:   来产生一个圆角的矩形
//smooth:   可以提高外观表现


Rectangle{
    width:   100

    height:  100

    gradient: Gradient {
             GradientStop { position: 0.0; color: "lightsteelblue" }
             GradientStop { position: 1.0; color: "blue" }
    }

    border.color: "black"

    border.width: 10

    radius: 10
}

3， 效果