Qt Labs StyleKit

StyleKit은 Qt Quick Controls Qt Quick 템플릿을 기반으로 구축된 선언적 스타일링 시스템입니다. 이를 통해 단일 Style 객체에서 모든 컨트롤에 대한 완전한 시각적 스타일을 정의할 수 있으며, themes, state-based 스타일링 및 transitions 에 대한 지원도 포함됩니다. StyleKit은 기본 템플릿 구현을 자동으로 처리하므로, 사용자는 colors, 치수, borders 및 shadows 와 같은 순수한 시각적 측면에만 집중할 수 있습니다.

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

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

주요 기능

선언적 스타일링 - 구현보다 디자인에 집중할 수 있도록 도와주는 사용하기 쉬운 QML API
계층적 대체 - 모든 속성이 전파됩니다. 한 번만 설정하고, 필요한 곳에서 재정의하면 됩니다
상태 기반 스타일링 - 호버, 누름, 포커스 등 각 상태에 맞는 별도의 외관을 디자인할 수 있습니다.
애니메이션 전환 - 상태 간 부드러운 애니메이션을 정의할 수 있습니다
테마 지원 - 라이트 및 다크 테마는 물론, 원하는 만큼의 사용자 정의 테마를 디자인할 수 있습니다
변형 - 동일한 컨트롤에 대한 여러 가지 변형을 디자인할 수 있습니다
팔레트 및 글꼴 통합 - QML을 사용하여 컨트롤 팔레트와 글꼴을 구성하세요

다음은 스타일의 간단한 예시입니다:

// PlainStyle.qml

import QtQuick
import Qt.labs.StyleKit

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

    button {
        background {
            width: 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.fillWidth: true
        indicator.height: 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

기사 및 가이드

StyleKit 기능 개요 - 사용 가능한 스타일링 기능에 대한 간략한 소개
StyleKit 속성 해결 - StyleKit이 스타일 속성 값을 해결하는 방법
참조 폴백 스타일

예제

StyleKit 퀵 컨트롤 예제 - StyleKit을 사용하여 스타일을 적용하는 방법 Qt Quick Controls 스타일링하는 방법을 보여 줍니다.
StyleKit 위젯 예제 - StyleKit을 사용하여 Qt Widgets 스타일링하는 방법을 보여 줍니다.
StyleKit 사용자 정의 델리게이트 예제 - StyleKit에서 사용자 정의 델리게이트와 셰이더 효과를 사용하는 방법을 보여줍니다.

C++ 클래스

QStyleKitStyle

Qt Labs StyleKit 스타일을 Qt Widgets

QML 유형에 적용합니다

AbstractStyle	Style과 Theme 모두에 공통적인 속성을 가진 추상 기본 유형
BorderStyle	델리게이트의 테두리 스타일을 정의합니다.
ControlStateStyle	주어진 상태에서 컨트롤의 스타일을 설명합니다
ControlStyle	일반 상태의 컨트롤에 대한 스타일을 정의합니다
ControlStyleProperties	컨트롤의 스타일 지정 가능한 속성을 정의합니다
CustomControl	사용자 정의(내장되지 않은) 컨트롤의 스타일을 정의합니다
CustomTheme	이름이 지정된 사용자 정의 테마를 정의합니다
DelegateStyle	컨트롤 내 요소의 시각적 모양을 정의합니다
HandleStyle	Switch, Slider, RangeSlider와 같은 컨트롤의 핸들 스타일을 정의합니다
ImageStyle	델리게이트의 이미지 스타일을 정의합니다
IndicatorStyle	컨트롤의 표시기 스타일을 정의합니다
ShadowStyle	델리게이트의 드롭 섀도우 스타일을 정의합니다
StylableControls	스타일 지정이 가능한 컨트롤 유형을 포함하는 추상 기본 유형
Style	스타일 정의의 루트 유형
StyleAnimation	스타일 속성을 애니메이션 처리하기 위한 편의 타입
StyleKit	현재 스타일을 설정하고 액세스하기 위한 싱글톤
StyleKitDebug	컨트롤에 대해 스타일 속성이 어떻게 해결되는지 추적합니다
StyleReader	특정 컨트롤에 대해 활성 스타일에서 속성을 읽어옵니다
StyleVariation	특정 컨트롤에 대한 대체 스타일을 정의합니다
StyledItem	DelegateStyle을 렌더링합니다
SubIndicatorStyle	서브 인디케이터 델리게이트의 스타일을 정의합니다
TextStyle	컨트롤 레이블의 텍스트 스타일을 정의합니다
Theme	색상 구성에 대한 색상 및 스타일 재정의 정의

라이선스

Qt Labs StyleKit은 The Qt Company에서 제공하는 상용 라이선스에 따라 사용할 수 있습니다. 또한, GNU Lesser General Public License 버전 3 또는 GNU General Public License 버전 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.