Qml 弹出窗口没有出现在子窗口的顶部

Question

I have a Qml App that has a Win32 window as a child window. Now, I simply want to show a popup on the click of a button(or Image in my case) on top of Win32 window but Popup is not coming on top.

Working code is as below:-

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QWindow>
#include "qt_windows.h"
#include "Windows.h"

#pragma comment(lib, "user32.lib")

/*
 * Input Window proc
 */
LRESULT CALLBACK uiInputWindowProc(
        HWND hwnd,
        UINT uMsg,
        WPARAM wParam,
        LPARAM lParam)
{
    return DefWindowProc(hwnd, uMsg, wParam, lParam);
}

/*
 * Create window that receives and forwards input
 */
void uiCreateInputWindow(
        HWND    parentWindow,
        int     x,
        int     y,
        int     width,
        int     height)
{
#define UI_INPUT_WINDOW_CLASS   L"uiNativeInputWindowClass"
    /*
     * Register Window Class
     */
    WNDCLASSEX  wcex;

    wcex.cbSize     = sizeof wcex;
    wcex.style      = CS_OWNDC | CS_HREDRAW | CS_VREDRAW;
    wcex.lpfnWndProc    = (WNDPROC)uiInputWindowProc;
    wcex.cbClsExtra = 0;
    wcex.cbWndExtra = sizeof(void*);
    wcex.hInstance  = NULL;
    wcex.hIcon      = NULL;
    wcex.hCursor    = LoadCursor(NULL, IDC_ARROW);
    wcex.hbrBackground  = (HBRUSH)(COLOR_BACKGROUND+1);
    wcex.lpszMenuName   = NULL;
    wcex.lpszClassName  = UI_INPUT_WINDOW_CLASS;
    wcex.hIconSm    = NULL;

    if (RegisterClassEx(&wcex) == 0 && GetLastError() != ERROR_CLASS_ALREADY_EXISTS)
    {
        return;
    }

    DWORD style         = WS_CHILD;
    DWORD exstyle       = 0;
    /*
     * Create Window
     */
    HWND hwnd = CreateWindowEx(
            exstyle,                    // dwExStyle
            UI_INPUT_WINDOW_CLASS,      // lpClassName
            L"uiNativeInputWindow",     // lpWindowName
            style,                      // dwStyle
            x,                          // x
            y,                          // y
            width,                  // nWidth
            height,                 // nHeight
            parentWindow,           // hWndParent
            NULL,           // hMenu
            0,              // hInstance
            0);             // lpParam


    if (hwnd != NULL)
    {
        ShowWindow(hwnd, SW_SHOW);
        SetFocus(hwnd);
    }
}

/*
 * Initialize ui
 */
int main(int argc, char* argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine* engine = new QQmlApplicationEngine;

    engine->load(QUrl(QStringLiteral("qrc:/main.qml")));

    QObject* qmlRoot = engine->rootObjects().first();
    QWindow* mainWindow = qobject_cast<QWindow*>(qmlRoot);

    int fbWidth = 1920, fbHeight = 1080;
    uiCreateInputWindow((HWND)mainWindow->winId(), 0, 70, fbWidth, fbHeight);

    app.exec();
}

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12

ApplicationWindow {
    id: root
    x: 10
    y: 10
    width: 1920
    height: 1150
    visible: true
    flags: Qt.Window | Qt.FramelessWindowHint

    RowLayout {
        anchors.fill: parent
        spacing: 0

        ColumnLayout {
            spacing: 0

            Rectangle {
                id: topbar
                color: "#232642"
                Layout.fillWidth: true
                Layout.preferredHeight: 70

                MouseArea {
                    anchors.fill: parent
                    property point lastMouse
                    onPressed: {
                        lastMouse = mapToGlobal(mouseX, mouseY)
                    }
                    onPositionChanged: {
                        var newMouse = mapToGlobal(mouseX, mouseY)
                        root.x += newMouse.x - lastMouse.x
                        root.y += newMouse.y - lastMouse.y
                        lastMouse = newMouse
                    }
                    onDoubleClicked: {
                        root.visibility == ApplicationWindow.Windowed ?
                                    root.showMaximized() :
                                    root.showNormal()
                    }
                }

                RowLayout {
                    anchors.fill: parent
                    spacing: 0

                    Text {
                        text: "Test Window"
                        color: "#F8F8EE"
                        font.family: "Segoe UI"
                        font.pointSize: 11
                        font.weight: Font.DemiBold
                        Layout.fillHeight: true
                        Layout.topMargin: 10
                        Layout.leftMargin: 10
                    }

                    Item {
                        Layout.fillWidth: true
                    }
/*
  Show Popup on click of this image
*/
                    Image {
                        id: cfgBtn
                        source: "Assets/cfgmenu.png"
                        Layout.fillHeight: true
                        Layout.preferredWidth: height
                        MouseArea {
                            anchors.fill: parent
                            onClicked: optionsPopup.open()
                        }
                    }

                    Image {
                        source: "Assets/closewindow.png"
                        Layout.fillHeight: true
                        Layout.preferredWidth: height
                        MouseArea {
                            anchors.fill: parent
                            onClicked: root.close()
                        }
                    }
                }
            }

            Rectangle {
                id: containerLv1
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "black"
                Rectangle {
                    id: containerLv2
                    width: Math.round(Math.min(containerLv1.width,
                                               containerLv1.height * 16 / 9))
                    height: Math.round(Math.min(containerLv1.height,
                                                containerLv1.width * 9 / 16))
                    anchors.centerIn: parent
                    visible: true
                    color: "grey"
                }
            }
        }
    }
/*
    Desired popup to show
*/
    Popup {
        id: optionsPopup
        x: cfgBtn.x - 160
        y: topbar.y + topbar.height + 5
        width: 200
        height: 120
        focus: true
        dim: false
        modal: true
        padding: 0
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        contentItem: Rectangle {
            id: rect
            anchors.centerIn: parent
            color: "#FF232642"

            ColumnLayout {
                spacing: 0
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                Rectangle {
                    Layout.preferredWidth: 200
                    Layout.preferredHeight: 40
                    color: "transparent"
                    Text {
                        anchors.fill: parent
                        text: "Option1"
                        color: "white"
                        font.pointSize: 14
                    }
                }
                Rectangle {
                    Layout.preferredWidth: 200
                    Layout.preferredHeight: 40
                    color: "transparent"
                    Text {
                        anchors.fill: parent
                        text: "Option2"
                        color: "white"
                        font.pointSize: 14
                    }
                }
                Rectangle {
                    Layout.preferredWidth: 200
                    Layout.preferredHeight: 40
                    color: "transparent"
                    Text {
                        anchors.fill: parent
                        text: "Option3"
                        color: "white"
                        font.pointSize: 14
                    }
                }
            }
        }
    }

}

The native window is part of our application and is used for receiving mouse and keyboard inputs. Any suggestion is most welcomed.

Answer 1

I did a hack to solve this. Basically, the problem is everything that is drawn as part of Qml window gets hidden below the native window and there is no good way(that I can find online) to do this except by adding another layer of a modal window.

So, before opening the popup, just create a transparent modal window over which your popup can be shown and close this window when the popup closes.

I am still looking for a better way to do this.