在qml中为无框窗口创建自定义阴影

时间:2016-11-05 18:45:01

标签: qt qml

我知道这可能是"Shadow for qml frameless windows"的重复。
我完全创建了一个新的标题栏,其中包含不同的最大最小值和关闭按钮以及拖放功能但是唯一剩下的就是自定义或只是我的无框窗口的阴影。我在Qt和qml中完成了newbe。
感谢您的进一步帮助。

我的应用程序带有自定义标题栏

enter image description here



这是我的qml文件

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
//import QtQml 2.2
Window {
property int titlebar_wrapper_size:40
FontLoader { id: segoe_light; source: "fonts/segoe_light" }
id:registerWindow
width:800
height:600
visible:true
x:Screen.width/2 - width/2
y:Screen.height/2 - height/2
//x: Screen.desktopAvailableWidth/2 - width
//y: Screen.desktopAvailableHeight/2 - height

flags: Qt.FramelessWindowHint |
       Qt.WindowMinimizeButtonHint |
       Qt.Window

MouseArea {
    id:dragparentwindow
    width: parent.width
    height: 57
    property real lastMouseX: 0
    property real lastMouseY: 0
    onPressed: {
        lastMouseX = mouseX
        lastMouseY = mouseY
    }
    onMouseXChanged: registerWindow.x += (mouseX - lastMouseX)
    onMouseYChanged: registerWindow.y += (mouseY - lastMouseY)
}
Rectangle{
    id:titlebar
    width: parent.width
    Rectangle{
        id:appclose
        height: titlebar_wrapper_size
        y:0
        width: titlebar_wrapper_size
        anchors.right: parent.right
        Text{
            //text: awesome.loaded ? awesome.icons.fa_money : "x"
            text: "×"
            anchors.horizontalCenter: parent.horizontalCenter
            font.pointSize: 20
        }
        MouseArea{
            width: parent.width
            height: parent.height
            hoverEnabled: true
            onEntered: appclose.color="#ddd"
            onExited: appclose.color="#fff"
            onClicked: Qt.quit()
        }
    }
    Rectangle{
    id:appminimize
    height: titlebar_wrapper_size
    y:0
    width: titlebar_wrapper_size
    anchors.right: appclose.left
    Text{
        text: ''
        font.family: segoe_light.name
        anchors.horizontalCenter: parent.horizontalCenter
        font.pointSize: 15
    }
    MouseArea{
        width: parent.width
        height: parent.height
        hoverEnabled: true
        onEntered: appminimize.color="#ddd"
        onExited: appminimize.color="#fff"
        onClicked: registerWindow.visibility = Window.Minimized
    }
}

}
Text{
    text:"XTE"
    font.family: segoe_light.name
    font.pointSize: 85
    anchors.horizontalCenter: parent.horizontalCenter
    y:70
}

TextField{
    id:registername
    style : TextFieldStyle {
        background:Rectangle{
            border.color: "#ccc"
            radius:17

        }
    }
    width:400
    height:50
    y:420
    font.pointSize: 17
    font.family: segoe_light.name
    textColor:"#555"
    placeholderText: " Enter a nickname ..."
    anchors.horizontalCenter: parent.horizontalCenter
    //anchors.verticalCenter: parent.verticalCenter

}

Text{
    id:login
    text:"Login"
    color: "#0084ff"
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: registername.bottom
    anchors.topMargin: 17
    font.family: segoe_light.name
    font.pointSize: 22
}

}

1 个答案:

答案 0 :(得分:1)

您可以通过将阴影作为应用程序的一部分而不是OS窗口管理器的装饰来实现:

import QtQuick 2.4
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    id: main
    visible: true
    width: 300
    height: 200
    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.Window

    Rectangle {
      id: rect
      width: 290
      height: 190
      x: 5
      y: 5
    }

    DropShadow {
      anchors.fill: rect
      horizontalOffset: 2
      verticalOffset: 2
      radius: 5
      samples: 5
      source: rect
      color: "black"
    }
}

enter image description here