DelegateStyle QML Type

컨트롤 내 요소의 시각적 모양을 정의합니다. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

• alignment : Qt::Alignment
• border : BorderStyle
• bottomLeftRadius : real
• bottomMargin : real
• bottomRightRadius : real
• clip : bool
• color : color
• data : QObject
• delegate : Component
• gradient : Gradient
• image : ImageStyle
• implicitHeight : real
• implicitWidth : real
• leftMargin : real
• margins : real
• minimumWidth : real
• opacity : real
• radius : real
• rightMargin : real
• rotation : real
• scale : real
• shadow : ShadowStyle
• topLeftRadius : real
• topMargin : real
• topRightRadius : real
• visible : bool

상세 설명

델리게이트 스타일은 background, indicator, 또는 indicator.foreground 과 같은 하위 요소와 같은 ControlStyle 내의 시각적 요소의 시각적 모양을 설명합니다. size , color, border, radius, shadow, image, opacity 등을 제어하기 위한 프로퍼티를 제공합니다.

ControlStyle, ControlStateStyle, 및 대체 스타일 참조를참조하십시오 .

속성 문서

alignment : Qt::Alignment

부모 내 델리게이트의 정렬입니다. 기본값은 Qt.AlignLeft | Qt.AlignVCenter 입니다.

border : BorderStyle

이 델리게이트의 테두리 스타일링을 위한 그룹화된 프로퍼티입니다.

bottomLeftRadius : real

왼쪽 하단 모서리 반경입니다. 설정하지 않으면 radius 로 돌아갑니다.

radius, topLeftRadius, topRightRadius, bottomRightRadius도 참조하세요 .

bottomMargin : real

이 델리게이트의 아래쪽 여백입니다. 설정하지 않으면 margins 로 돌아갑니다.

margins, topMargin, leftMargin, rightMargin도 참조하세요 .

bottomRightRadius : real

오른쪽 하단 모서리 반경입니다. 설정하지 않으면 radius 으로 되돌아갑니다.

radius, topLeftRadius, topRightRadius, bottomLeftRadius도 참조하세요 .

clip : bool

델리게이트가 콘텐츠를 스크랩할지 여부입니다. 기본값은 false 입니다.

color : color

이 델리게이트의 채우기 색입니다. 기본값은 transparent 입니다.

그라데이션이 색을 대체하는 빠른 Rectangle 과 달리 StyleKit 은 색상 위에 gradient 을 그립니다. 즉, 반투명 그라데이션을 오버레이(예: 미묘한 음영 효과)로 사용하면서 색상은 아래에 표시할 수 있습니다.

button {
    background.gradient: Gradient {
        GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
        GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
    }
    background.color: "lightsteelblue"
    hovered.background.color: Qt.darker("lightsteelblue", 1.1)
    pressed.background.color: Qt.darker("lightsteelblue", 1.2)
}

gradient 및 opacity 을참조하세요 .

data : QObject

스타일에서 사용자 정의 데이터를 사용자 정의 delegate 컴포넌트로 전달하는 데 사용할 수 있는 임의의 객체입니다.

이를 통해 StyleKit API가 제공하는 것 이상의 사용자 정의 스타일 속성을 정의할 수 있습니다. 데이터 개체는 상태와 테마에 따라 달라질 수 있으므로 기본 제공 속성에 포함되지 않는 사용자 정의 delegate 요소의 스타일을 지정할 수 있습니다.

다음 코드 조각은 컨트롤의 상태에 따라 색상이 달라지는 Text 오버레이를 그리는 사용자 지정 델리게이트를 사용합니다. 이 델리게이트는 선택 사항이지만 나머지 버튼 배경이 정상적으로 렌더링되도록 하는 StyledItem 을 상속합니다.

component OverlayData : QtObject {
    property color overlayColor
}

toolButton {
    background.delegate: StyledItem {
        id: custom
        Text {
            color: custom.delegateStyle.data.overlayColor
            font.pixelSize: 30
            text: "シ"
        }
    }
    background.data: OverlayData {
        overlayColor: "sandybrown"
    }
    hovered.background.data: OverlayData {
        overlayColor: "magenta"
    }
}

delegate 를참조하세요 .

delegate : Component

Qt Quick 컨트롤에서 DelegateStyle 을 렌더링하는 데 사용되는 델리게이트입니다.

기본값은 null 이며, 이 경우 StyledItem 이 대신 렌더링에 사용됩니다.

델리게이트는 다음과 같은 필수 속성을 정의해야 합니다:

required property DelegateStyle delegateStyle
required property QtObject control

