6

Qt Quick Windows 下实现无边框窗口阴影效果

 3 years ago
source link: https://www.mycode.net.cn/language/2915.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Qt Quick Windows 下实现无边框窗口阴影效果

Qt Quick 中实现一个无边框窗口阴影效果的中心思想是将 Window 容器背景设置为透明的,在 Windows 容器中添加一个填满窗口的容器(如 Page、Rectangle 等),然后将这个容器设置一些边距,再给这个容器附加一个阴影效果,实现的效果如下:

2020-02-17_20-42-59.png
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0

Window {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    // 无边框窗口
    flags: Qt.Window | Qt.FramelessWindowHint
    // 设置窗口背景色为透明
    color: "#00000000"

    Rectangle {
        id: mainLayout
        // 一个填满窗口的容器,Page、Rectangle 都可以
        anchors.fill: parent
        // 当窗口全屏时,设置边距为 0,则不显示阴影,窗口化时设置边距为 10 就可以看到阴影了
        anchors.margins: mainWindow.visibility === Window.Maximized ? 0 : 10
    }

    DropShadow {
        anchors.fill: mainLayout
        horizontalOffset: 1
        verticalOffset: 1
        radius: 8
        samples: 16
        source: mainLayout
        color: "#33333F"
        Behavior on radius { PropertyAnimation { duration: 100 } }
    }
}

这样设置后可以看到窗口阴影的效果,但是还是有一些缺点的, 当你使用一些 Dialog、Popup 控件时,并设置 modal 为 true 的情况下,Dialog 这类浮层窗口会显示一个黑色背景,此时黑色背景的边缘是以 Window 为基础的,而不是我们放到 Window 中的容器。

本条目发布于2020年2月17日。属于LanguageQML分类,被贴了 QMLQt 标签。 ← Qt QML qtquickcontrols2.conf 使用系统未安装的自定义字体 使用 CMake + Git Submodule 方式管理项目三方库 →

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注

评论

姓名 *

电子邮件 *

站点


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK