Back to Qt.io
Contact Us Blog Download Qt
이 페이지에서

Style QML Type

스타일 정의의 루트 유형입니다. 더 보기...

Import Statement: import Qt.labs.StyleKit
Inherits:

AbstractStyle

Status: Technology preview

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

속성

상세 설명

Style 는 StyleKit에서 Qt Quick Controls. 스타일을 사용하면 every control type — backgrounds, indicators, handles, text, padding 등 — 의 외관을 사용자 정의할 수 있을 뿐만 아니라, hovered, pressed, disabled 과 같은 상태에 대한 컨트롤의 반응 방식도 조정할 수 있으며, 여기에는 상태 간에 적용되는 애니메이션 효과( transitions )도 포함됩니다.

스타일은 themes 를 통해 light 및 dark 색상 구성표를 지원하며, custom themes 도 원하는 만큼 추가할 수 있습니다. Style variations 를 사용하면 특정 컨트롤 인스턴스나 전체 컨트롤 유형에 적용할 수 있는 대체 스타일을 정의할 수 있습니다. 또한 custom controls 를 정의하여 내장된 컨트롤 세트 이상의 범위로 스타일을 확장할 수도 있습니다.

다음 예제는 모든 테마에서 공통으로 사용하는 몇 가지 구조적 속성을 정의하고, 색상에 대해서는 밝은 테마와 어두운 테마를 별도로 구분한 최소한의 스타일 예시입니다:

// 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)
        }
    }
}

보다 자세한 예제는 StyleKit Quick Controls 예제를 참조하십시오.

참고: Qt.labs 모듈의 타입은 향후 버전에서 호환성이 보장되지 않습니다.

관련 항목: Theme, CustomTheme, StyleVariation, ControlStyle, DelegateStyle, CustomControl 및 StyleKit 속성 해결.

속성 문서

availableThemeNames : list<string> [read-only]

"System", "Light", "Dark" 등을 포함하여 사용 가능한 모든 테마의 이름과 그 외의 custom themes.

themeName 및 customThemeNames도 참조하십시오 .

customThemeNames : list<string> [read-only]

해당 스타일에서 정의된 모든 custom themes 의 이름입니다. 여기에는 built-in themes.

availableThemeNames, themeName 및 CustomTheme항목도 참조하십시오 .

dark : Component

다크 테마 컴포넌트입니다. 시스템이 다크 모드이고 ` themeName `가 ` "System"`인 경우, 또는 ` themeName `가 명시적으로 ` "Dark"`로 설정된 경우에 인스턴스화되어 적용됩니다.

dark: Theme {
    control.background.color: "#404040"
    button.hovered.background.color: "#6ab0f9"
}

light 및 themeName항목도 참조하십시오 .

fallbackStyle : Style

이 스타일에서 명시적으로 설정되지 않은 속성을 해결하는 데 사용되는 대체 스타일입니다. 스타일이나 활성 테마에서 속성을 찾을 수 없는 경우, StyleKit은 대체 스타일에서 해당 속성을 조회합니다.

기본적으로 폴백 스타일은 'Basic' 스타일과 유사한 기본 외관을 제공하는 내부 스타일로 설정되어 있습니다.

이 값을 사용자 정의 스타일로 설정하거나, ` null `로 설정하여 폴백 해결을 완전히 비활성화할 수 있습니다. ` null `로 설정하면 완전히 빈 상태에서 시작하게 되므로, 그렇지 않은 경우보다 훨씬 더 많은 속성을 직접 설정해야 한다는 점에 유의하십시오. 폴백 스타일의 참조 구현은 여기에서 확인할 수 있습니다 .

light : Component

밝은 테마 컴포넌트입니다. 이 컴포넌트는 시스템이 밝은 모드일 때 ` themeName `가 ` "System"`인 경우, 또는 ` themeName `가 명시적으로 ` "Light"`로 설정된 경우에 인스턴스화되어 적용됩니다.

light: Theme {
    control.background.color: "#f0f0f0"
    button.hovered.background.color: "#4a90d9"
}

dark 및 themeName항목도 참조하십시오 .

palette : palette [read-only]

스타일이 적용되는 컨트롤의 팔레트입니다.

이 팔레트를 사용하여 스타일의 색상을 스타일링 대상 컨트롤의 palette 에 바인딩할 수 있습니다. 애플리케이션이 컨트롤에 다른 팔레트를 할당하면 스타일이 이에 맞춰 조정되고 컨트롤이 다시 그려집니다.

button.background.color: palette.accent
button.text.color: palette.buttonText

StyleReader::palette항목도 참조하십시오 .

theme : Theme [read-only]

현재 활성화된 테마 인스턴스입니다. 이 인스턴스는 themeName 설정에 따라 light theme component, dark theme component 또는 custom themes 중 하나에서 생성됩니다.

스타일 속성을 해결하는 과정에서 StyleKit은 먼저 이 테마(StyleVariations 제외)에서 해당 속성을 찾습니다. 속성을 찾을 수 없는 경우, Style 에서 해당 속성을 검색합니다.

themeName, light 및 dark도 참조하십시오 .

themeName : string

현재 활성화된 테마의 이름입니다. 기본값은 "System" 이며, QStyleHints::colorScheme 에서 보고된 색상 구성에 따라 light 또는 dark 중에서 자동으로 선택됩니다.

이 속성을 설정하여 이 스타일의 현재 테마를 변경할 수 있습니다.

// Main.qml

StyleKit.style: YourStyleKitStyle {
    // Set a theme different from "System" at start-up
    themeName: "Dark"
}

ComboBox {
    // Let the user select a different theme at run-time
    model: StyleKit.style.availableThemeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

지원되는 값:

참고: 테마는 정의된 Style 내에서만 적용되며, 해당 스타일의 현재 테마로만 설정할 수 있습니다. 현재 테마가 적용되려면, 해당 스타일이 속한 스타일이 애플리케이션의 current style 와 일치해야 합니다.

availableThemeNames 및 theme항목도 참조하십시오 .

© 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.