QML学习过程的小记录

花了大概两个半天的时间学习了一下QML编程入门的一些基本内容，在这里简单的记录一下。

一、最基本的qml文件main.qml和其他qml文件

1、main.qml

Window
{
    id: vWindow;

    visible: true;
    width: Screen.desktopAvailableWidth ;   //这个设定了当前Window的界面大小为桌面大小。
    height: Screen.desktopAvailableHeight;
    title: qsTr("Hello World");

//    property var nWidth: Screen.desktopAvailableWidth/1920;   //可以保证在任何一台电脑上显示都不会发生错误
//    property var nHeight: Screen.desktopAvailableHeight/1080;

    //------------------------------------------------------------//

    function selectInterface(nIndex) //不同界面之间的切换
    {
        vMainInterface.visible = false;
        vPlayInterface.visible = false;
        switch (nIndex){
        case 0 :
            vPlayInterface.visible = true;
            break;
        case 1 :
            vMainInterface.visible = true;
            break
        }
    }

    //------------------------------------------------------------//

    MainInterface
    {
        id: vMainInterface;
        anchors.fill: parent;
        visible: true;   //该界面是主界面，所以初始Visible为true
    }

    PlayInterface
    {
        id: vPlayInterface;
        anchors.fill: parent;
        visible: false;  //这是第二个界面，初始化应当不可见
    }
}

一般来说，每一个界面都是在一个单独的qml中实现，最后在main.qml中实例化即可，注意两者的名字要一致

2、其他qml

这里只写一个Button.qml，因为我觉得这一个小按钮包含了许多组件，比如Text、Image等等

（1）Button.qml

由于按钮是经常使用到的，在这里使用一段代码来进行介绍

Rectangle{
    id: vButton_Tool;

    color: "transparent";

    //------------------------------------------------------------//

    property var sPressedImage: "";
    property var sNormalImage: "";
    property var sHoverImage: "";
    property var sTextText: "";
    property var nTextSize: 35;

    property var nIndex: 0;

    //定义一个信号，这个信号用于返回某些参数
    signal back(var nIndex);

    //------------------------------------------------------------//


    //button image
    Image{
        id: vButtonImage;

        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 10;
        width: 100;
        height: 100;
        source: sNormalImage;
    }

    //------------------------------------------------------------//

    //button text
    Text{
        id: vButtonText;

        x: 0;
        anchors.top: vButtonImage.bottom;
        anchors.topMargin: 0;
        width: parent.width;
        height: 40;
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignVCenter;
        wrapMode: Text.WordWrap;
        color: "#000000";
        font.family: "微软雅黑";
        font.pixelSize: nTextSize;
        font.letterSpacing: 1;
        font.bold: true;
        text: sTextText;

    }

    //------------------------------------------------------------//

    //状态机，定义了一些状态，用于根据state的值来修改某些参数。
    states: [
        State{
            name: "normal";
            PropertyChanges{
                //表示当该button的state变为normal时，target指目标即vButtonImage这个ID的对象，他的source属性将赋值为sNormalImage
                target: vButtonImage;
                source: sNormalImage;
            }
        },
        State{
            name: "pressed";
            PropertyChanges{
                target: vButtonImage;
                source: sPressedImage;
            }
        },
        State{
            name: "hover";
            PropertyChanges{
                target: vButtonImage;
                source: sHoverImage;
            }
        }
    ]
    //------------------------------------------------------------//

    //button mousearea
    MouseArea{
        id: vButtonMouseArea;

        anchors.fill: parent;
        //说明当前接受鼠标的哪些按键事件，左键，右键，中键
        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MidButton;
        //说明鼠标悬停事件时候可被触发，默认为false；当为false时onEntered和onExited将会无效。
        hoverEnabled: true;
        onPressed:{
            //当前鼠标按钮，将当前按钮的状态设置为按下状态
            if(vButton_Tool.state === "normal"){
                vButton_Tool.state = "pressed";
            }
        }
        onReleased:{
            //鼠标按下释放掉了，返回一个信号，告诉我的上层父亲，我被按下了，需要执行相应操作
            back(nIndex);
        }

        onEntered:{
            if(vButton_Tool.state === "normal"){
                vButton_Tool.state = "hover";
            }

        }
        onExited:{
            if(vButton_Tool.state === "hover"){
                vButton_Tool.state = "normal";
            }
        }
        onWheel:{

        }
    }
}

