qml自定义窗口
项目场景
窗口多样性(微信,钉钉,飞书,或者一些炫酷的游戏平台)
而原生的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);
提升视觉效果,但是增加了性能开销
更多推荐


所有评论(0)