Sizing QML Dialog to text

[Bob64]

I want to make a dialog that will simply pop up a message with either a simple OK button or maybe a couple of options like OK and Cancel.

I am using QML Dialog from Quick Controls. (I am aware of MessageDialog but it does not fit my use case as it is not customisable in the same way.)

The issue I always seem to face when doing something like this is getting the dialog sizing right for the text. I seems like I really ought to be able to write this once as a reusable component that accepts an arbitrary text string (within reason) such that the dialog is able to size itself and lay out the text nicely. What I usually end up doing is hard coding sizes to some extent, but this isn't necessarily reliable cross platform and is brittle to future changes such as theme font changes and internationalisation.

The issue is that a typical text string needs to be laid out with wrapped lines. In order to wrap the lines, the width of the Text item needs to be known. The width of the text item is constrained by the width of the dialog. But the size of the dialog is flexible as we want it to be an appropriate size for the text it contains.

Is there some nice canonical QML way to deal with this situation?

I have an approach that I am not very happy with but works to a degree. This involves fixing the dialog width based on the width of the buttons with a factor applied. The Text is then given a width using the availableWidth of the dialog. Wrapping mode is turned on. The height of the dialog is then set based on the implicit height of the text. It feels like this only works by the skin of its teeth and that it's a miracle I don't have a binding loop.

import QtQuick 2.9
import QtQuick.Controls 2.2

Dialog {
    id: dlg

    visible: false
    title: "My Dialog"

    property var msgText
    property var parentWindow

    width: Math.min(buttons.implicitWidth * 1.5, parentWindow.width)
    height: Math.min(msg.implicitHeight + 120, parentWindow.height)

    x: (parentWindow.width - width) / 2
    y: (parentWindow.height - height) / 2

    header: Label{
        text: dlg.title
    }

    Text{
        id: msg
        text: msgText
        width: dlg.availableWidth
        textFormat: Text.StyledText
        wrapMode: Text.WordWrap
    }

    footer: Item {
        width: parent.width
        height: buttons.implicitHeight
        Row {
            id: buttons
            anchors.horizontalCenter: parent.horizontalCenter
            padding: 5
            spacing: 2
            Button {
                text: "Continue"
                onClicked: dlg.accept()
            }
            Button {
                text: "Cancel"
                onClicked: dlg.reject()
            }
        }
    }
}

[Shrishashank]

To address this problem, you can try improving the dynamic sizing logic of the dialog using a more flexible approach that leverages implicit sizes more naturally. Here is an updated version of the dialog component, with improved sizing logic to handle dynamic text wrapping without manually adjusting the size of the dialog:

import QtQuick 2.9
import QtQuick.Controls 2.2

Dialog {
    id: dlg

    visible: false
    title: "My Dialog"

    property var msgText
    property var parentWindow

    // Automatically determine width based on available space and the width of the content
    width: Math.min(buttons.implicitWidth * 1.5, parentWindow.width)
    height: content.implicitHeight + footer.implicitHeight + 20 // Account for content and footer height

    x: (parentWindow.width - width) / 2
    y: (parentWindow.height - height) / 2

    header: Label{
        text: dlg.title
        // You can add more customization here, like styling if needed
    }

    // Container for content, where the text will go
    Item {
        id: content
        width: dlg.width * 0.8 // Use 80% of the dialog width as the maximum text width
        height: Text {
            id: msg
            text: msgText
            width: parent.width // Wraps within the given width
            textFormat: Text.StyledText
            wrapMode: Text.WordWrap
        }.implicitHeight // Use the implicit height of the text container for dynamic sizing
    }

    footer: Item {
        width: parent.width
        height: buttons.implicitHeight
        Row {
            id: buttons
            anchors.horizontalCenter: parent.horizontalCenter
            padding: 5
            spacing: 2
            Button {
                text: "OK"
                onClicked: dlg.accept()
            }
            Button {
                text: "Cancel"
                onClicked: dlg.reject()
            }
        }
    }
}