javascript - QtQuick2 - 自定义消息框

Question

有谁知道如何为移动设备实现自定义MessageBox？我尝试使用 Window 类型，但没有成功(它只是显示在屏幕之外的某个地方)。如果有人能告诉我为什么使用 Window 不起作用，我将不胜感激。我也用过 this example 。但在移动设备上它不起作用。

这是我当前的代码，使用Window。如前所述，它不起作用，因为它确实显示超出了屏幕范围。

import QtQuick 2.4
import QtQuick.Window 2.1

Item{

    function showMessage(text, title)
    {
        messageBox.text = text;
        messageBox.title = title;
        messageBox.visible = true;
    }

    Window {
        id: messageBox
        modality: Qt.ApplicationModal
        title: ""
        visible: false
        property alias text: messageBoxLabel.text
        color: parent.color
        minimumHeight: 100
        minimumWidth: 300
        Label {
            anchors.margins: 10
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: messageBoxButton.top
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            id: messageBoxLabel
            text: ""
        }

        Button {
            anchors.margins: 10
            id: messageBoxButton
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Ok"
            onClicked: messageBox.visible = false
        }
    }
}

有人可以告诉我为什么它工作错误吗？

Answer 1

MessageBox.qml

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
    id: mainWrapper
    color: "#80000000"
    x: 0;
    y: 0;
    width: parent.width;
    height: parent.height;
    opacity: 0;
    Behavior on opacity { NumberAnimation { duration: 500; easing.type: Easing.OutExpo } }
    visible: opacity > 0

    property string text;

    MouseArea {
        anchors.fill: parent;
        preventStealing: true
    }

    signal finished(bool ok);

    function init() {
        opacity = 1;
        msgB.scale = 1.0;
    }

    Rectangle {
        id: msgB
        color: "#323232"
        gradient: Gradient {
            GradientStop { position: 0; color: "#323232" }
            GradientStop { position: 1; color: "#252525" }
        }
        //radius: 7

        width: parent.width * 0.4;
        height: cont.height + 20 * 2;
        anchors.centerIn: parent;
        scale: 0.6
        Behavior on scale { NumberAnimation { duration: 500; easing.type: Easing.OutExpo } }
        Behavior on height { NumberAnimation { duration: 500; easing.type: Easing.OutExpo } }

        Column {
            id: cont
            width: parent.width;
            y: 20;
            spacing: 20;
            Text {
                color: "#ffffff"
                horizontalAlignment: Text.AlignHCenter
                anchors.horizontalCenter: parent.horizontalCenter
                font {
                    bold: false;
                    pixelSize: 21;
                }
                wrapMode: Text.WordWrap;
                text: mainWrapper.text;
            }
            Button {
                anchors.margins: 10
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                text: "OK"
                onClicked: {
                    mainWrapper.opacity = 0;
                    msgB.scale = 0.6;
                    mainWrapper.finished(true);
                }
            }
        }
    }
}

在 main.qml 的某个地方文件( window 是 main.qml 元素的 id):

function message(msg, finished) {
    var alert = Qt.createComponent("MessageBox.qml").createObject(window, { text: msg });
    alert.onFinished.connect(function(ok) {
        if (ok) {
            if (finished)
                finished();
        }
        alert.destroy(500);
    });
    alert.init();
    return alert;
}

像这样使用它:

Button {
    ...
    onClicked: {
        message("Hello world", function() { console.log("OK clicked"); });
    }
}