Scalable dialog using QtQuick.Dialogs

ssolomin

Hello,

I've tried create custom qml Dialog using QtQuick.Dialogs with two buttons (Ok and Cancel). But I've ran into 2 problems:

Dialogue with scalable content cannot be created.
Example code reproduced problem:

Dialog {
    title: "Scalable rectangles"
        Item {
            anchors.fill: parent
            Rectangle {
                id: red
                color: "red"
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                width: Math.max(128, Math.min(192, parent.width / 2))
            }
            Rectangle {
                id: blue
                color: "blue"
                anchors.top: parent.top
                anchors.left: red.right
                anchors.right: parent.right
                anchors.bottom: parent.bottom
            }
        }
}

I see only button "Ok", there are no rectangles, because height of item is 0. Resizing dialog change Item's width only, but anchors.fill has been setted to parent. :-( How can I create scalable dialog or is it a bug?
2. There are no documented method to set minimum dialogue size.
I've not found minimumWidth or minimumHeight properties for dialog item. But according source code of qquickabstractdialog.cpp I have found two way to set minimum size: set implicit* properties or set minimumHeight and minimumWidth to contentItem property. I suppose Dialog should have this properties, isn't it?

Quteroid

@ssolomin
I'd suggest to simply use a Window instead of a Dialog. This should solve both of your asked problems:

make window contents scalable,
set minimum dimensions

Note that component Dialog is aimed at being "platform-tailored". This prevents the extent of design freedom you're asking for, since on some platforms this freedom may not be common or natively supported by dialogs.

The following snipplet demonstrates what you're likely trying to achieve:

a dialog-like window, with
a fully scalable content area
horizontally scaling "OK" and "Cancel" buttons
minimum dimensions for the window

Code:

Window {
    title: "Scalable rectangles"
    minimumWidth: 256
    minimumHeight: 192
    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            id: scaleableContents
            color: "gray"
            Layout.fillWidth: true
            Layout.fillHeight: true }
        RowLayout {
            spacing: buttonOk.width >> 2
            Button {
                id: buttonOk
                text: "OK"
                Layout.fillWidth: true }
            Button {
                text: "Cancel"
                Layout.fillWidth: true } } } }

You may adjust things like minimum dimensions, spacing and button height according to your taste.

If you really need modality (which I would consider rather evil) then there are other ways to make the underlying ApplicationWindow (or whatever) non-responsive while a dialog is shown.

Quteroid

@ssolomin

I just noticed that the sample snipplet from my previous post is prone to a Qt deadlock of type: "QQuickWindow: possible QQuickItem::polish() loop" when heavily playing with window resizing. Please replace the line

spacing: buttonOk.width >> 2

with something like:

spacing: width >> 3

to fix this. The result looks essentially the same.

ssolomin

@Quteroid
Thank you for reply.
I've implemented it using Dialog qml type and overridden contentItem property. But I decided to change standard buttons to custom, so I'll try to rewrite my dialog according to your advice anytime soon :-)

Nominate our 2022 Qt Champions!

Scalable dialog using QtQuick.Dialogs