머티리얼 스타일

머티리얼 스타일은 Google 머티리얼 디자인 가이드라인을 기반으로 합니다. 더 보기...

연결된 속성

• accent: color
• background: color
• elevation: int
• 전경색: 색상
• 기본: 색상
• 테마: 열거형
• 둥근 눈금: 열거형
• 컨테이너 스타일: 열거형

연관된 메서드

• color color(열거형 predefined, 열거형 shade)

상세 설명

Material 스타일은 Google Material Design 가이드라인을 기반으로 합니다. 이를 통해 다양한 플랫폼과 기기 크기 전반에 걸쳐 일관된 사용자 경험을 제공할 수 있습니다.

머티리얼 스타일로 애플리케이션을 실행하려면 ‘ Qt Quick Controls 에서 스타일 사용하기’를 참조하십시오.

사용자 지정

머티리얼 스타일은 여러 가지 사용자 정의 가능한 속성을 지원합니다. 이러한 속성 중 일부 propagate 는 fonts 와 동일한 방식으로 자식 요소에 적용됩니다:

• theme
• primary
• accent
• 전경
• 배경

나머지 속성은 자식 요소로 전파되지 않습니다:

• elevation
• roundedScale
• 컨테이너 스타일

다음 예제에서는 창과 세 개의 라디오 버튼 모두 보라색 액센트 색상을 사용하여 다크 테마로 표시됩니다:

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material

ApplicationWindow {
    visible: true

    Material.theme: Material.Dark
    Material.accent: Material.Purple

    Column {
        anchors.centerIn: parent

        RadioButton {
            text: qsTr("Small")
        }
        RadioButton {
            text: qsTr("Medium")
            checked: true
        }
        RadioButton {
            text: qsTr("Large")
        }
    }
}

QML에서 속성을 지정하는 것 외에도, 환경 변수나 구성 파일을 통해 일부 속성을 지정할 수도 있습니다. QML에서 지정된 속성은 다른 모든 방법보다 우선합니다.

구성 파일

구성 파일에 대한 자세한 내용은 Qt Quick Controls 구성 파일을 참조하십시오.

환경 변수

지원되는 환경 변수의 전체 목록은 Qt Quick Controls 의 ‘지원되는 환경 변수’ 섹션을 참조하십시오.

의존성

Material 스타일에 특화된 속성을 사용하려면 Material 스타일을 별도로 임포트해야 합니다. Material 스타일에 대한 참조 여부와 관계없이 동일한 애플리케이션 코드는 다른 어떤 스타일로도 실행된다는 점에 유의해야 합니다. Material 스타일에 특화된 속성은 애플리케이션이 Material 스타일로 실행될 때만 적용됩니다.

항상 로드되는 QML 파일에 Material 스타일이 임포트된 경우, 어떤 스타일로 실행하든 상관없이 애플리케이션을 실행할 수 있도록 하려면 Material 스타일을 애플리케이션과 함께 배포해야 합니다. 파일 선택기를 사용하면 스타일에 대한 고정적인 의존성을 생성하지 않고도 스타일별 조정을 적용할 수 있습니다.

사전 정의된 Material 색상

기본색(primary)과 강조색(accent)은 어떤 색상( color)이든 사용할 수 있지만, 나머지 Material 스타일 팔레트와 잘 어울리도록 설계된 사전 정의된 색상 중 하나를 사용하는 것이 좋습니다:

사용 가능한 사전 정의된 색상:

다크 테마가 활성화되어 있을 때, 기본적으로 미리 정의된 색상의 다양한 음영이 사용됩니다:

사전 정의된 색조

Material.color() 함수에 전달할 수 있는 각 사전 정의된 색상에는 여러 가지 다른 색조가 있습니다:

참조: 기본 스타일, 범용 스타일

변형

Material 스타일은 밀집형 변형도 지원하며, 이 변형에서는 버튼 및 델리게이트와 같은 컨트롤의 높이가 더 작아지고 더 작은 글꼴 크기가 사용됩니다. 마우스와 키보드를 통해 더 정밀하고 유연한 사용자 상호작용이 가능한 데스크톱 플랫폼에서는 밀집형 변형을 사용하는 것이 권장됩니다.

밀집 변형을 사용하려면 QT_QUICK_CONTROLS_MATERIAL_VARIANT 환경 변수를 Dense 로 설정하거나, qtquickcontrols2.conf 파일에서 Variant=Dense 를 지정하십시오. 두 경우 모두 기본값은 Normal 입니다.

다음 이미지는 일반 변형과 밀집 변형을 사용할 때 일부 컨트롤 간의 차이점을 보여줍니다:

단, 위에 표시된 높이는 플랫폼별 글꼴 차이에 따라 달라질 수 있습니다.

컨트롤별 참고 사항

TextArea

TextArea 두 가지 컨테이너 스타일(containerStyles)을 지원합니다: Filled 및 Outlined. Outlined TextArea는 컨트롤 상단에 떠 있는 플레이스홀더 텍스트를 갖습니다. 이 경우 플레이스홀더 텍스트가 컨트롤의 경계를 벗어나게 되므로, TextArea의 부모인 ` TextArea ` 또는 `Flickable`이 ` clip `을 ` true`으로 설정하면 텍스트가 잘릴 수 있습니다. 이를 방지하기 위해 이러한 경우 ` topInset `을 적절한 값으로 설정해야 합니다.

