Qml 垂直文本方向

Question

如何在 QML 中以垂直方向显示文本，如下所示

Text {
    id: name13
    text: qsTr("KITCHEN")
}

Answer 1

将

width

设置为 1，并将

wrapMode

设置为

Text.WrapAnywhere

。这迫使每个字母出现在自己的行上。

Text {
    text: "KITCHEN"
    anchors.centerIn: parent
    color: "white"
    width: 1
    wrapMode: Text.WrapAnywhere

    // -- additional parameters for prettiness --
    lineHeight: 0.9
    font.pixelSize: 50
    horizontalAlignment: Text.AlignHCenter
}

^{QML在线 KDE 演示}

Answer 2

在下面的示例中，我使用

Frame

来允许您将背景设置为

grey

。我将

Column

与

Repeater

一起使用，并用

"KITCHEN"

分解

split()

字符串，并将每个字符渲染在其自己的

Text

组件中：

Frame {
    background: Rectangle { color: "grey" }
    Column {
        Repeater {
            model: "KITCHEN".split("")
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                text: modelData
                font.pointSize: 24
                color: "white"
            }
        }
    }
}

这是一个更短的答案，不需要

Repeater

。相反，使用

split()

和

join()

在每个字符之间插入换行符：

Frame {
    background: Rectangle { color: "grey" }
    Label {
        horizontalAlignment: Text.AlignHCenter
        text: "KITCHEN".split("").join("\n")
        font.pointSize: 24
        color: "white"
    }
}

您可以在线尝试！