qml之从零开始编写网易云音乐（一）

github:

https://github.com/qq574582775/Qml-Frameless-application-framework

初步实现无边框窗口，以及左边的导航栏，效果如下：

主要包括无边框窗体以及左边的导航栏。

无边框窗体设计思路：

1、主窗体设置无边框属性。

 

flags:Qt.FramelessWindowHint | Qt.Window;

2、标题栏拖拽移动。

 

    MouseArea{
        property real xmouse;   //鼠标的x轴坐标
        property real ymouse;   //y轴坐标
        anchors.fill: parent
        //cursorShape: Qt.SizeAllCursor;

        onPressed: {
                    xmouse=mouse.x;
                    ymouse=mouse.y;
                }

        onPositionChanged: {
            parentObj.x=parentObj.x+(mouse.x-xmouse);
            parentObj.y=parentObj.y+(mouse.y-ymouse);
        }
        onDoubleClicked: {
            maxBtn.onClicked();
        }
    }

3、拖拽变换窗体尺寸。

 

MouseArea{
    property var clickPos;
    property int type:1;
    property QtObject parentObj;
    property bool needChange: false;
    width: 5
    height: 5
    cursorShape: {
        switch(type){
        case 1:
        case 2:
            return Qt.SizeVerCursor;
        case 3:
        case 4:
            return Qt.SizeHorCursor;
        case 5:
        case 8:
            return Qt.SizeFDiagCursor;
        case 6:
        case 7:
            return Qt.SizeBDiagCurs