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