QML官方系列教程——Use Case - Displaying Text In QML

附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-text.html


Displaying and Formatting Text—— 显示并设置文本格式

要想在QML中显示文本,只需要创建一个Text对象并在它的text属性中设置你希望显示的文本,这样它就可以显示你的文本了。

Text对象有多个用来修改文本风格的属性值。其中包含颜色、字体库、字体大小、加粗以及斜体。查看Text类型文档来了解全部的属性。

使用富文本的标记来选择性地更改一个文本对象中的部分内容的风格。将Text::textFormat设置为Text.StyledText中来使用这个功能(译者注:相比于Text.RichText,Text.StyledText只支持部分常用的HTML标签,但QML对其进行了优化以获得更佳的表现性能,因此Qt更推荐使用Text.StyledText)。到Text类型的文档来了解更多有关细节。


Laying out Text —— 文本编排

默认情况下,Text以单行显示文本,除非它内部包含多行内容。为了设置文本的换行方式,需要设置wrapMode属性,并为文本设定一个明确的宽度。如果宽度和高度没有被显式地设置,读取这些参数时将返回这个文本所绑定的矩形框的尺寸(如果你已经显式设置了宽高,你依然可以使用paintedWidth和paintedHeight)。记住了这些参数,Text就可以像任何其他Item一样被定位。


Example Code —— 示例代码

import QtQuick 2.0

Item {
    id: root
    width: 480
    height: 320

    Rectangle {
        color: "#272822"
        width: 480
        height: 320
    }

    Column {
        spacing: 20

        Text {
            text: 'I am the very model of a modern major general!'

            // color can be set on the entire element with this property
            color: "yellow"

        }

        Text {
            // For text to wrap, a width has to be explicitly provided
            width: root.width

            // This setting makes the text wrap at word boundaries when it goes past the width of the Text object
            wrapMode: Text.WordWrap

            // You can use \ to escape quotation marks, or to add new lines (\n). Use \\ to get a \ in the string
            text: 'I am the very model of a modern major general. I\'ve information vegetable, animal and mineral. I know the kings of england and I quote the fights historical; from Marathon to Waterloo in order categorical.'

            // color can be set on the entire element with this property
            color: "white"

        }

        Text {
            text: 'I am the very model of a modern major general!'

            // color can be set on the entire element with this property
            color: "yellow"

            // font properties can be set effciently on the whole string at once
            font { family: 'Courier'; pixelSize: 20; italic: true; capitalization: Font.SmallCaps }

        }

        Text {
            // HTML like markup can also be used
            text: '<font color="white">I am the <b>very</b> model of a modern <i>major general</i>!</font>'

            // This could also be written font { pointSize: 14 }. Both syntaxes are valid.
            font.pointSize: 14

            // StyledText format supports fewer tags, but is more efficient than RichText
            textFormat: Text.StyledText

        }
    }
}

·

QML官方系列教程——Use Case - Displaying Text In QML_第1张图片

你可能感兴趣的:(QML官方系列教程)