Nominate our 2022 Qt Champions!

Scalable dialog using QtQuick.Dialogs

  • Hello,

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

    1. 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.left: parent.left
                    anchors.bottom: parent.bottom
                    width: Math.max(128, Math.min(192, parent.width / 2))
                Rectangle {
                    id: blue
                    color: "blue"
                    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?

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

    1. make window contents scalable,
    2. 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


    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.

  • @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.

  • @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 :-)

Log in to reply