Gradient QML Type

グラデーション塗りつぶしを定義します。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• orientation : enumeration
• stops : list<GradientStop>

詳細な説明

グラデーションは、2色以上の色で定義され、それらがシームレスに混ざり合います。

色は、GradientStop の子要素のセットとして指定され、各要素はグラデーション上の位置（0.0～1.0）と色を定義します。各GradientStop の位置は、position プロパティを設定することで定義され、色はcolor プロパティを使用して定義されます。

グラデーションストップが一切ないグラデーションは、白一色の塗りつぶしとしてレンダリングされます。

なお、このアイテムはグラデーションを視覚的に表現するものではありません。グラデーションを表示するには、グラデーションの使用をサポートする視覚アイテム（Rectangle など）を使用してください。

使用例

次の例では、赤から始まり、長方形の高さの 3 分の 1 の位置で黄色へと変化し、最後に緑で終わるグラデーションを持つRectangle アイテムを宣言しています。

Rectangle {
    width: 100; height: 100
    gradient: Gradient {
        GradientStop { position: 0.0; color: "red" }
        GradientStop { position: 0.33; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

パフォーマンスと制限事項

グラデーションの計算は、単色塗りつぶしや画像の使用に比べて計算負荷が高くなる場合があります。ユーザーインターフェース内の静的なアイテムにグラデーションを使用することを検討してください。

Qt 5.12 以降、アイテムに垂直および水平の線形グラデーションを適用できるようになりました。 角度付きのグラデーションを適用する必要がある場合は、該当するアイテムに回転とクリッピングを組み合わせて適用できます。あるいは、QtQuick.Shapes::LinearGradient または QtGraphicalEffects::LinearGradient の使用を検討してください。これらのアプローチはいずれも、アプリケーションに追加のパフォーマンス要件をもたらす可能性があります。

グラデーションストップを含むアニメーションを使用しても、期待通りの結果が得られない場合があります。グラデーションをアニメーション化する別の方法として、あらかじめ生成された画像や、グラデーションを含むSVG図形を使用する方法があります。

GradientStopも参照してください 。

プロパティのドキュメント

orientation : enumeration

このプロパティを設定して、グラデーションの方向を指定します。

デフォルトは Gradient.Vertical です。

stops : list<GradientStop> [default read-only]

このプロパティには、グラデーションを記述するグラデーションストップが格納されます。

デフォルトでは、このプロパティには空のリストが含まれます。

グラデーションストップを設定するには、それらを Gradient の子要素として定義します。