如何在QtQuick Controls 2屏幕中居中對話框？

Question

我的所有對話框都顯示在屏幕的左上角，而不是中心。

讓對話框自動更正的最佳方法是什麼？

import QtQuick 2.7 
import QtQuick.Controls 2.2 

ApplicationWindow { 
    id: mainWindow 

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

    Component.onCompleted: { 
     showMessageBox('Hey this actually works!'); 
    } 

    function showMessageBox(message) { 
     var component = Qt.createComponent("MessageDialog.qml") 
     if(component.status == Component.Ready) { 
      var dialog = component.createObject(mainWindow) 

      dialog.title = qsTr("Information") 
      dialog.text = message 

      dialog.open() 
     } else 
      console.error(component.errorString()) 
    } 
} 

用非常簡單的MessageDialog.qml：

import QtQuick 2.7 
import QtQuick.Controls 2.2 

Dialog { 
    standardButtons: DialogButtonBox.Ok 

    property alias text : textContainer.text 

    Text { 
     id: textContainer 

     anchors.fill: parent 

     horizontalAlignment: Qt.AlignLeft 
     verticalAlignment: Qt.AlignTop 
    } 
} 

Answer 1

文檔提示，該Dialog是Popup具有x/y座標 - 的後代。

我認爲這將是一個很好的開始來定位它。

要將無濟於事：

• parent.width - 這應該是你的窗口
• width的寬度 - 這應該是你的Dialog小號寬度
• parent.height
• height

計算正確的職位，你應該沒問題。

有了這個，你可以創建一個新基類CenteredDialog.qml

Dialog { 
    x: (parent.width - width)/2 
    y: (parent.height - height)/2 
} 

然後用CenteredDialog代替Dialog所有的時間。

此外，動態實例你可以聲明文件中的Component，只有採用component.createObject(parentObject, { property1Name : property1Value, property2Name : property2Value ... })語法設定在實例屬性。

Answer 2

您可以設置x/y位置（如derM說的），但是您必須重新計算ApplicationWindow的每個大小更改！

下面是另一種解決方案：

ApplicationWindow { 
    id: mainWindow 

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

    Component.onCompleted: { 
     showMessageBox('Hey this actually works!'); 
    } 

    Item { 
     anchors.centerIn: parent 
     width: msgDialog.width 
     height: msgDialog.height 
     MessageDialog { 
      id: msgDialog 
      title: qsTr("Information") 
      visible: false 
     } 
    } 

    function showMessageBox(message) { 
     msgDialog.text = message 
     msgDialog.visible = true 
    } 

UPDATE：用動態實例：

Item { 
    id: dialogParent 
    anchors.centerIn: parent 
} 

function showMessageBox(message) { 
    var component = Qt.createComponent("MessageDialog.qml") 
    if(component.status === Component.Ready) { 
     var dialog = component.createObject(dialogParent) 

     dialog.title = qsTr("Information") 
     dialog.text = message 
     dialog.open() 

     dialogParent.width = dialog.width 
     dialogParent.height = dialog.height 
    } else { 
     console.error(component.errorString()) 
    } 
}