StyleVariation QML Type

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

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

속성

• name : string

첨부 속성

• controlType : int
• variations : list<string>

상세 설명

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

인스턴스 변형

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

인스턴스 변형은 해당 변형이 영향을 미치는 Style 또는 Theme 에 정의되어 있습니다:

Style {
    StyleVariation {
        name: "mini"
        control {
            padding: 2
            background.implicitHeight: 15
            indicator.implicitWidth: 15
            indicator.implicitHeight: 15
            handle.implicitWidth: 15
            handle.implicitHeight: 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 에도 자동으로 상속됩니다. 이를 거부하려면 하위 유형에 대한 변형을 재설정하세요.

전파 순서

스타일변형은 정의된 Style 또는 Theme 에 로컬로 적용됩니다. 테마는 스타일에 정의된 전체 스타일 변형을 섀도잉할 수 없으며 다른 스타일 속성과 마찬가지로 그 안의 개별 속성만 재정의할 수 있습니다.

예를 들어 Style 및 활성 Theme 모두 frame.variations 를 정의하는 경우 두 유형 변형 배열 모두 Frame 에 적용됩니다. 개별 속성의 확인 순서는 테마의 변형 속성이 테마의 직접 속성보다 우선하며, 이는 스타일의 변형 속성보다 우선하며, 이는 스타일의 직접 속성보다 우선합니다.

인스턴스 변형에도 동일하게 적용됩니다. Theme 에 정의된 스타일바리에이션은 테마의 직접 프로퍼티보다 우선합니다. Style 에도 동일한 name 의 스타일 변형을 정의한 경우 위에서 설명한 것과 동일한 해결 순서에 따라 둘 다 적용됩니다.

다음 코드 조각에서 StyleVariation.variations: ["alert"] 버튼은 밝은 테마에서는 빨간색으로, 어두운 테마에서는 청록색으로 표시되며 둘 다 4픽셀 테두리가 있습니다. 어두운 테마는 button.background.radius 을 6 으로 재정의하므로 해당 속성이 스타일 변형에 설정된 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 을참조하세요 .

속성 문서

name : string

이 변형의 이름입니다.

instance variation 로 사용될 경우 이 변형을 식별하는 이름입니다.

variations 및 Instance Variations도 참조하세요 .

첨부된 속성 문서

StyleVariation.controlType : int

이 속성은 연결된 항목의 control type 을 식별합니다.

StyleKit type variations Style 부모 항목의 controlType 이 variations 에 정의된 컨트롤 유형과 일치하는 경우, 이러한 변형은 모든 하위 컨트롤에 적용됩니다.

기본 제공 컨트롤은 이 속성을 자동으로 설정합니다. 사용자 지정 컨트롤이 유형 변형 확인에 참여하려면 명시적으로 이 속성을 설정해야 합니다.

ControlStyle.variations 및 StyleReader.controlType 을참조하세요 .

StyleVariation.variations : list<string>

이 속성은 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 를참조하세요 .