Material 가이드라인에 따라, 자리 표시자 텍스트는 짧게 유지하고 여러 줄에 걸쳐서는 안 됩니다.

TextField

앞서 TextArea 에서 설명한 클리핑 관련 문제는 TextField 에서도 발생할 수 있습니다. 이를 방지하려면, TextField 가 clip을 true 로 설정할 때 topInset 을 적절한 값으로 설정해야 합니다.

Material 가이드라인에 따라, 자리 표시자 텍스트는 짧게 유지하고 여러 줄에 걸쳐서는 안 됩니다.

관련 속성 문서

이 첨부 속성은 테마의 강조색을 저장합니다. 이 속성은 모든 창이나 항목에 첨부할 수 있습니다. 값은 자식 요소로 전파됩니다.

기본값은 Material.Pink 입니다.

다음 예제에서는 강조 표시된 버튼의 강조색이 Material.Orange 로 변경됩니다:

Button {
    text: qsTr("Button")
    highlighted: true
    Material.accent: Material.Orange
}

이 부착 속성은 테마의 배경색을 지정합니다. 이 속성은 모든 창이나 항목에 부착할 수 있으며, 해당 값은 자식 요소로 전달됩니다.

기본값은 테마(밝은 테마 또는 어두운 테마)에 따라 다릅니다.

다음 예제에서는 버튼의 배경색을 Material.Teal 로 변경합니다:

Button {
    text: qsTr("Button")
    highlighted: true
    Material.background: Material.Teal
}

이 첨부 속성은 컨트롤의 높이(elevation)를 나타냅니다. 높이가 높을수록 그림자가 더 깊어집니다. 이 속성은 모든 컨트롤에 첨부할 수 있지만, 모든 컨트롤이 높이를 시각화하는 것은 아닙니다. 이 값은 자식 요소로 전달되지 않습니다.

기본값은 컨트롤마다 다릅니다.

다음 예제에서는 돌출된 카드의 모양을 구현하기 위해 패널의 높이를 ` 6 `로 설정했습니다:

Pane {
    width: 120
    height: 120

    Material.elevation: 6

    Label {
        text: qsTr("I'm a card!")
        anchors.centerIn: parent
    }
}

이 부착 속성은 테마의 전경색을 저장합니다. 이 속성은 모든 창이나 항목에 부착할 수 있습니다. 이 값은 자식 요소로 전파됩니다.

기본값은 테마에 따라 다릅니다(밝은 테마 또는 어두운 테마).

다음 예제에서는 버튼의 전경색이 Material.Pink 로 설정되어 있습니다:

Button {
    text: qsTr("Button")
    Material.foreground: Material.Pink
}

이 부착 속성은 테마의 기본 색상을 저장합니다. 이 속성은 모든 창이나 항목에 부착할 수 있습니다. 값은 자식 요소로 전달됩니다.

기본 색상은 기본적으로 ToolBar 의 배경색으로 사용됩니다.

기본값은 ` Material.Indigo`입니다.

이 첨부 속성은 테마가 밝은(light)지 어두운(dark)지를 나타냅니다. 이 속성은 모든 창이나 항목에 첨부할 수 있습니다. 이 값은 자식 요소로 전파됩니다.

사용 가능한 테마:

테마를 ` System `로 설정하면 시스템 테마 색상에 따라 밝은 테마 또는 어두운 테마 중 하나가 선택됩니다. 그러나 테마 속성의 값을 읽을 때는 해당 값이 ` System`가 아닌 실제 테마로 반환됩니다.

다음 예제에서는 창과 버튼 모두의 테마가 Material.Dark 로 설정되어 있습니다:

Pane {
    Material.theme: Material.Dark

    Button {
        text: qsTr("Button")
    }
}

이 첨부 속성은 대상 컨트롤에 사용되는 둥근 모서리의 반지름을 저장합니다. 이 속성은 모든 창이나 항목에 첨부할 수 있지만, 일부 컨트롤에서만 지원됩니다. 이 값은 자식 요소로 전파되지 않습니다.

기본값은 컨트롤마다 다릅니다.

사용 가능한 반경 값:

이 속성은 Qt 6.5에서 추가되었습니다.

참조: 머티리얼 스타일: 모양.

이 부착 속성은 대상 컨트롤이 사용하는 컨테이너의 스타일을 저장합니다. 이 속성은 모든 창이나 항목에 부착할 수 있지만, 기본적으로 TextField 및 TextArea 에서만 지원됩니다. 이 값은 자식 요소로 전파되지 않습니다.

기본값은 컨트롤마다 다릅니다.

사용 가능한 스타일:

이 속성은 Qt 6.5에서 추가되었습니다.

참조: 머티리얼 스타일: 텍스트 필드 컨테이너.

첨부된 메서드 문서

이 부가 메서드는 지정된 사전 정의된 머티리얼 색상과 주어진 색조(shade)를 결합한 실제 색상 값을 반환합니다. 생략할 경우, shade 인수는 기본적으로 Material.Shade500 로 설정됩니다.

Rectangle {
    color: Material.color(Material.Red)
}

관련 정보

• 스타일 지정 Qt Quick Controls