项目场景

窗口多样性(微信,钉钉,飞书,或者一些炫酷的游戏平台)
而原生的qt标题栏开放的功能是有限,无法让标题跟我们的app风格一致
而且原生的标题栏是受到系统控制的,不同的系统有不同样式

对于设计而言,如果标题栏能融入我们app的风格,那肯定是比较高大上的,比方说app是机甲风格,标题栏不是黑就是白色,是不是就会觉得很low。

那官方也提供的答案就是移除原生标题栏自己绘制
创建一个无边框的窗口

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    flags: Qt.FramelessWindowHint


    Rectangle{
        anchors.fill: parent
        border.color: "#BDBDBD"

    }

}

但是很遗憾,四周就没有了阴影效果了
所以有点不尽人意。

而本章就是使用开源库QWindowkit进行解决上述问题实现自定义窗口,
底层代码就是使用平台系统接口重绘QWindow的边框与阴影效果
qwindowkit下载地址 https://github.com/stdware/qwindowkit

qwindowkit提供了qwidget,qquick的使用
根据自己的项目需求进行选择吧。
本章则以qquick的引入qwindowkit展开

项目步骤

1. 编译安装qwindowkit

拉取项目到本地

git clone --recursive https://github.com/stdware/qwindowkit

用qtcreator,选择qt6 套件打开
在这里插入图片描述
修改生成配置
这里我配置生成为quick使用(静态库),其他默认
取消勾选qwidget,qquick勾选(我们是qquick项目引入qwindowkit)
在这里插入图片描述
查看安装位置CMAKE_INSTALL_PREFIX
设置自己想要安装的路径
在这里插入图片描述
cmake勾选上install(安装)
cmake执行,点击构建(ctrl+B)
在这里插入图片描述
在安装路径中就可以看到输出文件了
在这里插入图片描述

2.项目引入qwindowkit

剩下的其实跟qwindowkit文档的一样了

cmake项目引入

#设置 QWindowKit_DIR 特定查找路径
set(QWindowKit_DIR "/path/install/lib/cmake/QWindowKit")
find_package(QWindowKit COMPONENTS Core #[[Widgets]] Quick REQUIRED)
# target_link_libraries(widgets_app PUBLIC QWindowKit::Widgets)
target_link_libraries(quick_app PUBLIC QWindowKit::Quick)

qmake项目引入
引入我们安装好的qwindowkit

#include("/path/install/share/QWindowKit/qmake/QWKWidgets.pri")
include("/path/install/share/QWindowKit/qmake/QWKQuick.pri")

main.cpp,使用qwindowkit
注册qml类型

#include <QWKQuick/qwkquickglobal.h>

int main(int argc, char *argv[])
{
    // ...
    QQmlApplicationEngine engine;
    // ...
    QWK::registerTypes(&engine);
    // ...
}

main.qml
引入模块,使用WindowAgent

import QtQuick 2.15
import QtQuick.Window 2.15
import QWindowKit 1.0

Window {
    id: window
    visible: false // We hide it first, so we can move the window to our desired position silently.
    Component.onCompleted: {
        windowAgent.setup(window)
        window.visible = true
    }
    WindowAgent {
        id: windowAgent
        // ...
    }
}

3.集成qwindowkit源码

如果是cmake项目,可以直接集成qwindowkit源码,就将他放到项目路径下面
qmake就不能集成源码了,因为qwidowkit是cmake项目

    set(QWINDOWKIT_BUILD_STATIC ON)
    set(QWINDOWKIT_BUILD_WIDGETS OFF)
    set(QWINDOWKIT_BUILD_QUICK ON)
    set(QWINDOWKIT_INSTALL OFF)
    add_subdirectory(3rdparty/qwindowkit)
    target_link_libraries(quick_app PUBLIC QWindowKit::Quick)

问题总结

运行程序,发现最上边有一条黑边

为什么会出现黑边?
根本原因:
Qt Quick 窗口默认不使用 alpha 通道(透明度)
系统窗口管理器在合成窗口时,如果窗口没有 alpha 通道,会使用不透明的黑色背景
在某些系统(特别是 macOS 和 Windows 10/11 的某些主题下),窗口边缘会出现 1-2 像素的黑边
这是窗口阴影、DWM 合成、或系统窗口装饰的残留

main.cpp中新增,

QQuickWindow::setDefaultAlphaBuffer(true);

提升视觉效果,但是增加了性能开销

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