总结一下：Button按钮在创建的时候需要定义如下内容：

按钮背景图：只定义图片变量，不赋值，实例化的时候再为这些变量赋值

按钮上的文字：同上

状态机：鼠按钮的几种状态，以及在各个状态下的组件的变化情况

鼠标区域：鼠标操作，控制状态变化

那么引用的时候应该怎么办呢

Button_Tool{
            id: playMP3;
            width: parent.width;
            height: 150;
            sNormalImage: "image/PreviewPlayOn.png";
            sPressedImage: "image/PreviewPlay.png"
            sHoverImage: "image/PreviewDisable.png"
            sTextText: "播放音乐";
            nTextSize: 25;
            state: "normal";
            onBack:{
                if(playMP3.state === "pressed"){
                    playMusic.mediaControl(0);
                }
                else{
                    playMusic.mediaControl(1);
                }
            }
        }

在使用定义好的Button时，要为按钮上的图片和文字进行赋值，要将按钮的状态初始化，同时定义信号对应的槽函数进行响应

（2）其他

（A）列布局（垂直布局管理器）

Column{
        id: sColumnButtonList;

        anchors.top: parent.top;
        anchors.topMargin: 150;
        anchors.left: parent.left;
        anchors.leftMargin: 100;
        width: 150;
        height: 320;
        //说明当前这个list下面每个Button孩子的排列间距
        spacing: 40;

        function setChildrenState(nIndex){
            for(var i = 0 ; i < sColumnButtonList.children.length; i++){
                if(nIndex === i){
                    sColumnButtonList.children[i].state = "pressed";
                }
                else{
                    sColumnButtonList.children[i].state = "normal";
                }
            }
        }
    }

上面的这段函数主要是为了介绍如何获取和设置列布局中各个元素的状态

（B）媒体播放器

MediaPlayer{
        id: playMusic
        source: "video/Daoko.wmv";
        function mediaControl(nIndex){
            switch (nIndex){
            case 0:
                playMusic.play();
                break;
            case 1:
                playMusic.stop();
                break;
            }
        }
    }

（C）动画

Image{
        id: animationImage;

        property var nX: 400;
        property var nY: 150;

        x: 400;
        y: 150;
        width: 500;
        height: 500;
        source: "image/013.jpg";

        SequentialAnimation{
            id: imageAnimation;

            loops: Animation.Infinite;

            function animationControl(nIndex){
                switch (nIndex){
                case 0:
                    imageAnimation.start();
                    break;
                case 1:
                    imageAnimation.stop();
                    animationImage.x = animationImage.nX;
                    animationImage.opacity = 1;

                    break;
                }
            }

            NumberAnimation{
                target: animationImage;
                property: "x";
                from: animationImage.x;
                to: animationImage.nX - 50;
                duration: 1000;

            }

            NumberAnimation{
                target: animationImage;
                property: "opacity";
                from: animationImage.opacity;
                to: 0.4;
                duration: 1000;
            }

            ParallelAnimation{
                NumberAnimation{
                    target: animationImage;
                    property: "x";
                    from: animationImage.nX - 50;
                    to: animationImage.nX;
                    duration: 1000;

                }

                NumberAnimation{
                    target: animationImage;
                    property: "opacity";
                    from: 0.4;
                    to: 1;
                    duration: 1000;
                }
            }
        }
    }

由于动画不经常使用到，所以先只放上别人写好的代码，之后用到了再回来仔细研究

二、良好的工程习惯

1、修改构建目录

在工程目录下创建bin目录，或者之间将构件目录路径改为./bin

2、创建目录

通常在工程目录下创建如下几个文件夹：

bin：构建目录，用来存放编译的文件

cpp：用来存放.h和.cpp文件

deploy：用来存放用于发布的文件

qml：用来存放qml文件和其他资源文件夹（如图片、字体、视频等），如下图所示：

注意：将工程中的main.qml文件放到qml文件夹下时，需要修改main.cpp里面的url路径如下：

const QUrl url(QStringLiteral("qrc:/qml/main.qml"));

之后创建的qml文件都放在qml目录下即可

3、创建新的资源库

在Resources下默认只有一个qml.qrc

可以创建其他的资源库，如font.qrc、image.qrc等，用于存放对应的资源

若想向资源库中添加资源，只需右击.qrc，选择“添加现有文件”即可

END~