I can't figure this one out. I mean the vertical spacing between lines of text in a Qml Text Item. I can't use Rich Text, and GridLayout seems to destroy my wrapping, horizontal alignment and the ability to check for truncated. This is inside a rectangle.
Text{
width:10
wrapMode: Text.Text.Wrap
text:"This will be broken into multiple lines. How could I set the vertical spacing between them?"
}
I mean:
Vs
A good habit is to check the documentation. Browsing through it, you could see a property called lineHeight
. I believe this is what you're looking for. From the documentation:
lineHeight : real
Sets the line height for the text. The value can be in pixels or a multiplier depending on
lineHeightMode
.
They also tell you how to use it
The default value is a multiplier of 1.0. The line height must be a positive value.
Using lineHeight
as a multiplier allows you to mimic the following line-spacing enumerations in MSWord.
Single
1.5 lines
Double
Multiple
Here's an example:
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
visible: true
width: 200
height: 300
Text {
id: text
width: 175
anchors.centerIn: parent
// text: "HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO"
text: "Cat ipsum dolor sit amet, sleep nap. You call this cat food. Push your water glass on the floor."
font.family: "Monaco" // Monaco ❤️
wrapMode: Text.WordWrap // Make the text multi-line
horizontalAlignment: Text.AlignHCenter
// lineHeight: 1.0 // single-spacing (default)
lineHeight: 1.5 // 1.5 line-spacing
// lineHeight: 2.0 // double-spacing
// lineHeight: 3.0 // triple-spacing
}
}
Here are the results of using different values of lineHeight
(on a typical MacOS)
Single-spacing
1.5x, Double (2x), Triple (3x)
However, if you want to mimic the other line-spacing enumerations:
At least
Exactly
you'll need to modify the pixel height. You can do this by setting lineHeightMode
to Text.FixedHeight
. Like so
Window {
visible: true
width: 200
height: 300
Text {
id: text
width: 175
anchors.centerIn: parent
text: "Cat ipsum dolor sit amet, sleep nap. You call this cat food. Push your water glass on the floor."
font.family: "Monaco" // Monaco ❤️
wrapMode: Text.WordWrap // Make the text multi-line
lineHeightMode: Text.FixedHeight
lineHeight: 6 // exaggerated, text will be scrunched up
}
}
Exactly 6