qml dockwidget視窗停靠

前言

前面一篇文章介紹了KDDockWidgets的使用（文章在這里），其實主要目的就是為了用KDDockWidgets提供的Qt quick 下的視窗停靠功能，Qt原生部并沒有提供Qt quick的dockwidget，也不知道為啥，其實視窗停靠功能其實是非常常見的，但是Qt只支持QWidget的，
KDDockWidgets剛好可以解決這個問題，詳細介紹在之前的文章已經介紹過了，其功能比QDockWidget更加豐富，

那么，今天就來看一下如何用KDDockWidgets做自己的在qml 下的視窗停靠功能，

修改檔案

KDDockWidgets的原始碼編譯和demo演示具體可以參照上一篇文章，編譯后默認安裝位置是在C盤下：C:\KDAB\KDDockWidgets-1.4.0 ，在原始碼中定義了一個宏KDDOCKWIDGETS_QTQUICK，要使用Qt quick，我們需要修改一下頭檔案：
打開C:\KDAB\KDDockWidgets-1.4.0_debug\include\kddockwidgets\Config.h，找到：

#ifdef KDDOCKWIDGETS_QTQUICK
    ///@brief Sets the QQmlEngine to use. Applicable only when using QtQuick.
    void setQmlEngine(QQmlEngine *);
    QQmlEngine* qmlEngine() const;
#endif

將這個宏判斷注釋掉，

//#ifdef KDDOCKWIDGETS_QTQUICK
    ///@brief Sets the QQmlEngine to use. Applicable only when using QtQuick.
    void setQmlEngine(QQmlEngine *);
    QQmlEngine* qmlEngine() const;
//#endif

然后再打開 C:\KDAB\KDDockWidgets-1.4.0_debug\include\kddockwidgets\QWidgetAdapter.h
找到

#if !defined(KDDOCKWIDGETS_QTWIDGETS) && !defined(KDDOCKWIDGETS_QTQUICK)
# define KDDOCKWIDGETS_QTWIDGETS
#endif

修改為：

#if !defined(KDDOCKWIDGETS_QTWIDGETS) && !defined(KDDOCKWIDGETS_QTQUICK)
# define KDDOCKWIDGETS_QTQUICK
#endif

創建工程

ok，接下來就可以創建我們自己的工程了，新建一個QML工程，寫個簡單的qml程式

在pro工程檔案中， CONFIG添加KDDockWidgets

CONFIG += c++11 KDDockWidgets

添加庫參考：

win32:CONFIG(release, debug|release): LIBS += -LC:/KDAB/KDDockWidgets-1.4.0/lib/ -lkddockwidgets1
else:win32:CONFIG(debug, debug|release): LIBS += -LC:/KDAB/KDDockWidgets-1.4.0/lib/ -lkddockwidgets1d

INCLUDEPATH += C:/KDAB/KDDockWidgets-1.4.0/include
DEPENDPATH += C:/KDAB/KDDockWidgets-1.4.0/include

寫個簡單的qml檔案：

import QtQuick 2.15
import QtQuick.Window 2.15
import com.kdab.dockwidgets 1.0 as KDDW

Window {
    width: 1000
    height: 800
    visible: true
    title: qsTr("Hello World")


    Rectangle{
        id:rect
        width: parent.width
        height: 200
        color: "cyan"
    }


    KDDW.MainWindowLayout {
        width: parent.width
        height:parent.height - rect.height
        anchors.top:rect.bottom

        // Each main layout needs a unique id
        uniqueName: "MainLayout-1"


        KDDW.DockWidget {
            id: dock1
            uniqueName: "dock1" // Each dock widget needs a unique id
            Rectangle {
                color: "pink"
            }
        }

        KDDW.DockWidget {
            id: dock2
            uniqueName: "dock2"
            Rectangle {
                color: "yellow"
            }
        }
        KDDW.DockWidget {
            id: dock3
            uniqueName: "dock3"
            Rectangle {
                color: "red"
            }
        }

        Component.onCompleted: {
            // Add dock4 to the Bottom location
            addDockWidget(dock1, KDDW.KDDockWidgets.Location_OnBottom);
            // Add dock5 to the left of dock4
            addDockWidget(dock2, KDDW.KDDockWidgets.Location_OnRight, dock1);
            addDockWidget(dock3, KDDW.KDDockWidgets.Location_OnTop);
        }
    }
}

main檔案

#include <QGuiApplication>
#include <QQmlApplicationEngine>

#include <kddockwidgets/Config.h>

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);
    auto flags = KDDockWidgets::Config::self().flags();
    KDDockWidgets::Config::self().setFlags(flags);

    QQmlApplicationEngine engine;

    KDDockWidgets::Config::self().setQmlEngine(&engine);

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

然后將kddockwidgets1d.dll 庫檔案拷貝到程式輸出目錄后運行代碼，效果如下：

注意，qml代碼中只有包含在KDDW.MainWindowLayout區域下的KDDW.DockWidget 才可以實作dock效果，為了測驗，我故意在頂部放了一個Rectangle，其實MainWindowLayout是一個QQuickItem，可以簡單理解成一個qml中的Item，所以用法其實是一樣的，在此基礎上進行拓展就行了，

外部庫

以上示例是在編譯完原始碼并安裝后直接參考，所以在工程檔案中，CONFIG添加KDDockWidget就可以使用了，那如果沒有安裝KDDockWidget怎么用呢，這就需要直接添加外部庫的方式來實作，為方便移植，我們直接在原始碼下新建一個檔案夾，然后將相關的lib include 等都拷貝進去，然后創建一個pri檔案：

!contains(INCLUDEDFIES, KDDockWidgets.pri) {
INCLUDEDFIES += KDDockWidgets.pri

win32:CONFIG(release, debug|release): LIBS += -L$$PWD/lib/ -lkddockwidgets1
else:win32:CONFIG(debug, debug|release): LIBS += -L$$PWD/lib/ -lkddockwidgets1d

INCLUDEPATH += $$PWD/include
DEPENDPATH += $$PWD/include

}

然后在主工程檔案pro中添加：

include(KDDockWidgets/KDDockWidgets.pri)

ok，直接編譯運行就可以了，

自定義

以上視窗的效果是KDDockWidget默認的，如果想自定義視窗樣式，比如修改邊距、標題欄等，就需要修改原始碼了，在前面的文章中講到的原始碼，找到：KDDockWidgets\src\private\quick\qml ：

可以修改這里對應的qml檔案，然后重新編譯原始碼后生成動態庫，就可以直接在自己的專案中使用了，