我想用下面的方式创建一个消息对话框
例如:我的组合框有2个名称，" chkbx "(复选框的符号名称)，" txtedt "(文本字段的符号名称)。每当我从组合框下拉列表中选择chkbox或txtedt时，我的组合框应该分别连接到实际的复选框和textit元素。
我有一个"显示对话框"按钮在状态栏当我按下该按钮，它应该弹出选择选项(复选框或行编辑)
请告诉我该怎么做。
EDIT这是代码，我面临的问题是，我既不能在我的消息对话框中获得图标，也不知道如何在消息对话框中看到复选框或行编辑，我是一个初学者，正在努力探索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()
}
}
}
}
我还是不明白你要做什么。假设您需要一些具有不同内容的自定义对话框。首先，我猜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 - combobox, 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项
你可以使用
例如:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("main 4")
color: "white"
Button {
onClicked: customMessage.open();
}
// Create Object dialog box
Dialog {
id: customMessage
width: 300 // Set the width of the dialog, which works on the desktop, but it does not work on Android
height: 200 // Set the height of the dialog, which works on the dekstop, but does not work on Android
// Create the contents of the dialog box
contentItem: Rectangle {
width: 600 // Set the width, necessary for Android-devices
height: 500 // Set the height, necessary for Android-devices
color: "#f7f7f7" // Set the color
CheckBox { z: 1;text: 'check it!'}
ComboBox {
z: 1
anchors.right: parent.right
}
// The area for the dialog box message
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: dividerHorizontal.top
color: "#f7f7f7"
Label {
id: textLabel
text: qsTr("Hello, World!!!")
color: "#34aadc"
anchors.centerIn: parent
}
}
// Create a horizontal divider with the Rectangle
Rectangle {
id: dividerHorizontal
color: "#d7d7d7"
height: 2
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: row.top
}
Row {
id: row
height: 100 // Set height
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
Button {
id: dialogButtonCancel
anchors.top: parent.top
anchors.bottom: parent.bottom
// Set width button halfway line minus 1 pixel
width: parent.width / 2 - 1
style: ButtonStyle {
background: Rectangle {
color: control.pressed ? "#d7d7d7" : "#f7f7f7"
border.width: 0
}
label: Text {
text: qsTr("Cancel")
color: "#34aadc"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
onClicked: customMessage.close()
}
Rectangle {
id: dividerVertical
width: 2
anchors.top: parent.top
anchors.bottom: parent.bottom
color: "#d7d7d7"
}
Button {
id: dialogButtonOk
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width / 2 - 1
style: ButtonStyle {
background: Rectangle {
color: control.pressed ? "#d7d7d7" : "#f7f7f7"
border.width: 0
}
label: Text {
text: qsTr("Ok")
color: "#34aadc"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
onClicked: customMessage.close()
}
}
}
}
}