autoresize text in qml

Question

In the process of studying QML and QtQuick, 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 not too elegantly. Maybe there are some methods that the text automatically resized. If the wrap in the ColumnLayout does not work.

Please help. Thank you

Here 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
    }
}
}

Solution 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 http://doc.qt.io/qt-5/qml-qtquick-text.html#fontSizeMode-prop for details

Solution 2

I have this problem too, but figured, that you need only set the width and height of the Text item relative to the item/object where you want the text fitted (parent). Here is a working example:

import QtQuick 2.7

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

    Rectangle {
        anchors.centerIn: parent
        width: root.width * 0.5
        height: root.height * 0.5
        color: 'green'

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

PS: If the rect is very small, text could be hanging out because of the minimumPointSize: 10.

Comments

[v_sith_v]

I looked at these methods, but for some reason, there is no effect

[derM]

@v_sith_v: Could you edit your question, to include your try with the fontSizeMode-property?

[v_sith_v]

I figured out this problem. Your advice was right. Thank you

[Uglylab]

Two more things: font.pointSize (or font.pixelSize) is in fact the maximum size. The font will not fit over this value. For very high definition, put a big value. The second thing is: in the form editor the maximum value allowed for the font size is 400. For bigger value you will have to use the text editor