Qt クイックサンプル - テキスト

テキストに関する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

©2024 The Qt Company Ltd. 本書に含まれる文書の著作権は、それぞれの所有者に帰属します。ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。