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 全局对象和列表视图来显示系统上所有可用的字体。该 ListView 类型使用可作为其模型的字体列表。

model: Qt.fontFamilies()

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

font.family: parent.modelData

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

Qt Quick 示例 - 文本#

Hello#

字体#

可用的字体#

Banner#

Img 标签#

文本布局#