qml Popup弹出控件使用

开发环境Qt5.13.1 window10

//main.qml
import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Controls 2.5

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

    Rectangle {
        id: rect
        width: 100;
        height: 50;
        color: "red"

        MouseArea{
            anchors.fill: parent
            onClicked: {
                userInfo.show()
            }
        }
    }

    CustomPopup {
        id: userInfo
        backgroundWidth: 280  //186
        backgroundHeight: 324
        onClickedMenu: {
            console.log("UserInfoPopup==========nIndex========" + nIndex);
        }
    }

}

//CustomPopup.qml
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12


Item {
    id: root
    anchors.fill: parent
    property alias popupVisible: popup.visible
    property alias contentItem: popup.contentItem
    property color barColor: "white"
    property alias backgroundItem: background
    property real backgroundWidth: 280//186
    property real backgroundHeight: 324
    property color borderColor:  barColor
    property real borderWidth: 0
    property real verticalOffset: 20
    signal clickedMenu(int nIndex);

    Popup {
        id: popup
        width: backgroundWidth
        height: backgroundHeight;
        modal: true
        //三角形区域
        Rectangle {
            id: bar
            visible: popup.visible
            rotation: 45
            width: 20; height: 20
            color: barColor
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: -8
            radius: 4
        }
        background: Rectangle {
            id: background
            color: barColor
            radius: 4
            anchors.left: parent.left;
            anchors.leftMargin: 12
            border.color: borderColor
            border.width: borderWidth
            MouseArea {
                         anchors.fill: parent
                         onClicked: {
                                console.log("clickedMenu=================")
                                clickedMenu(3)
                 }
            }
        }
    }

    function show() {
        //popup.x = (root.width - popup.width) / 2
        //popup.y = root.height + verticalOffset
        popup.x = 106//86
        popup.y =  60
        popupVisible = true;
        console.log("root.width=================" + root.width + "popup.x===" + popup.x + "  popup.width==" + popup.width);
    }

    function hide() {
        popupVisible = false;
    }
}

//main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine 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();
}

参考

https://doc.qt.io/qt-5/qml-qtquick-controls2-popup.html

https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-popup