StyleVariation QML Type

특정 컨트롤에 대한 대체 스타일을 정의합니다. 더 보기...

이 유형은 기술 미리보기 단계에 있으며 변경될 수 있습니다.

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

속성

• name : string

연관 속성

• controlType : int
• variations : list<string>

상세 설명

StyleVariation을 사용하면 애플리케이션의 특정 컨트롤(인스턴스 변형)이나 특정 부모 컨트롤 유형의 모든 하위 요소(유형 변형)에 적용할 수 있는 대체 스타일을 정의할 수 있습니다. 예를 들어, 사이드바에 있는 컨트롤에 간결한 외관을 부여하거나, 모든 toolbars 내부의 버튼이 다른 곳의 버튼과 다르게 보이도록 설정할 수 있습니다.

인스턴스 변형

인스턴스 변형은 애플리케이션 내의 임의 항목에 ` variations ` 부착 속성을 설정하여 활성화됩니다. 해당 항목의 자식 또는 하위 요소인 모든 StyleKit 컨트롤은 대체 스타일을 적용받게 됩니다. 변형은 계층 구조의 여러 수준에서 동시에 설정할 수도 있으며, 충돌이 발생할 경우 컨트롤에 가장 가까운 변형이 우선 적용됩니다.

인스턴스 변형은 영향을 미치는 ` Style ` 또는 ` Theme `에서 정의됩니다:

Style {
    StyleVariation {
        name: "mini"
        control {
            padding: 2
            background.height: 15
            indicator.width: 15
            indicator.height: 15
            handle.width: 15
            handle.height: 15
        }
    }

    StyleVariation {
        name: "alert"
        abstractButton.background.color: "red"
    }
}

그리고 애플리케이션에서는 ` variations ` 부착 속성을 사용하여 이 변형이 적용됩니다:

GroupBox {
    title: "Mini controls"
    StyleVariation.variations: ["mini"]

    Row {
        spacing: 10
        Button { text: "Save" }
        CheckBox { text: "Option" }
        // This button also has the "alert" variation, in addition to "mini"
        Button {
            text: "Delete"
            StyleVariation.variations: ["alert"]
        }
    }
}

애플리케이션에서 참조되지만 활성 스타일(또는 테마)에 정의되지 않은 변형 이름은 별다른 알림 없이 무시됩니다. 이러한 변형 이름은 스타일 작성자가 구현할지 아니면 처리하지 않을지 선택할 수 있는 참고 사항으로 작용합니다.

유형 변형

유형 변형은 name 없이도 특정 ControlStyle 의 variations 속성에 할당됩니다. 애플리케이션이 명시적으로 활성화해야 하는 인스턴스 변형과 달리, 유형 변형은 지정된 상위 컨트롤 유형의 자손인 경우 해당 유형의 모든 컨트롤에 자동으로 적용됩니다.

다음 코드 예제는 Frame 내의 모든 Buttons 이 다른 곳의 버튼과 다르게 보이도록 하는 방법을 보여줍니다:

Style {
    frame {
        variations: StyleVariation {
            button {
                text.color: "ghostwhite"
                background.border.width: 0
                background.color: "slategrey"
            }
        }
    }

    groupBox {
        // groupBox falls back to frame. Therefore, if the varations set on a
        // frame is not wanted on a groupBox, just override it and set it back to [].
        variations: []
    }
}

groupBox 는 스타일 계층 구조에서 frame 로 대체되므로, frame 에 설정된 유형 변형은 groupBox 에도 자동으로 상속됩니다. 적용을 중지하려면 하위 유형에 대한 변형을 재설정하십시오.

전파 순서

StyleVariation은 정의된 Style 또는 Theme 에 국한됩니다. 테마는 스타일(Style)에 정의된 StyleVariation 전체를 가릴 수 없으며, 다른 스타일 속성과 마찬가지로 그 안의 개별 속성만 재정의할 수 있습니다.

