combobox - 如何使用QML控件元素(例如，组合框，文本字段，复选框)创建消息对话框。

Question

我想通过以下方式创建一个消息对话框

例如:我的组合框有2个名称，“ chkbx ”(复选框的符号名称)，“ txtedt ”(文本字段的符号名称)。

每当我从组合框下拉列表中选择 chkbox 或 txtedt 时，我的组合框应分别将我连接到实际的复选框和textedit元素。

当我按下该按钮时，状态栏上会显示一个“显示对话框” 按钮，该按钮应会弹出所选的选项(复选框或行编辑)

请建议我该怎么做。

编辑这是代码，而我用combobox选项面临的问题是，我既无法在消息对话框中获取图标，又或者我不知道如何在消息对话框中看到复选框或行编辑，我是一个初学者并努力探索QML中使用的棘手方法。

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Window 2.0


Item {
    id: root
    width: 580
    height: 400
    SystemPalette { id: palette }
    clip: true

    //! [messagedialog]
    MessageDialog {
        id: messageDialog
        visible: messageDialogVisible.checked
        modality: messageDialogModal.checked ? Qt.WindowModal : Qt.NonModal
        title: windowTitleField.text
        text: customizeText.checked ? textField.text : ""
        informativeText: customizeInformativeText.checked ? informativeTextField.text : ""
        onButtonClicked: console.log("clicked button " + clickedButton)
        onAccepted: lastChosen.text = "Accepted " +
            (clickedButton == StandardButton.Ok ? "(OK)" : (clickedButton == StandardButton.Retry ? "(Retry)" : "(Ignore)"))
        onRejected: lastChosen.text = "Rejected " +
            (clickedButton == StandardButton.Close ? "(Close)" : (clickedButton == StandardButton.Abort ? "(Abort)" : "(Cancel)"))
        onHelp: lastChosen.text = "Yelped for help!"
        onYes: lastChosen.text = (clickedButton == StandardButton.Yes ? "Yeessss!!" : "Yes, now and always")
        onNo: lastChosen.text = (clickedButton == StandardButton.No ? "Oh No." : "No, no")

    }
    //! [messagedialog]

    Column {
        anchors.fill: parent
        anchors.margins: 12
        spacing: 8
        Text {
            color: palette.windowText
            font.bold: true
            text: "Message dialog properties:"
        }
        CheckBox {
            id: messageDialogModal
            text: "Modal"
            checked: true
            Binding on checked { value: messageDialog.modality != Qt.NonModal }
        }
        CheckBox {
            id: customizeTitle
            text: "Window Title"
            checked: true
            width: parent.width
            TextField {
                id: windowTitleField
                anchors.right: parent.right
               width: informativeTextField.width
                text: "Alert"
            }
        }

        Row {

            Text {
                text: "Combo box items and icon selection:"
            }
            spacing: 8

            function createIcon(str) {
                switch(str) {

                     case Critical:
                    messageDialog.icon = StandardIcon.Critical
                     console.log("Critical")
                      break;
                      case Question:
                     messageDialog.icon = StandardIcon.Question
                          break;
                        case  checkbox:
                            //how to add checkbox here in order to show it in my message dialog ?
                            break;
                      case  textedit:
                          //how to add textedit here in order to show it in message dialog ?
                            break;
                      default:
                          break
                      }
                  }

           ComboBox {
                id : cbox
                editable: true
                currentIndex: 0
                model: ListModel {
                    id: cbItems
                    ListElement { text: "Critical"}
                    ListElement { text: "Question"}
                    ListElement { text: "checkbox"}
                    ListElement { text: "textedit"}
                }
               onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text)

               onAccepted: parent.createIcon(cbItems.get(currentIndex).text)
                 }
                }
         CheckBox {
            id: customizeText
            text: "Primary Text"
            checked: true
            width: parent.width
            TextField {
                id: textField
                anchors.right: parent.right
                width: informativeTextField.width
                text: "Attention Please"
            }
        }

        CheckBox {
            id: customizeInformativeText
            text: "Informative Text"
            checked: true
            width: parent.width
            TextField {
                id: informativeTextField
                anchors.right: parent.right
                width: root.width - customizeInformativeText.implicitWidth - 20
                text: "Be alert!"
            }
        }
        Text {
            text: "Buttons:"
        }
        Flow {
            spacing: 8
            width: parent.width
            property bool updating: false
            function updateButtons(button, checked) {
                if (updating) return
                updating = true
                var buttons = 0
                for (var i = 0; i < children.length; ++i)
                    if (children[i].checked)
                        buttons |= children[i].button
                if (!buttons)
                    buttons = StandardButton.Ok
                messageDialog.standardButtons = buttons
                updating = false
            }

            CheckBox {
                text: "Help"
                property int button: StandardButton.Help
                onCheckedChanged: parent.updateButtons(button, checked)
            }


            CheckBox {
                text: "Close"
                property int button: StandardButton.Close
                onCheckedChanged: parent.updateButtons(button, checked)
            }

            CheckBox {
                text: "Cancel"
                property int button: StandardButton.Cancel
                onCheckedChanged: parent.updateButtons(button, checked)
            }


        }


    }

    Rectangle {
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        height: buttonRow.height * 1.2
        color: Qt.darker(palette.window, 1.1)
        border.color: Qt.darker(palette.window, 1.3)
        Row {
            id: buttonRow
            spacing: 6
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 12
            width: parent.width
            Button {
                text: "Show Dialog"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: messageDialog.open()
            }
            Button {
                text: "Close"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: messageDialog.close()
            }
        }

            }
        }

