如何设置Qml文本项的行距?

时间:2018-11-18 21:36:20

标签: qt widget qml kde plasmoid

我不知道这一点。我的意思是Qml文本项中文本行之间的垂直间距。我不能使用Rich Text,并且GridLayout似乎破坏了我的环绕,水平对齐和检查截断的能力。这是在矩形内部。

Text{   
        width:10
        wrapMode: Text.Text.Wrap
        text:"This will be broken into multiple lines. How could I set the vertical spacing between them?"
     }

我的意思是:

enter image description here

Vs

enter image description here

1 个答案:

答案 0 :(得分:1)

check the documentation是一个好习惯。浏览它,您会看到一个名为lineHeight的属性。我相信这就是您要寻找的。从文档中:

  

lineHeight : real

     

设置文本的行高。该值可以为像素或乘数,具体取决于lineHeightMode

他们还告诉您如何使用

  

默认值为1.0的乘数。线高必须为正值。

使用lineHeight作为乘数,可以模拟MSWord中的以下行距枚举。

Single
1.5 lines
Double
Multiple

这是一个例子:

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

    }
}

以下是在典型的MacOS上使用不同值lineHeight的结果

单行距

1x Line Spacing

1.5倍,两倍(2x),三倍(3x)

1.5x Line Spacing 2x Line Spacing 3x Line Spacing


但是,如果您想模仿其他行间距枚举:

At least
Exactly

您需要修改像素高度。您可以通过将lineHeightMode设置为Text.FixedHeight来实现。像这样

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

    }
}

正好6

Exactly 6