QML实现窗口拖拽与阴影

模仿网易云写了一个窗口

参考了网上一些资料

ApplicationWindow {

    id:mainWindow

    visible: true

    width: 1050

    height: 689

    color: "#00000000"		//主窗口透明

    flags: Qt.FramelessWindowHint

// 设置只有点到标题栏内才能拖动

        MouseArea {

            x: 10

            y: 10

            height: 50

            width: parent.width-20

            acceptedButtons: Qt.LeftButton

            property point clickPos: "0,0"

            onPressed: {

                 clickPos  = Qt.point(mouse.x,mouse.y)

            }

            onPositionChanged: {

                var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)

                mainWindow.setX(mainWindow.x+delta.x)

                mainWindow.setY(mainWindow.y+delta.y)

            }

        }

// 测试了一下 比主窗口小20左右, 阴影的效果才比较好

    Rectangle {

           id:mainRec

           width: parent.width-20

           height: parent.height-20

           anchors.centerIn: parent

           TopView{

               width: parent.width

               anchors.top: parent.top

           }

           BottomView{

               id:bottomVvv

               width: parent.width

               anchors.bottom: parent.bottom

           }

    }

// 用两个dropshadow写出四边阴影 颜色代码用8位 百分之20透明度

    DropShadow {

           anchors.fill: mainRec

           horizontalOffset: -5

           verticalOffset: -5

           radius: 12.0

           samples: 25

           color: "#20000000"

           spread: 0.0

           source: mainRec

    }

    DropShadow {

            anchors.fill: mainRec

            horizontalOffset: 5

            verticalOffset: 5

            radius: 12.0

            samples: 25

            color: "#20000000"

            spread: 0.0

            source: mainRec

        }

效果和网易云对比

}

但是有一个问题, 网易云的阴影是不算在窗口里的,点击阴影部分会跳到软件后面的程序

 而QML实现阴影一般都是用一个rectangle包含在window里面, 所以阴影算作窗口的一部分

点击阴影部分还是相当于点窗口,