머티리얼 스타일

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

첨부된 속성

• 악센트: 색상
• 배경: 색상
• 고도: int
• 전경: 색상
• 기본: 색상
• theme: 열거형
• 둥근 규모: 열거형
• containerStyle : 열거형

첨부 메서드

• color color(미리 정의된 열거형, 열거형 음영)

상세 설명

머티리얼 스타일은 구글 머티리얼 디자인 가이드라인을 기반으로 합니다. 이를 통해 플랫폼과 기기 크기에 관계없이 통일된 경험을 제공할 수 있습니다.

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

사용자 정의

머티리얼 스타일은 여러 가지 사용자 정의 가능한 속성을 지원합니다. 이러한 속성 중 일부는 fonts 과 같은 방식으로 propagate 을 자식에게 전달합니다:

• theme
• primary
• 악센트
• 전경
• 배경

나머지 속성은 자식에게 전파되지 않습니다:

• 고도
• 둥근 스케일
• 컨테이너 스타일

다음 예에서는 창과 세 개의 라디오 버튼이 모두 보라색 강조 색상을 사용하여 어두운 테마로 표시됩니다:

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 에서 지원되는 환경 변수를 참조하세요.

종속성

머티리얼 스타일에 특정한 어트리뷰트에 액세스하려면 머티리얼 스타일을 별도로 임포트해야 합니다. 머티리얼 스타일에 대한 참조와 관계없이 동일한 애플리케이션 코드가 다른 스타일과 함께 실행된다는 점에 유의해야 합니다. 머티리얼별 속성은 애플리케이션이 머티리얼 스타일로 실행될 때만 적용됩니다.

머티리얼 스타일을 항상 로드되는 QML 파일에서 가져오는 경우, 애플리케이션이 어떤 스타일로 실행되는지에 관계없이 애플리케이션을 실행할 수 있으려면 애플리케이션과 함께 머티리얼 스타일을 배포해야 합니다. 파일 선택기를 사용하면 스타일에 대한 하드 종속성을 만들지 않고 스타일별 조정을 적용할 수 있습니다.

사전 정의된 재질 색상

기본 색상과 강조 색상은 color 이지만, 나머지 머티리얼 스타일 팔레트와 잘 어울리도록 디자인된 사전 정의된 색상 중 하나를 사용하는 것이 좋습니다:

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

어두운 테마를 사용하는 경우 기본적으로 사전 정의된 색상의 다른 음영이 사용됩니다:

사전 정의된 음영

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

기본 스타일, 유니버설 스타일참조

변형

머티리얼 스타일은 버튼 및 델리게이트와 같은 컨트롤의 높이가 더 작고 글꼴 크기를 더 작게 사용하는 고밀도 변형도 지원합니다. 마우스와 키보드를 사용하여 보다 정확하고 유연한 사용자 상호 작용이 가능한 데스크톱 플랫폼에서는 고밀도 배리언트를 사용하는 것이 좋습니다.

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

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

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

컨트롤별 참고 사항

텍스트 영역

TextArea 는 Filled 와 Outlined 의 두 가지 컨테이너 스타일을 지원합니다. 윤곽이 있는 TextArea에는 컨트롤 상단에 위치하는 플로팅 플레이스홀더 텍스트가 있습니다. 따라서 플레이스홀더 텍스트가 컨트롤의 범위를 벗어나야 하므로 TextArea 또는 Flickable의 하위 항목이 clip 을 true 로 설정할 때 잘릴 수 있습니다. 이를 방지하기 위해 이러한 경우 topInset 을 적절한 값으로 설정합니다.

머티리얼 가이드라인에 따라 플레이스홀더 텍스트는 짧게 유지해야 하며 여러 줄을 차지하지 않아야 합니다.

텍스트 필드

위에서 TextArea 에 대해 설명한 클리핑과 관련된 동일한 문제가 TextField 에서도 발생할 수 있습니다. 이를 방지하기 위해 TextField 에서 true 로 클립을 설정할 때 topInset 를 적절한 값으로 설정합니다.

머티리얼 가이드라인에 따라 플레이스홀더 텍스트는 짧게 유지해야 하며 여러 줄을 차지하지 않아야 합니다.

첨부된 속성 문서

이 첨부 프로퍼티에는 테마의 강조 색상이 저장됩니다. 이 속성은 모든 창이나 항목에 첨부할 수 있습니다. 이 값은 자식에게 전파됩니다.

기본값은 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
}

이 첨부 프로퍼티는 컨트롤의 높이를 보유합니다. 고도가 높을수록 그림자가 더 깊어집니다. 이 속성은 모든 컨트롤에 첨부할 수 있지만 모든 컨트롤이 고도를 시각화하지는 않습니다. 이 값은 자식에게 전파되지 않습니다.

기본값은 컨트롤별로 다릅니다.

다음 예제에서는 높이가 높은 카드 모양을 만들기 위해 창의 높이를 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 입니다.

이 첨부된 속성은 테마가 밝은지 어두운지를 보유합니다. 이 속성은 모든 창이나 항목에 첨부할 수 있습니다. 이 값은 자식에게 전파됩니다.

사용 가능한 테마:

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

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

Pane {
    Material.theme: Material.Dark

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

이 첨부된 속성은 대상 컨트롤에 사용되는 둥근 모서리의 반경을 보유합니다. 이 속성은 모든 창이나 항목에 첨부할 수 있지만 일부 컨트롤만 지원합니다. 이 값은 자식에게 전파되지 않습니다.

기본값은 컨트롤에 따라 다릅니다.

사용 가능한 스케일:

이 프로퍼티는 Qt 6.5에 추가되었습니다.

참조: 머티리얼 스타일: Shape.

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

기본값은 컨트롤에 따라 다릅니다.

사용 가능한 스타일:

이 프로퍼티는 Qt 6.5에 추가되었습니다.

참고 항목도 참조하십시오: 머티리얼 스타일: 텍스트 필드 컨테이너.

첨부 메서드 문서

이 첨부 메서드는 지정된 미리 정의된 머티리얼 컬러의 유효 컬러 값을 지정된 음영과 결합하여 반환합니다. 생략하면 기본값은 Material.Shade500 입니다.

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

관련 정보

• 스타일링 Qt Quick Controls