正确关闭qml对话框

时间:2016-11-16 22:04:54

标签: qt qml qtquick2 qtquickcontrols

我一直在玩对话,有些事情困扰着我。

我有以下代码:

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

    Button {
        id: click
        x: 285
        y: 189
        text: qsTr("Click")
        onClicked: dlgTest.open()
    }

    Dialog{
        id:dlgTest
        visible:false
        contentItem: Rectangle{
            width: 300
            height: 300
            TextField{
                id: tfText
                anchors.top: parent.top
            }
            Button{
                anchors.top: tfText.bottom
                onClicked: dlgTest.close()
                text: "Close"
            }


        }
    }
}

当我第一次打开它时,我将一些文本添加到TextField然后关闭它。但是,如果我再次打开它,文本仍将存在。我想要的是"重置"我第一次打开它时使用它的原始状态(使用空TextField)。似乎调用方法"关闭"与将visible变为false完全相同。

有没有办法做到这一点"重置"?

我还有一个包含很多控件的对话框,并且不得不手动恢复所有内容。

1 个答案:

答案 0 :(得分:6)

在您的代码中,您创建一次Dialog,作为ApplicationWindow的孩子。 要“重置”它,您有两个选择:

  • 拥有一个可以调用的重置功能,并恢复所有功能。您也可以使用它来设置它[/ li>
  • 创建一个新对象,其中包含所有设置。

对于后者,您可以使用JavaScript动态对象创建或Loader

JavaScript动态对象创建:

Button {
    id: click
    x: 285
    y: 189
    text: qsTr("Click")
    onClicked: {
        var d = diaComp.createObject(null)
        d.open()
    }
}


Component {
    id: diaComp
    Dialog{
        id:dlgTest
        visible:false
        contentItem: Rectangle{
            width: 300
            height: 300
            TextField{
                id: tfText
                anchors.top: parent.top
            }
            Button{
                anchors.top: tfText.bottom
                onClicked: {
                    dlgTest.close()
                    dlgTest.destroy()
                }
                text: "Close"
            }
        }
    }
}

但是,当您销毁对象时,属性的内容将丢失,您无法再访问它们。所以你需要先确保将它们(不要绑定它们)复制到一些未被破坏的属性上。

使用Loader,您可以在再次加载之前卸载Dialog,这基本上可以重置它。但是在你卸载它之前,你仍然可以访问它的值,正如你在Button的onClicked-handler中看到的那样。

Button {
    id: click
    x: 285
    y: 189
    text: qsTr("Click")
    onClicked: {
        console.log((dlgLoad.status === Loader.Ready ? dlgLoad.item.value : 'was not loaded yet'))
        dlgLoad.active = false
        dlgLoad.active = true
        dlgLoad.item.open()
    }
}

Loader {
    id: dlgLoad
    sourceComponent: diaComp
    active: false
}


Component {
    id: diaComp
    Dialog{
        id:dlgTest
        visible:false
        property alias value: tfText.text
        contentItem: Rectangle{
            width: 300
            height: 300
            TextField{
                id: tfText
                anchors.top: parent.top
            }
            Button{
                anchors.top: tfText.bottom
                onClicked: {
                    dlgTest.close()
                }
                text: "Close"
            }
        }
    }
}

当然,您也可以复制 Loader项目中的值,然后再将其卸载,以释放内存。

但如果显示Dialog经常(大部分时间)显示,那么通过重复使用并手动重置它可能是最明智的避免对象的创建和破坏。