web-dev-qa-db-ja.com

QtQuick Controls 2でダイアログを画面の中央に配置するにはどうすればよいですか？

すべてのダイアログは、画面の中央ではなく左上隅に表示されます。

ダイアログを自動的に正しく配置するための最良の方法は何ですか？

enter image description here

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
    }
}
qtqmlqt5qtquick2qtquickcontrols2
7
feedc0de

ドキュメントは、 Dialog が Popup の子孫であり、 _x/y_ -座標。

それらはそれを位置付ける良いスタートになると思います。

あなたの役に立つ：

  • _parent.width_-これはウィンドウの幅である必要があります
  • width-これは、Dialogsの幅になります
  • _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 ... })構文を使用してインスタンス化時にのみプロパティを設定できます。

8
derM

（derMが言ったように）x/y位置を設定できますが、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
    }

更新：動的インスタンス化あり：

 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())
    }
 }
4
Hubi