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

직사각형에 앤티앨리어싱을 적용할지 여부를 결정하는 데 사용됩니다. 앤티앨리어싱은 이 속성이 성능에 미치는 영향에 대한 정보를 제공합니다.

반지름이 지정된 Rectangle의 경우 기본값은 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

이 속성은 둥근 사각형을 그릴 때 사용되는 모서리 반지름을 지정합니다.

반지름이 0이 아닌 경우, 사각형은 둥근 사각형으로 그려지며, 그렇지 않은 경우 일반 사각형으로 그려집니다. 개별 모서리 반지름도 설정할 수 있습니다(아래 참조). 이 값들은 반지름 값보다 우선 적용됩니다. 이 값들이 설정되지 않은 경우( undefined 로 설정 시), 대신 반지름 값이 사용됩니다.

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도 참조하십시오 .