예를 들어, Style 과 활성 Theme 모두 frame.variations 를 정의한 경우, Frame 에 대해서는 두 유형 변형 배열이 모두 적용됩니다. 개별 속성에 대한 해결 순서는 다음과 같습니다. 테마의 변형 속성이 테마의 직접 속성보다 우선하며, 테마의 직접 속성은 스타일의 변형 속성보다 우선하고, 스타일의 변형 속성은 스타일의 직접 속성보다 우선합니다.

인스턴스 변형에도 동일한 원칙이 적용됩니다. Theme 에 정의된 StyleVariation은 테마의 직접 속성보다 우선합니다. Style 에도 동일한 name 을 가진 StyleVariation이 정의되어 있다면, 위에서 설명한 것과 동일한 적용 순서에 따라 둘 다 적용됩니다.

다음 코드 조각에서, StyleVariation.variations: ["alert"] 를 가진 버튼은 밝은 테마에서는 빨간색으로, 어두운 테마에서는 청록색으로 표시되며, 두 테마 모두에서 4픽셀의 테두리가 적용됩니다. 어두운 테마가 button.background.radius 를 6 로 재정의하기 때문에, 이 속성은 Style의 변형에 설정된 background.radius 보다 우선합니다. 결과적으로, 버튼의 반경은 다크 테마에서는 6 가 되지만, 라이트 테마에서는 0 가 됩니다:

Style {
    button.background.radius: 2
    StyleVariation {
        name: "alert"
        button.background.border.width: 4
        button.background.radius: 0
    }

    light: Theme {
        StyleVariation {
            name: "alert"
            button.background.color: "red"
        }
    }

    dark: Theme {
        button.background.radius: 6
        StyleVariation {
            name: "alert"
            button.background.color: "cyan"
        }
    }
}

관련 항목: Style, Theme, ControlStyle.variations, StyleVariation.variations, {StyleKit Property Resolution}.

속성 문서

name : string

이 변형의 이름입니다.

이 이름은 instance variation 로 사용될 때 이 변형을 식별합니다.

variations 및 Instance Variations항목도 참조하십시오 .

첨부된 속성 문서

StyleVariation.controlType : int [attached]

이 속성은 해당 속성이 적용된 항목의 ‘ control type ’를 식별합니다.

StyleKit은 이 속성을 사용하여 하위 컨트롤의 유형 변형( type variations )을 해결합니다. 부모 항목의 유형 변형( controlType )이 Style 에 정의된 유형 변형( variations )을 가진 컨트롤 유형과 일치하는 경우, 해당 변형이 모든 하위 컨트롤에 적용됩니다.

내장 컨트롤은 이 속성을 자동으로 설정합니다. 사용자 정의 컨트롤은 유형 변형 해결에 참여하기 위해 이 속성을 명시적으로 설정해야 합니다.

ControlStyle.variations 및 StyleReader.controlType도 참조하십시오 .

StyleVariation.variations : list<string> [attached]

이 속성은 Control 및 그 하위 컨트롤에 대해 활성화할 instance variations 목록을 포함합니다.

목록에 있는 여러 변형 중 동일한 속성을 설정하는 변형이 여러 개 있는 경우, 목록에서 가장 먼저 나오는 변형이 우선 적용됩니다.

상위 항목과 하위 컨트롤 모두에 변형이 설정된 경우, 두 세트가 모두 적용되며, 컨트롤 자체의 변형이 상위 항목에서 상속된 변형보다 우선합니다.

GroupBox {
    title: "Mini controls"
    StyleVariation.variations: ["mini"]

    Row {
        spacing: 10
        Button { text: "Save" }
        CheckBox { text: "Option" }
        // This button also has the "alert" variation, in addition to "mini"
        Button {
            text: "Delete"
            StyleVariation.variations: ["alert"]
        }
    }
}

name도 참조하십시오 .