Gradient QML Type

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

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

プロパティ

• orientation : enumeration
• stops : list<GradientStop>

詳細説明

グラデーションは、シームレスにブレンドされる2つ以上の色によって定義されます。

色は、GradientStop の子項目のセットとして指定され、各項目はグラデーション上の 0.0 から 1.0 までの位置と色を定義する。それぞれのGradientStop の位置は、そのposition プロパティを設定することによって定義されます。その色は、そのcolor プロパティを使用して定義されます。

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

この項目はグラデーションの視覚的表現ではないことに注意してください。グラデーションを表示するには、グラデーションの使用をサポートしているビジュアルアイテム（Rectangle など）を使用してください。

使用例

次の例では、Rectangle アイテムを宣言し、グラデーションは赤から始まり、矩形の高さの 1/3 の位置で黄色にブレンドされ、緑で終わります：

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もご覧ください 。

プロパティ文書