为什么使用KDDockWidgets

为什么使用KDDockWidgets呢？
首先它是一个优秀的开源dock库，弥补QDockWidget的不足，详情见官网。
其次它支持QML，这是我最终选择这个dock库的主要原因，因为最近在考虑将前端界面用QML做，后台用c++。考虑到之前的项目用到了另一个开源dock库Qt-Advanced-Docking-System，需要找一个可以在QML使用的替代库，所以找上了它。就风格而言我更喜欢Qt-Advanced-Docking-System这个库。来几张截图看看


KDDockWidgets的截图，感受下，这个动图不太清晰，它这些图标只能说丑爆了，好在KDDockWidgets支持重写，后面再详细介绍。

编译源码

下面步入正题，源码编译，开整！

1 源码下载

先从GitHub上下载最新源码，https://github.com/KDAB/KDDockWidgets

2.0以后的版本才支持QML

直接下载zip压缩包
，当然你喜欢clone也行，随意。

2 编译准备

如果未进行这步，将会报一堆错误，这块是最疼苦的，说实话，虽然把它的编译环境准备好了，但也是有点懵的，每个人的电脑环境不一样，完全按照我说的也未必在你的电脑上通过，这块随缘吧，但是还是有些必要的环境要配的。

本人不熟悉CMake，而这个库又只能CMake编译，试了用cmd cmake，cmake gui，折腾一天也没倒腾出来，最终放弃，选择自己熟悉的QT Creator来搞。

基本的软件需要先安装：

• cmake
• ninja
• qt
• vs

其中cmake和ninja不用特意安装，QT6会自动安装。
其中QtQuick 支持需要Qt >= 5.15，我本身的QT环境为QT6.5.3.配合的vs版本是vs2019.

环境变量

这步最关键，在path中将qt，vs，cmake和ninja，安装路径根据实际情况更改

配置完后，要确保环境变量生效，有不重启的方法，懒得折腾，直接重启。

3 开始编译

解压源码后，用QT Creator打开项目代码。

眼花缭乱的编译环境，我们选择第一个，会报错，

先不管，先把这些临时的构建kit都删了，其实不删也没影响，看着不舒服。
下面来解决报错问题，cmake报错，整个项目是灰色的

双击第一个报错，在cmake文件中，ENABLED_FRONTENDS未被置true，查找上下文发现，引起这个问题的主要原因是未找到QT环境。



我们的环境是QT6，默认启用QT5，需要把这个变量设置一下，QT Creator在构建设置中提供了CMake关键变量查询和设置的功能，和CMake gui类似，添加KDDockWidgets_QT6，然后勾选上，点击下部的执行CMake。

注意变量名称不是DKDDockWidgets_QT6

执行完CMake后，会出现

工程树也正常了

直接编译，没问题，example里的例程也都可以打开，学习代码，参看事例都没问题，作为动态库被使用也可以了。但是有些不方便，一是需要的dll，lib在build里比较散乱，而且也没有完整的include文件，需要直接把源码放到作为动态库的include里或者手动把需要的头文件挑出来。
简单新建个QML工程试试就知道了，把编译完的lib和dll放到测试工程的lib下，把源码拷贝到inc里，

配置pro文件

随便将源码例程的一段代码移植过来，比如customtabbar的代码，

编译，运行

需要注意的是在pro文件里需要加上DEFINES += KDDW_FRONTEND_QT。
不然头文件引用报错，kddockwidgets_export.h这个文件是编译生成的文件，直接在源码是找不到的，具体可看看CMakeList文件。

部属到QT环境

下面解锁正确玩法，即将这个库配置到QT。需要提前准备。
切回构建，将构建步骤里的install勾选上，debug和release需要分别勾选。然后构建工程。

经过几分钟的构建，（第一遍的时候就怕出现和cmake gui一样的一堆问题），煎熬一会后，成功编译。默认安装路径为C:\Program Files (x86)\KDDockWidgets

如果不是以管理员打开QT Creator，可能出现无法创建路径的错误，

至此，编译完成。在目标路径生成如下文件

熟悉QT的人看到上图应该不陌生，典型的QT环境结构，share是doc，这里没什么用，直接拷贝到QT下，不用担心内部路径结构，都是按QT的结构生成的。

还有些小瑕疵，继续上边的测试程序，更改pro文件，编译报错

查看D:\program\QT\6.5.3\msvc2019_64\mkspecs\modules下的qt_KDDockWidgets.pri

发现库名称为kddockwidgets-qt6

而我们编译生成的库名称是kddockwidgets-qt62.lib

将pri文件qt_KDDockWidgets.pri修改一下。重启QT，再次编译，库引用问题已经没了，但出现了头文件引用错误

这个也很容易找到问题，对比qt_KDDockWidgets.pri文件的includes和实际路径，多了一个kddockwidgets-qt6。


两个解决方法：
1 引用头文件时，多加一个kddockwidgets-qt6前缀；
2 修改qt_KDDockWidgets.pri的includes，在其后追加kddockwidgets-qt6，重启QT

编译，也没问题，运行

结语

看似过程很简单，如果自己从头来一遍，可能会遇到各种问题，最麻烦的莫过于配置环境变量，这是基础，这里不过后面的都免谈。

虽然过程坎坷，但最终还是搞定了。

下一步就是前面提到的重写它的样式了，图标太丑了。后面有时间会把重写样式再分享一下，不过那个就相对简单了。