Back to Qt.io
Contact Us Blog Download Qt
このページでは

C

Rectangle QML Type

角を丸くすることもできる塗りつぶされた長方形を描画します。詳細...

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

Item

Inherited By:

AlternateKeysListHighlight, KeyboardBackground, and SelectionListBackground

プロパティ

詳細説明

「長方形」アイテムは、領域を単色またはグラデーションで塗りつぶすために使用されます。

外観

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

また、radius プロパティを使用して、角が丸い矩形を作成することもできます。

使用例

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

import QtQuick 2.15

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

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

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

border group

border.color : color

border.width : int

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

枠線は長方形の境界内（width ×height ）に描画され、境界の外側には決して描画されません。デフォルトのborder.color は黒です。

注： Qt Quickとは異なり 、border.width のデフォルト値は1 ではなく0 であるため、border.width が明示的に設定されるまでは境界線は描画されません。border.color のみを設定しても、目に見える変化はありません。

注： radius やgradientとは異なり 、border のプロパティはオンデマンドの追加プロパティストレージを使用しません。border.width やborder.color を使用しても、それ自体のわずかな固定コストしか発生しません。radius とgradient はオンデマンドストレージを割り当てるプロパティであり、これらは単一のブロックを共有しています。つまり、どちらか一方を使用すれば、両方のコストが負担されることになります。

注： radius またはgradient を半透明の塗りつぶしcolor と組み合わせると 、境界線の色が半透明の塗りつぶしを通して透けて見えます。

注： 同じ理由により 、完全に透明な塗りつぶしcolor では、radius またはgradient が設定されている場合、中空のアウトラインは生成されません。内部が境界線の色で塗りつぶされるため、長方形は実線として表示されます。中空の枠線を表示するには、radius を0 のままにし、gradient を設定しないでください。

Rectangle {
    width: 100
    height: 100
    color: "#41cd52"
    border.color: "black"
    border.width: 4
}

color 、radius 、およびgradientも参照してください 。

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で導入されました。

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

radius : real

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

radius が 0 以外の場合、矩形は角が丸い矩形として描画され、0 の場合は通常の矩形として描画されます。4 つの角すべてに同じ半径が使用されます。現時点では、角ごとに異なる半径を指定する方法はありません。

特定の Qt ライセンスの下で利用可能です。
詳細はこちらをご覧ください。