正確關閉qml對話框

Question

我一直在玩對話框，有些事情困擾着我。

我有以下代碼：

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）。 似乎將方法“ close”調用與將visible更改為false完全相同。

有沒有辦法做這種“重置”？

我還有一個帶有很多控件的對話框，不得不手動還原所有內容很煩人。

Answer 1

在您的代碼中，一次創建Dialog，作為ApplicationWindow的子級。 要“重置”它，您有兩種選擇：

• 具有您調用的重置功能，並恢復所有功能。 您也可以使用它來首先進行設置
• 創建所有位置均已就緒的新對象。

對於后者，您可以使用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您可以在再次加載對話框之前先將其卸載，這實際上將其重置。 但是，直到您卸載它，您仍然可以訪問它的值，就像在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"
            }
        }
    }
}

當然，您也可以從加載程序的項目中復制值，然后更早地卸載它，以釋放內存。

但是，如果頻繁（大部分時間）顯示Dialog ，則最好通過重用並手動重置來避免創建和破壞對象。