delegateStyle 는 델리게이트의 스타일 지정 방법을 설명하는 DelegateStyle 을 가리키고, control 은 델리게이트를 소유한 Qt Quick 컨트롤을 가리킵니다. 후자는 스타일에서 사용할 수 없는 컨트롤에 대한 추가 정보를 확인하는 데 사용할 수 있습니다.

소유 컨트롤의 특정 유형을 알고 있는 경우 control 속성에 QtObject 대신 사용할 수 있습니다. 예를 들어 아래 코드 조각의 핸들 델리게이트는 항상 슬라이더 내부에서 사용되므로 유형을 T.Slider 로 설정할 수 있습니다:

// import QtQuick.Templates as T

slider {
    handle.delegate: Rectangle {
        id: handle
        required property DelegateStyle delegateStyle
        required property T.Slider control
        implicitWidth: delegateStyle.implicitWidth
        implicitHeight: delegateStyle.implicitHeight
        radius: delegateStyle.radius
        color: delegateStyle.color
        Text {
            anchors.centerIn: parent
            text: handle.control.value.toFixed(0)
        }
    }
}

data 및 StyledItem 을참조하세요 .

gradient : Gradient

이 델리게이트의 그라데이션입니다. 기본값은 null (그라데이션 없음)입니다.

그라데이션이 색상을 대체하는 빠른 Rectangle 과 달리 StyleKit 은 색상 위에 그라데이션을 그립니다. 즉, 반투명 그라데이션을 오버레이(예: 미묘한 음영 효과)로 사용하면서 색상은 아래에 표시할 수 있습니다.

button {
    background.gradient: Gradient {
        GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
        GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
    }
    background.color: "lightsteelblue"
    hovered.background.color: Qt.darker("lightsteelblue", 1.1)
    pressed.background.color: Qt.darker("lightsteelblue", 1.2)
}

color 를참조하세요 .

image : ImageStyle

이 델리게이트 안에 이미지를 배치하기 위한 그룹화된 속성입니다.

ImageStyle 를참조하세요 .

implicitHeight : real

이 델리게이트의 암시적 높이입니다.

implicitWidth : real

이 델리게이트의 암시적 너비입니다. 델리게이트가 컨트롤의 사용 가능한 너비를 채우도록 하려면 Style.Stretch 로 설정합니다.

leftMargin : real

이 델리게이트의 왼쪽 여백입니다. 설정하지 않으면 margins 로 돌아갑니다.

margins, rightMargin, topMargin, bottomMargin도 참조하세요 .

margins : real

이 델리게이트 주변의 균일한 여백입니다. 이를 설정하면 leftMargin, rightMargin, topMargin, bottomMargin 에 대한 기본값이 제공됩니다. 각 면은 개별적으로 재정의할 수 있습니다.

leftMargin, rightMargin, topMargin, bottomMargin도 참조하세요 .

minimumWidth : real

이 델리게이트의 최소 너비입니다. 델리게이트의 크기는 이 값보다 작아지지 않습니다.

opacity : real

이 델리게이트의 불투명도는 0.0 (완전 투명)에서 1.0 (완전 불투명)까지입니다. 기본값은 1.0 입니다.

visible 및 color도 참조하세요 .

radius : real

이 델리게이트의 네 모서리 모두에 적용되는 모서리 반경입니다. 개별 모서리는 topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius 으로 재정의할 수 있습니다.

topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius도 참조하세요 .

rightMargin : real

이 델리게이트의 오른쪽 여백입니다. 설정하지 않으면 margins 로 되돌아갑니다.

margins, leftMargin, topMargin, bottomMargin도 참조하세요 .

rotation : real

이 델리게이트의 회전, 도 단위입니다.

scale : real

이 델리게이트의 스케일 팩터입니다. 기본값은 1.0 입니다.

shadow : ShadowStyle

이 델리게이트 뒤에 그림자 스타일을 지정하기 위한 그룹화된 속성입니다.

ShadowStyle 를참조하세요 .

topLeftRadius : real

왼쪽 상단 모서리 반경입니다. 설정하지 않으면 radius 으로 되돌아갑니다.

radius, topRightRadius, bottomLeftRadius, bottomRightRadius도 참조하세요 .

topMargin : real

이 델리게이트의 상단 여백입니다. 설정하지 않으면 margins 으로 되돌아갑니다.

margins, bottomMargin, leftMargin, rightMargin도 참조하세요 .

topRightRadius : real

오른쪽 상단 모서리 반경입니다. 설정하지 않으면 radius 으로 되돌아갑니다.

radius, topLeftRadius, bottomLeftRadius, bottomRightRadius도 참조하세요 .

visible : bool

이 델리게이트가 표시되는지 여부입니다. 기본값은 true 입니다.

opacity도 참조하십시오 .