Qt Quick 示例 - 文本

这是一组与文本相关的 QML 示例。

文本是一组与文本相关的 QML 示例。每个示例都是一个小的 QML 文件，通常包含或强调一种特定类型或功能。您可以对每个示例进行运行和观察其行为。

Hello

Hello 展示了如何更改和动画化 Text 类型的字母间距。它使用顺序动画在三个秒内将字体.letterSpacing 属性从 0 增加到 50，然后将文本移动到屏幕上的随机位置

            SequentialAnimation on font.letterSpacing {
                loops: Animation.Infinite
                NumberAnimation {
                    from: 0
                    to: 50
                    easing.type: Easing.InQuad
                    duration: 3000
                }
                ScriptAction {
                    script: {
                        container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
                        container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
                    }
                }
            }

字体

字体展示了使用 Text 类型使用字体的不同方法。只需通过名称，直接使用 font.family 属性

            font.family: "Times"

或使用一个 FontLoader 并指定本地字体文件

    FontLoader {
        id: localFont
        source: "content/fonts/tarzeau_ocr_a.ttf"
    }

或最后使用一个 FontLoader 并指定远程字体文件

    FontLoader {
        id: webFont
        source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf"
    }

可用字体

可用字体 展示了如何使用 Qt 全局对象和列表视图来显示系统上可用的所有字体。列表视图类型使用可用的字体列表作为其模型

        model: Qt.fontFamilies()

在代理内部，使用 modelData 设置字体族

                font.family: parent.modelData

横幅是一个简单的示例，展示了如何使用一系列文本类型和 NumberAnimation 来创建横幅。

Img 标签

Img 标签 展示了在文本对象中显示图像的不同方法，使用 `` 标签。

文本布局

文本布局 展示了如何创建文本项的更复杂布局。此示例使用 onLineLaidOut 处理程序将文本布局为两列，该处理程序允许您定位和调整每一行的尺寸

        onLineLaidOut: (line) => {
            line.width = width / 2  - main.margin

            if (line.y + line.height >= height) {
                line.y -= height - main.margin
                line.x = width / 2 + main.margin
            }

            if (line.isLast) {
                lastLineMarker.x = line.x + line.implicitWidth
                lastLineMarker.y = line.y + (line.height - lastLineMarker.height) / 2
            }
        }

示例项目 @ code.qt.io