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

【问题标题】：Create custom shadow for frameless window in qml在 qml 中为无框窗口创建自定义阴影
【发布时间】：2017-03-19 10:07:06
【问题描述】：

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

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

这是我的 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
}

}

【问题讨论】：

标签： qt qml

【解决方案1】：

您可以通过使阴影成为应用程序的一部分而不是操作系统窗口管理器中的装饰来做到这一点：

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"
    }
}

【讨论】：