Qt Labs 스타일킷

StyleKit 는 선언적 스타일링 시스템으로 Qt Quick Controls Qt Quick 를 위한 선언적 스타일링 시스템입니다. 단일 Style 객체에서 themes, state-based 스타일링 및 transitions 을 지원하는 등 모든 컨트롤에 대한 완전한 시각적 스타일을 정의할 수 있습니다. StyleKit 은 기본 템플릿 구현을 자동으로 처리하므로 colors, dimensions, borders 및 shadows 과 같은 시각적 측면에만 집중할 수 있습니다.

StyleKit 의 핵심 강점은 계층적 속성 시스템으로, abstractButton 과 같은 기본 유형에 속성을 한 번 설정하면 모든 버튼형 컨트롤에 자동으로 적용됩니다. 특정 컨트롤이나 상태에 필요한 경우 이를 재정의할 수 있습니다. 스타일 변경 사항이 모든 컨트롤에 즉시 반영되므로 일관성을 유지하면서 세밀한 사용자 지정이 가능합니다.

StyleKit 에서 제공하는 것 이상의 사용자 지정 동작이 필요한 컨트롤의 경우 사용자 지정 템플릿을 구현하여 StyleKit-스타일의 컨트롤과 원활하게 통합할 수 있습니다.

주요 기능

선언적 스타일링 - 구현보다 디자인에 집중할 수 있도록 해주는 사용하기 쉬운 QML API
계층적 폴백 - 모든 프로퍼티가 전파됩니다. 한 번 설정하고 필요한 경우 재정의
상태 기반 스타일링 - 호버링, 눌림, 포커스 등을 위한 별도의 모양을 디자인합니다.
애니메이션 전환 - 상태 간에 부드러운 애니메이션을 정의합니다.
테마 지원 - 밝은 테마, 어두운 테마 및 사용자 지정 테마를 다양하게 디자인하세요.
변형 - 동일한 컨트롤의 여러 가지 변형 디자인
팔레트 및 글꼴 통합 - QML을 사용하여 컨트롤 팔레트 및 글꼴 구성

다음 예는 스타일의 최소한의 예를 보여줍니다:

// PlainStyle.qml

import QtQuick
import Qt.labs.StyleKit

Style {
    control {
        padding: 6
        background {
            radius: 4
            implicitWidth: 100
            implicitHeight: 36
        }
        indicator {
            implicitWidth: 20
            implicitHeight: 20
            border.width: 1
        }
        handle {
            implicitWidth: 20
            implicitHeight: 20
            radius: 10
        }
    }

    button {
        background {
            implicitWidth: 120
            shadow.opacity: 0.6
            shadow.verticalOffset: 2
            shadow.horizontalOffset: 2
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
                GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
            }
        }
        pressed.background.scale: 0.95
    }

    slider {
        indicator.implicitWidth: Style.Stretch
        indicator.implicitHeight: 6
        indicator.radius: 3
    }

    light: Theme {
        applicationWindow {
            background.color: "whitesmoke"
        }
        control {
            text.color: "black"
            background.color: "#e8e8e8"
            background.border.color: "#c0c0c0"
            hovered.background.color: "#d0d0d0"
        }
        button {
            text.color: "white"
            background.color: "cornflowerblue"
            background.shadow.color: "gray"
            hovered.background.color: "royalblue"
        }
    }

    dark: Theme {
        applicationWindow {
            background.color: Qt.darker("gray", 2.0)
        }
        control {
            text.color: "white"
            background.color: "#3a3a3a"
            background.border.color: "#555555"
            hovered.background.color: "#4a4a4a"
        }
        button {
            background.color: "sandybrown"
            background.shadow.color: "black"
            hovered.background.color: Qt.darker("sandybrown", 1.2)
        }
    }
}

애플리케이션에서 스타일을 설정하는 방법입니다:

// Main.qml

import QtQuick
import Qt.labs.StyleKit

ApplicationWindow {
    id: app
    width: 1024
    height: 800
    visible: true

    // Assign the style to be used
    StyleKit.style: PlainStyle {}

    // Controls are used as normal
    Column {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        Button {
            text: "Button"
        }

        Slider {
            width: 200
        }
    }
}

프로젝트에서 모듈 사용하기

모듈의 QML 유형은 QtQuick.labs.StyleKit 가져오기를 통해 사용할 수 있습니다. 유형을 사용하려면 .qml 파일에 다음 가져오기 문을 추가하세요:

import Qt.labs.StyleKit

문서 및 가이드

예제

스타일킷 예제 - 스타일킷을 사용하여 Qt Quick Controls 스타일을 지정하는 방법을 보여줍니다.

QML 유형

AbstractStylableControls	스타일을 지정할 수 있는 컨트롤 유형을 포함하는 추상 기본 유형
AbstractStyle	스타일과 테마 모두에 공통된 속성을 가진 추상 기본 유형
BorderStyle	델리게이트의 테두리 스타일을 정의합니다.
ControlStateStyle	지정된 상태의 컨트롤 스타일을 설명합니다.
ControlStyle	일반 상태의 컨트롤에 대한 스타일을 정의합니다.
ControlStyleProperties	컨트롤의 스타일 지정 가능 속성을 정의합니다.
CustomControl	사용자 지정 (기본 제공되지 않은) 컨트롤의 스타일을 정의합니다.
CustomTheme	명명된 사용자 지정 테마를 정의합니다.
DelegateStyle	컨트롤 내 요소의 시각적 모양을 정의합니다.
HandleStyle	스위치, 슬라이더 및 범위슬라이더와 같은 컨트롤의 핸들 스타일을 정의합니다.
ImageStyle	델리게이트의 이미지 스타일을 정의합니다.
IndicatorStyle	컨트롤의 표시기 스타일을 정의합니다.
ShadowStyle	델리게이트의 그림자 스타일을 정의합니다.
Style	스타일 정의의 루트 유형
StyleAnimation	상태 전환 중 스타일 속성 변경 애니메이션
StyleKit	현재 스타일 설정 및 액세스를 위한 싱글톤
StyleKitDebug	컨트롤에 대한 스타일 프로퍼티가 확인되는 방식 추적
StyleReader	특정 컨트롤에 대한 활성 스타일에서 속성 읽기
StyleVariation	특정 컨트롤에 대한 대체 스타일 정의
StyledItem	델리게이트 스타일을 렌더링합니다.
SubIndicatorStyle	하위 인디케이터 델리게이트의 스타일을 정의합니다.
TextStyle	컨트롤의 레이블에 대한 텍스트 스타일을 정의합니다.
Theme	색 구성표에 대한 색상 및 스타일 오버라이드를 정의합니다.

라이센스

Qt Labs StyleKit 는 The Qt Company의 상용 라이센스에 따라 사용할 수 있습니다. 또한 GNU 약소 일반 공중 사용 허가서 버전 3 또는 GNU 일반 공중 사용 허가서 버전 2에 따라 사용할 수 있습니다. 자세한 내용은 Qt 라이선스를 참조하십시오.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.