Rectangle QML Type

塗りつぶされた長方形を描画し、必要に応じて枠線を追加します。詳細...

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

プロパティ

• antialiasing : bool
• border
  • border.color : color
  • border.pixelAligned : bool
  • border.width : int
• bottomLeftRadius : real (since 6.7)
• bottomRightRadius : real (since 6.7)
• color : color
• gradient : var
• radius : real
• topLeftRadius : real (since 6.7)
• topRightRadius : real (since 6.7)

詳細な説明

矩形アイテムは、領域を単色やグラデーションで塗りつぶしたり、矩形の枠線を設定したりするために使用されます。

外観

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

border.color プロパティとborder.width プロパティを設定することで、独自の色と太さを持つ枠線を矩形に追加できます。色を「transparent」に設定すると、塗りつぶし色のない枠線が描画されます。

また、radius プロパティを使用して、角が丸い矩形を作成することもできます。これにより矩形の角に曲線が加わるため、見た目を整えるためにItem::antialiasing プロパティを設定するとよいでしょう。各角の半径を個別に設定するには、topLeftRadius 、topRightRadius 、bottomLeftRadius 、およびbottomRightRadius プロパティを使用できます。

使用例

次の例は、Rectangle アイテム（この例では正方形を作成するために使用されています）に対して、いくつかの一般的なプロパティを設定した際の効果を示しています：

import QtQuick

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

パフォーマンス

Item::antialiasing プロパティを使用すると、角が丸い矩形の見た目は向上しますが、その代償としてレンダリングパフォーマンスが低下します。移動中の矩形についてはこのプロパティを無効にし、静止している場合にのみ設定することを検討してください。

関連項目： Image 。

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

antialiasing : bool

このプロパティは、矩形にアンチエイリアシングを適用するかどうかを決定するために使用されます。アンチエイリアシングは、このプロパティがパフォーマンスに与える影響に関する情報を提供します。

半径が設定されている矩形の場合、デフォルトは true となり、それ以外の場合は false となります。

border group

長方形の枠線を引く際に使用する幅と色。

幅を 1 に設定すると、細い線が描画されます。線を表示しない場合は、幅を 0 に設定するか、透明色を使用してください。

境界線は、長方形の境界線の内側に描画されます。

pixelAligned がtrue （デフォルト）の場合、レンダリングされる枠線の幅は、デバイスのピクセル比によるスケーリングの後、整数のピクセル数に丸められます。pixelAligned をfalse に設定すると、小数点の枠線の幅が許可されます。これは、antialiasing が有効になっている場合に望ましい場合があります。

bottomLeftRadius : real [since 6.7]

このプロパティは、左下隅を描画する際に使用される半径を保持します。

bottomLeftRadius が設定されていない場合、代わりにradius が使用されます。bottomLeftRadius が 0 の場合、角は鋭角になります。

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

関連項目: radius 、topLeftRadius 、topRightRadius 、およびbottomRightRadius 。

bottomRightRadius : real [since 6.7]

このプロパティには、右下隅を描画する際に使用される半径が格納されます。

bottomRightRadius が設定されていない場合、代わりにradius が使用されます。bottomRightRadius が 0 の場合、角は鋭角になります。

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

関連項目： radius 、topLeftRadius 、topRightRadius 、およびbottomLeftRadius 。

color : color

このプロパティは、長方形の塗りつぶしに使用される色を指定します。

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

次の例は、16進数表記と色名表記を使用して色が指定された矩形を示しています。

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

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

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

「gradient」も参照してください 。

gradient : var

長方形を塗りつぶす際に使用するグラデーション。

このプロパティを使用すると、単純な垂直または水平のグラデーションを作成できます。矩形に回転を加えることで、その他のグラデーションを形成することも可能です。

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

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

Rectangle {
    width: 80; height: 80
    gradient: Gradient {
        orientation: Gradient.Horizontal
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

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

また、このプロパティではQGradient::Preset のグラデーションプリセットも使用できます。ただし、Rectangle は単純な縦方向または横方向のグラデーションのみをサポートしているため、サポートされていない角度を含むプリセットは、最も近い表現に置き換えられます。

Rectangle {
    width: 80; height: 80
    gradient: Gradient.NightFade
}

Rectangle {
    width: 80; height: 80
    gradient: "SunnyMorning"
}

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

Gradient およびcolorも参照してください 。

radius : real

このプロパティは、角が丸い長方形を描画する際に使用される角の半径を保持します。

radius が 0 以外の場合、矩形は角が丸い矩形として描画されます。それ以外の場合は、通常の矩形として描画されます。個々の角の半径も設定可能です（以下を参照）。これらの値は radius を上書きします。これらの値が設定されていない場合（undefined に設定されている場合）、代わりに radius が使用されます。

topLeftRadius 、topRightRadius 、bottomLeftRadius 、およびbottomRightRadiusも参照してください 。

topLeftRadius : real [since 6.7]

このプロパティは、左上隅を描画する際に使用される半径を保持します。

topLeftRadius が設定されていない場合、代わりにradius が使用されます。topLeftRadius が 0 の場合、角は鋭角になります。

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

関連項目： radius 、topRightRadius 、bottomLeftRadius 、およびbottomRightRadius 。

topRightRadius : real [since 6.7]

このプロパティには、右上隅を描画する際に使用される半径が格納されます。

topRightRadius が設定されていない場合、代わりにradius が使用されます。topRightRadius が 0 の場合、角は鋭角になります。

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

関連項目: radius 、topLeftRadius 、bottomLeftRadius 、およびbottomRightRadius 。