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

Style QML Type

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

Import Statement: import Qt.labs.StyleKit
Inherits:

AbstractStyle

속성

상세 설명

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

보다 완전한 예제는 StyleKit 예제를 참조하세요.

참고: Qt.labs 모듈의 유형은 향후 버전에서 호환성을 보장하지 않습니다.

Theme, CustomTheme, StyleVariation, ControlStyle, DelegateStyle, CustomControl, 및 속성 해상도를참조하세요 .

속성 문서

Stretch : int [read-only]

델리게이트의 implicitWidth 또는 implicitHeight 에 할당되면 델리게이트가 해당 축을 따라 사용 가능한 공간을 채우도록 하는 센티널 값입니다. 사용 가능한 공간은 margins 및 padding 과 같은 레이아웃 속성에 의해 제한됩니다.

예를 들어 슬라이더 홈이 사용 가능한 너비를 채우도록 만들 수 있습니다:

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

DelegateStyle::implicitWidth 및 DelegateStyle::implicitHeight 을참조하세요 .

customThemeNames : list<string> [read-only]

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

themeNames, themeName, CustomTheme도 참조하세요 .

dark : Component

어두운 테마 컴포넌트입니다. 시스템이 다크 모드이고 themeName 가 "System" 이거나 themeName 가 "Dark" 로 명시적으로 설정되어 있을 때 인스턴스화되어 적용됩니다.

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

light, themeName 및 테마를참조하세요 .

fallbackStyle : Style

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

기본적으로 폴백 스타일은 기본 스타일과 유사한 기본 모양을 제공하는 내부 스타일로 설정됩니다.

이를 사용자 정의 스타일로 설정하거나 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]

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

스타일 속성을 확인할 때 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.themeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

지원되는 값

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

themeNames 및 theme도 참조하세요 .

themeNames : list<string> [read-only]

"System", "Light", "Dark", 등 사용 가능한 모든 테마의 이름입니다. custom themes.

themeName 및 customThemeNames도 참조하세요 .

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