如何在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()) 
    } 
}