[Solved]Auto-resize text based on parent component size



  • Hi everyone,

    I was wondering how can one autoresize some text.
    What I have is just a simple window with a sentence of varying length in it. As I resize the window I want the font size to increase or decrease accordingly (something that to an extend I did) but also if possible, I want it to behave a little bit more intelligently. In the sense that the text should not get bigger and bigger indefinitely but at some point reach an upper limit and stop. Same rules should apply for when it is getting smaller (for example when should it wrap and when should it just get smaller).

    What I am describing here is purely my own imagination running ahead of my programming skills, so it may not even be possible, in any case any recommendations are welcomed.


  • Moderators

    Hi,

    You can bind an expression to font.PointSize which will return the new point size depending upon the Window's dimensions. Something like this
    @
    Rectangle {
    id: rect
    width: 400
    height: 400

    Text {
        anchors.centerIn: parent
        text: "Qt is Cool"
        font.pointSize: rect.width > 500 ? rect.width/10 : 40
    }
    

    }
    @

    You could add threshold condition to above expression to control it.



  • The fontSizeMode (http://doc.qt.io/qt-5/qml-qtquick-text.html#fontSizeMode-prop) property of Text will do this for you.
    font.pixelSize will set the maximum size, and minimumPixel size the minimum (or font.pointSize, and minimumPointSize if you prefer.

    Then set the Text item dimensions: 'anchors.fill: parent' if you just want to fit to the parent, enable wrapping and eliding as you please and it will be taken care of.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.