Qt Quick Controls - 플랫 스타일

'플랫 스타일'은 사용자 정의 컨트롤을 Qt Quick Designer에 통합하는 방법을 보여줍니다. 이 예제에서는 순수 QML 모듈을 사용하여 싱글톤 내에서 상수를 정의합니다. UI의 선언적 부분에는 .ui.qml 파일이 사용됩니다. 이러한 파일은 Qt Quick Designer에서 시각적으로 편집할 수 있습니다.

테마 설정을 위한 QML 모듈

이 예제에는 Theme 라는 QML 모듈이 포함되어 있으며, 이는 동일한 이름의 QML 싱글톤으로 구성됩니다. QML에서 모듈을 올바르게 찾을 수 있도록, main.cpp 파일의 엔진 임포트 경로에 해당 모듈을 추가합니다.

...
engine.addImportPath(":/imports");
...

코드 모델과 Qt Quick Designer가 모듈을 찾을 수 있도록 flatstyle.pro 파일에 다음 줄을 추가합니다.

QML_IMPORT_PATH = $$PWD/imports

이 예제에서 사용되는 모든 색상, 글꼴 매개변수 및 크기 상수는 Theme.qml이라는 싱글톤의 속성으로 정의됩니다. 일반적으로 이러한 속성 값은 실행 시 변경되지 않도록 상수로 정의됩니다. 이 예제에서는 애플리케이션이 실행되는 동안 사용자가 기본 색상, 크기 매개변수 및 일부 글꼴 매개변수와 같은 일부 속성을 변경할 수 있도록 합니다.

이러한 속성 값을 싱글톤에 정의하면 유지 관리 및 변경이 용이해집니다. 이 패턴을 사용하면 테마 적용을 쉽게 구현할 수 있습니다.

사용자 정의 컨트롤용 QML 모듈

Flat 모듈에는 사용자 정의 룩앤필을 구현하는 몇 가지 컨트롤에 대한 스타일이 포함되어 있습니다. 이 스타일은 qtquickcontrols2.conf 에서 애플리케이션의 스타일로 설정됩니다.

이 예제에서는 Qt Quick Item의 상태를 사용하여 컨트롤의 다양한 상태를 구현합니다. 이를 통해 Qt Quick Designer에서 사용자 지정 외관을 정의할 수 있고, 컨트롤의 다양한 상태를 쉽게 확인할 수 있다는 장점이 있습니다. Qt Quick Designer에서 스위치의 표시기를 편집하려면 Switch.qml 파일을 열고, 열려 있는 문서 콤보 박스 옆 상단에 있는 콤보 박스를 사용하여 ‘ switchHandle ’라는 표시기의 구현 코드를 입력하면 됩니다.

애플리케이션 자체는 사용자가 사용자 정의 컨트롤의 몇 가지 매개변수를 조정할 수 있게 해주는 간단한 폼입니다. 사용자는 다른 기본 색상을 선택하고, 글꼴을 굵게 또는 밑줄로 설정하며, 스위치를 토글하여 컨트롤의 크기를 늘릴 수 있습니다.

MainForm.ui.qml은 폼에 대한 순수한 선언적 정의일 뿐이며, flatstyle.qml은 폼을 인스턴스화하고 로직을 구현합니다.

예제 실행

다음 경로에서 예제를 실행할 수 있습니다.

• Qt Creator

  Welcome 모드를 열고 Examples 에서 예제를 선택하십시오. 자세한 내용은 Qt Creator: 튜토리얼: 빌드 및 실행을 참조하십시오.

• Qt Extension for Visual Studio Code

  Command Palette 에서 Qt: Open Qt examples 명령을 실행하고 목록에서 예제를 선택합니다. 자세한 내용은 Qt Extension for Visual Studio Code: 튜토리얼: 빌드 및 실행을 참조하십시오.

code.qt.io의 예제 프로젝트