Autoresize text in QML

Question

In the process of studying QML and Qt Quick, the following question arose. How can I make the text automatically reduce the font size by decreasing the element in which it is located.

Now I have this method:

Rectangle {
    id: main_window
    width: 700
    height: 500

    property int main_w: main_window.width

    Rectangle {
        width: 400
        height: 400
        anchors.centerIn: parent
        color: 'green'

        Text {
            text: "SIZE ME!!!"
            anchors.centerIn: parent
            color: 'white'
            font.pointSize: {
                if (main_window.main_w < main_window.width)
                    return main_window.main_w / 35 // we need 20pt
                return main_window.width / 35
            }
            visible: {
                if (parent.width < 100)
                    return false
                return true
            }
        }
    }
}

It works, but it's not that elegant. Maybe there are some methods that allow automatic text resizing. If the wrap in the ColumnLayout does not work.

Here is my code with fontSizeMode trying:

Rectangle {
    id: root
    width: 700
    height: 700
    property int mrg: 10   

    Rectangle {
        anchors.centerIn: parent
        width: 400
        height: 400
        color: 'green'

        Text {
            id: field
            text: "Size me!"
            minimumPointSize: 10
            font.pointSize: 60
            fontSizeMode: Text.Fit
            color: 'white'
            anchors.centerIn: parent
        }
    }
}

Answer 1

Use the Text elements fontSizeMode property to set autosizing (Text.HorizontalFit, Text.VerticalFit or Text.Fit). You can adjust the minimum font size with minimumPixelSize property.

See Qt Documentation — Text QML Type — fontSizeMode for details.