このページでは

C

Rectangle QML Type

塗りつぶされた矩形を描画します。詳細...

Import Statement: import QtQuick
Since: Qt Quick Ultralite 1.0
Inherits:

Item

Inherited By:

AlternateKeysListHighlight, KeyboardBackground, and SelectionListBackground

プロパティ

詳細説明

矩形アイテムは、領域をベタ塗りやグラデーションで塗りつぶすために使用します。

外観

各矩形アイテムは、color プロパティを使用して指定された塗りつぶしのベタ色、またはGradient タイプを使用して定義され、gradient プロパティを使用して設定されたグラデーションを使用して描画されます。色とグラデーションの両方が指定されている場合は、グラデーションが使用されます。

また、radius プロパティを使用して丸みを帯びた長方形を作成することもできます。

使用例

次の例では、Rectangle アイテムを使用して、角を丸めた正方形を作成しています。

import QtQuick 2.15

Rectangle {
    width: 100
    height: 100
    color: "red"
    radius: 10
}

Imageも参照して ください。

プロパティの説明

color : color

このプロパティは、矩形の塗りつぶしに使用される色を保持します。

デフォルトの色は白です。

スチールブルーの長方形の上にグリーンの長方形。

以下の例では、16進数表記と名前付き色表記で色を指定した長方形を示しています:

Rectangle {
    color: "#00B000"
    width: 80; height: 80
}

Rectangle {
    color: "steelblue"
    y: 100; width: 80; height: 80
}


gradient : Gradient [since Qt Quick Ultralite 2.7]

矩形の塗りつぶしに使用するグラデーション。

このプロパティは、単純な垂直または水平グラデーションの構築を可能にします。

3つの長方形を重ねた:上部にライト・スチール・ブルーの長方形、中央に水平のブルー・グラデーションの長方形、下部に垂直のブルー・グラデーションの長方形。

Rectangle {
    y: 0; width: 80; height: 80
    color: "lightsteelblue"
}

Rectangle {
    y: 100; width: 80; height: 80
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Rectangle {
    y: 200; width: 80; height: 80
    rotation: 90
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

グラデーションと色の両方が指定された場合、グラデーションが使用されます。

このプロパティはQt Quick Ultralite 2.7で導入されました。

colorGradientも参照してください


radius : real

このプロパティは、丸みを帯びた矩形を描画するために使用される角の半径を保持します。

半径が0でない場合、矩形は丸みを帯びた矩形として描かれ、そうでない場合は通常の矩形として描かれます。現在のところ、異なる角に異なる半径を指定する方法はありません。


特定の Qt ライセンスの下で利用可能です。
詳細はこちら。