QtQuick2 - 自定义消息框

Question

有谁知道如何为移动设备实现自定义消息框？我试过使用 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"); });
    }
}

Answer 2

感谢大家的回答和评论，总结以上我创建了没有 Window 类型但带有 contentItem 属性的元素。这是非常原始的元素，但可以像 BaCaRoZzo or Window as in Mechan 示例所建议的那样使用 Dialog。

这是来源：

main.qml

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: Screen.width
    height: Screen.height
    visible: true
    id: win
    color: brPalette.charcoal
    BreezeQuickMessageBox{
        id: mbox
        palette: brPalette
        contentItem: Rectangle{
            color: "lightblue"
            anchors.fill: parent
            BreezeQuickButton{
                id: btn
                anchors {
                    verticalCenter: parent.verticalCenter
                    horizontalCenter: parent.horizontalCenter
                }
                palette: brPalette
                gradiented: false
                onClicked: {
                    mbox.hide()
                }
            }
        }
    }
/*
Another bunch of code
*/
    BreezeQuickPalette{
        id: brPalette
        theme: "dark"
    }
}

BreezeQuickMessageBox.qml

import QtQuick 2.4

Item {
    id: root
    property BreezeQuickPalette palette: BreezeQuickPalette
    property bool __buttonGradiented: false
    property string title: "Message Box"
    property Item contentItem
    anchors.fill: parent
    Behavior on opacity {
        NumberAnimation{
            duration: 250
        }
    }
    opacity: 0
    visible: opacity > 0
    z: parent.z + 100
    BreezeQuickPalette{
        id: __palette
        theme: palette.theme
    }
    Rectangle {
        id: window
        width: parent.width
        height: parent.height*0.4
        anchors {
            verticalCenter: parent.verticalCenter
        }
        z: parent.z + 1
        color: palette.charcoal
        Item {
            id: content
            width: parent.width
            anchors {
                top: titleText.bottom
                bottom: line.top
                horizontalCenter: parent.horizontalCenter
                topMargin: 8
                bottomMargin: 8
            }
            children: contentItem
        }
        Rectangle{
            id: line
            width: parent.width
            anchors{
                bottom: buttonArea.top
                horizontalCenter: parent.horizontalCenter
            }
            height: 1
            color: palette.focusColor
        }
        Text{
            id: titleText
            font.pointSize: buttonOk.font.pointSize
            color: palette.normalText
            text: title
            anchors {
                top: parent.top
                horizontalCenter: parent.horizontalCenter
                topMargin: 16
            }
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
        Rectangle{
            id: buttonArea
            width: parent.width
            anchors{
                horizontalCenter: parent.horizontalCenter
                bottom: window.bottom
            }
            height: buttonOk.height*1.2
            color: "transparent"
        }
        BreezeQuickButton {
            id: buttonOk
            caption: "Ok"
            width: 128
            palette: __palette
            gradiented: __buttonGradiented
            anchors{
                horizontalCenter: parent.horizontalCenter
                verticalCenter: buttonArea.verticalCenter
            }
            onClicked: {
                root.hide()
            }
        }
    }
    Rectangle{
        id: shadow
        anchors.fill: parent
        z: parent.z
        color: palette.shadeBlack
        opacity: 0.4
        MouseArea{
            id: rootArea
            anchors.fill: parent
            hoverEnabled: true
        }
        gradient: Gradient {
            GradientStop { position: 0.0; color: palette.black }
            GradientStop { position: 0.1; color: palette.shadeBlack }
            GradientStop { position: 0.3; color: palette.grey }
            GradientStop { position: 0.7; color: palette.grey }
            GradientStop { position: 0.9; color: palette.shadeBlack }
            GradientStop { position: 1.0; color: palette.black }
        }
    }

    function show (title, message) {
        root.opacity = 1
    }
    function hide () {
        root.opacity = 0
    }
}

实际查找 Android：

QtQuick2 - 自定义消息框

QtQuick2 - custom MessageBox

javascript

mobile

qt

messagebox

qml