QML学习

创建项目
略
Main.qml

/*qml文件包含两大部分：import、对象声明*/


/*import部分*/
import QtQuick 2.7
import QtQuick.Window 2.2
/*对象声明部分*/
//对象
Window {
//属性
    visible: true
    width: 640
    height: 480
    title: qsTr("Rectangle")
    MainForm{
        anchors.fill:parent
        mouseArea.onClicked:{
            topRect.visible=!topRect.visible//控制矩形对象的可见性
        }
    }
}

MainFrom.ui.qml

import QtQuick 2.7
/*Qt Quick通过Rectangle类型绘制矩形*/
Rectangle{
    /*alias:申明属性的别名，形式：property alias 别名：属性名*/
    /*别名作用：在外部QML文件中也可以访问该属性               */
    property alias mouseArea:mouseArea
    property alias topRect:topRect
    width: 360
    height:360
    MouseArea{
        /*每个对象可以指定唯一一个id，可以在其他对象中识别并引用              */
        /*MouseArea的id是mouseArea，可以通过该id引用MouseArea            */
        /*id必须唯一                                                   */
        /*MouseArea和TextEdit是默认子对象                               */
        /*MouseArea：响应鼠标事件的区域                                  */
        /*anchors.fil:进行布局，设为parent表示充满整个区域                 */
        /*TextArea:text的值是要输出显示的文本                             */
        /*anchors.top/anchors.horizontalCenter/anchors.topMargin进行布局*/
        id:mouseArea
        anchors.fill: parent
    }
    Rectangle{
        rotation:45//旋转角度45°
        x:40//x方向坐标
        y:60//y方向坐标
        width:100//矩形宽度
        height:100//矩形高度
        color:"red"//矩形颜色
    }
    Rectangle{
        id:topRect
        opacity:0.6//透明度60%
        scale:0.8//缩小为原尺寸80%
        x:135
        y:60
        width:100
        height:100
        radius:8//设置圆角矩形
        /*gradient设置渐变:格式“属性：对象{列表}”                      */
        /*列表有参数：position、color                                */
        /*position：y轴位置，0.0表示顶部，1.0表示底部，浮点数表示中间的位置*/
        /*color:    颜色                                            */
        gradient:Gradient{
            GradientStop{
                position: 0.0;
                color:"aqua"
            }
            GradientStop{
                position: 1.0;
                color: "teal"
            }
        }
        /*添加边框：蓝色边框、3像素*/
        border{
            width: 3;
            color: "blue"
        }
    }
}

运行结果
点击界面会右侧正方形消失、复现