CODEWITHSUNDEEP
qtqml
dany
dany

Reputation: 359

Dialog standardButtons position

I want to make Dialog with only 1 button ("OK"). But when I use "standardButtons: Dialog.Ok" it positions it to the right. How it may be positioned in the middle? I would like to keep current button dimensions.

enter image description here

I've tried to use DialogButtonBox, and also Rectangle and Buttons in footer, but every time it not worked, or look like a mess

Code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button {
        id: button
        text: qsTr("Button")
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: dialog.open()
    }

    Dialog {
        id: dialog
        modal: true
        font.bold: true
        title: "WARNING!!!"
        Text {
            id: dialogMessage
            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, \nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            horizontalAlignment: Text.AlignHCenter
        }
        parent: Overlay.overlay
        x: parent.width/2 - width/2
        y: parent.height/2 - height/2

        standardButtons: Dialog.Ok
    }
}

Upvotes: 2

Views: 1450

Answers (2)

Mitch
Mitch

Reputation: 24386

There are a few options:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true

    Dialog {
        id: dialog
        x: parent.width/2 - width/2
        y: parent.height/2 - height/2
        parent: Overlay.overlay
        modal: true
        font.bold: true
        title: "WARNING!!!"
        standardButtons: Dialog.Ok
        visible: true

        Text {
            id: dialogMessage
            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, \nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            horizontalAlignment: Text.AlignHCenter
        }

        // Declare your own DialogButtonBox.
        footer: DialogButtonBox {
            alignment: Qt.AlignHCenter
        }

        // Assign it declaratively.
//        Binding {
//            target: dialog.footer
//            property: "alignment"
//            value: Qt.AlignHCenter
//        }

        // Assign it imperatively.
//        Component.onCompleted: dialog.footer.alignment = Qt.AlignHCenter
    }
}

I've left the other ones commented out to illustrate that you only need one of these approaches.

Note that you can't just do:

footer.alignment: Qt.AlignHCenter

because the type of the footer property is Item, not DialogButtonBox, and Item doesn't have an alignment property.

Upvotes: 1

sweak
sweak

Reputation: 1970

Consider using Column Layout, it will keep the dialog in shape. Also use both Layout.alignment and alignment property in the DialogButtonBox - the dialog will look just as You wish:

Dialog {
        id: dialog
        modal: true
        font.bold: true
        visible: true
        title: "WARNING!!!"
        ColumnLayout {
            Text {
                id: dialogMessage
                Layout.alignment: Qt.AlignHCenter
                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, \nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            }

            DialogButtonBox{
                standardButtons: DialogButtonBox.Ok
                Layout.alignment: Qt.AlignHCenter
                alignment: Qt.AlignHCenter

                onAccepted: dialog.close()
            }
        }
    }

Upvotes: 1

Related Questions