[Solved]Auto-resize text based on parent component size
-
wrote on 13 Feb 2015, 12:24 last edited by
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.
-
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: 400Text { 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.
-
wrote on 14 Feb 2015, 13:32 last edited by
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.
1/3