Qt Quick 例題 - テキスト

テキストに関連するQMLのサンプル集です。

Textは、テキストに関する小さなQMLの例集です。各例題は小さなQMLファイルで、通常、特定の型や機能を含んでいたり、強調されていたりします。それぞれの例を実行し、動作を観察することができます。

Hello

Helloは、Text の文字間隔を変更し、アニメーション化する方法を示しています。シーケンシャルアニメーションを使用して、まずfont.letterSpacingプロパティを0 から50 まで3秒かけてアニメーションさせ、次にテキストを画面上のランダムな位置に移動させます：

            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)
                    }
                }
            }

フォント

Fonts は、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"
    }

利用可能なフォント

Available Fontsは、Qt グローバルオブジェクトとリストビューを使って、システム上で利用可能なすべてのフォントを表示する方法を示しています。ListView 型は、利用可能なフォントのリストをモデルとして使用します：

        model: Qt.fontFamilies()

デリゲート内部では、フォントファミリは modelData で設定されます：

                font.family: parent.modelData

Bannerは、テキスト・タイプの行とNumberAnimation を使用してバナーを作成する方法を示す単純な例です。

Img タグ

Img タグは、<img> タグを使用して、テキストオブジェクト内に画像を表示するさまざまな方法を示します。

テキストレイアウト

テキストレイアウトでは、テキストアイテムに対してより複雑なレイアウトを作成する方法を示します。この例では、onLineLaidOut ハンドラを使ってテキストを 2 列にレイアウトしています：

        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

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.