Answer 1

我还是不明白你打算怎么办。假设您想要一些具有不同内容的自定义对话框。首先，我猜MessageDialog并不是一个好主意，因为您无法在其中定义自定义控件。但是您可以创建一个自定义的。

简单的例子:

Popup.qml

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0  

Window {
    id: mypopDialog
    title: "MyPopup"
    width: 300
    height: 100
    flags: Qt.Dialog
    modality: Qt.WindowModal
    property int popupType: 1
    property string returnValue: ""

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10

        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 20
            Image {
                source: popupType == 1 ? "combo.png" : "edittext.png"
            }
            Loader {
                id: loader
                Layout.alignment: Qt.AlignRight
                Layout.fillWidth: true
                sourceComponent: popupType == 1 ? comboboxComponent : editboxComponent
                property string myvalue : popupType == 1 ? item.currentText : item.text
                Component {
                    id: comboboxComponent

                    ComboBox {
                        id: comboBox

                        model: ListModel {
                            ListElement { text: "Banana" }
                            ListElement { text: "Apple" }
                            ListElement { text: "Coconut" }
                        }
                    }
                }
                Component {
                    id: editboxComponent
                    TextEdit {
                        id: textEdit
                    }
                }
            }
        }

        Rectangle {
            height: 30
            Layout.fillWidth: true
            Button {
                text: "Ok"
                anchors.centerIn: parent
                onClicked: {
                    returnValue = loader.myvalue;
                    mypopDialog.close();
                }
            }
        }
    }
}

在这里，我根据Loader属性使用popupType加载适当的内容(1-组合框，2-textedit)

因此，现在您可以在任何需要的位置使用此文件。

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0

Button {
    text: "Test dialog"
    onClicked: {
        var component = Qt.createComponent("Popup.qml");
        if (component.status === Component.Ready) {
        var dialog = component.createObject(parent,{popupType: 1});
        dialogConnection.target = dialog
        dialog.show();
   }
}

Connections {
    id: dialogConnection
    onVisibleChanged: {
        if(!target.visible)
            console.log(target.returnValue);       
    }
}

在这里，我使用Connections从对话框中获取一些结果。如果不需要，只需删除Connections项