QML 自定义窗体 [转]

QML  自定义窗体 [转]

• QML  工程结构

• main.cpp

• 文件目录

• main.qml

import QtQuick 2.14
import QtQuick.Window 2.14
import "common"

FramelessWindow {
    id: mainWindow
    visible: true
    width: 1000
    height: 560
}

• FramelessWindow.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
import "../widgets"

ApplicationWindow {
    id: appWindow
    flags: Qt.Window | Qt.FramelessWindowHint
    color: "transparent"
    ResizeBorder {
        anchors.fill: parent
        dispatcher: appWindow
    }
    RectangularGlow {
        id: grow
        visible: true
        anchors.fill: appContent
        glowRadius: 5
        spread: 0
        color: "#DEDEDE"
    }

    Rectangle {
        id: appContent
        anchors.fill: parent
        anchors.margins: 10
        color: "#ffffff"
        border.color: "#DEDEDE"
    }
}

• DragItem.qml

import QtQuick 2.14
import QtQuick.Controls 2.14

Item {
    id: control
    property alias containsMouse: mouseArea.containsMouse
    property int posType: Qt.ArrowCursor

    implicitWidth: 12
    implicitHeight: 12

    signal posChanged(int xOffset, int yOffset)

    readonly property int posLeftTop: Qt.SizeFDiagCursor
    readonly property int posLeft: Qt.SizeHorCursor
    readonly property int posLeftBottom: Qt.SizeBDiagCursor
    readonly property int posTop: Qt.SizeVerCursor
    readonly property int posBottom: Qt.SizeVerCursor
    readonly property int posRightTop: Qt.SizeBDiagCursor
    readonly property int posRight: Qt.SizeHorCursor
    readonly property int posRightBottom: Qt.SizeFDiagCursor

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        property int lastX: 0
        property int lastY: 0
        onContainsMouseChanged: {
            if(containsMouse) {
                cursorShape = posType
            } else {
                cursorShape = Qt.ArrowCursor
            }
        }
        onPressedChanged: {
            if(containsMouse) {
                lastX = mouseX
                lastY = mouseY
            }
        }
        onPositionChanged: {
            if(pressed) {
                control.posChanged(mouseX - lastX, mouseY - lastY)
            }
        }
    }
}

• ResizeBorder.qml

import QtQuick 2.14
import QtQuick.Controls 2.14

Item {
    id: control
    property var dispatcher: parent
    DragItem {
        id: leftTopHandle
        posType: posLeftTop
        onPosChanged: {
            if(dispatcher.x + xOffset < dispatcher.x + dispatcher.width)
                dispatcher.x += xOffset;
            if(dispatcher.y + yOffset < dispatcher.y + dispatcher.height)
                dispatcher.y += yOffset;
            if(dispatcher.width - xOffset > 0)
                dispatcher.width -= xOffset
            if(dispatcher.height - yOffset > 0)
                dispatcher.height -= yOffset
        }
    }
    DragItem {
        id: rightTopHandle
        posType: posRightTop
        x: parent.width - width
        onPosChanged: {
            if(dispatcher.width + xOffset > 0)
                dispatcher.width += xOffset
            if(dispatcher.height - yOffset > 0)
                dispatcher.height -= yOffset
            if(dispatcher.y + yOffset < dispatcher.y + dispatcher.height)
                dispatcher.y += yOffset
        }
    }
    DragItem {
        id: leftBottomHandle
        posType: posLeftBottom
        y: parent.height - height
        onPosChanged: {
            if(dispatcher.x + xOffset < dispatcher.x + dispatcher.width)
                dispatcher.x += xOffset
            if(dispatcher.width - xOffset > 0)
                dispatcher.width -= xOffset
            if(dispatcher.height + yOffset > 0)
                dispatcher.height += yOffset
        }
    }
    DragItem {
        id: rightBottomHandle
        posType: posRightBottom
        x: parent.width - width
        y: parent.height - height
        onPosChanged: {
            if(dispatcher.width + xOffset > 0)
                dispatcher.width += xOffset
            if(dispatcher.height + yOffset > 0)
                dispatcher.height += yOffset
        }
    }
    DragItem {
        id: topHandle
        posType: posTop
        width: parent.width - leftTopHandle.width - rightTopHandle.width
        x: leftBottomHandle.width
        onPosChanged: {
            if(dispatcher.y + yOffset < dispatcher.y + dispatcher.height)
                dispatcher.y += yOffset
            if(dispatcher.height - yOffset > 0)
                dispatcher.height -= yOffset
        }
    }
    DragItem {
        id: leftHandle
        posType: posLeft
        height: parent.height - leftTopHandle.height - leftBottomHandle.height
        y: leftTopHandle.height
        onPosChanged: {
            if(dispatcher.x + xOffset < dispatcher.x + dispatcher.width)
                dispatcher.x += xOffset
            if(dispatcher.width - xOffset > 0)
                dispatcher.width -= xOffset
        }
    }
    DragItem {
        id: rightHandle
        posType: posRight
        x: parent.width - width
        y: rightTopHandle.height
        height: parent.height - rightTopHandle.height - rightBottomHandle.height
        onPosChanged: {
            if(dispatcher.width + xOffset > 0)
                dispatcher.width += xOffset
        }
    }
    DragItem {
        id: bottomHandle
        posType: posBottom
        x: leftBottomHandle.width
        y: parent.height - height
        width: parent.width - leftBottomHandle.width - rightBottomHandle.width
        onPosChanged: {
            if(dispatcher.height + yOffset > 0)
                dispatcher.height += yOffset
        }
    }
}