[Qt Guide][3] 커스텀 UI 컴포넌트 만들기 (Creating custom UI components)

[Qt Guide][3]

커스텀 UI 컴포넌트 만들기 (Creating custom UI components)

(추천) Qt QML과 C++로 시작하는 크로스플랫폼 앱 개발 강의 - 입문편

https://inf.run/3XmSH

Qt QML과 C++로 시작하는 크로스플랫폼 앱 개발 - 입문편 강의 - 인프런

 

 

<이전 편 - 자주 사용하는 QML UI 컴포넌트)

https://studiodoc.tistory.com/150

[Qt Guide][2] 자주 사용하는 Qt UI 컴포넌트 설명 (Description of various UI components provided by Qt)

 

 

여느 GUI 프로그래밍이 비슷하듯이.. QML로 개발하다보면 커스텀 UI를 만들어서

반복되는 QML 코드를 줄이고 싶을 것입니다. (덩달아 유지보수성도 개선될 것!)

커스텀 UI 컴포넌트 만들기

1-1. 우선 프로젝트의 Source File 항목에서 Add New를 클릭합니다.

1-2. 팝업이 나타나면 QML 파일을 선택하고 생성합니다.

1-3. 생성을 완료하면 CMakeLists.txt에 QML파일이 추가된 것을 확인할 수 있습니다.

반응형

2-1. 테두리가 둥근 커스텀 Rectangle를 만들어보겠습니다.

생성한 qml파일로 가서 Rectangle을 선언하고 내부 프로퍼티를 아래와 같이 초기화합니다.

2-2. main.qml에 아래와 같이 커스텀 UI를 선언하여 사용할 수 있습니다.

한 번 실행해볼까요?

4개의 꼭지점 부분이 둥글게 라운딩 된 것을 확인할 수 있습니다.

마무리

이러한 방식을 응용하면

커스텀 버튼, 윈도우, 팝업, 컨텍스트 메뉴 등을 다양하게 만들어낼 수 있어요!

위 예시는 간단했지만,

조금 더 디테일하게 작성하려면

공용으로 쓰이는 프로퍼티나 함수, 시그널을 커스텀 UI 안에 넣어두면 됩니다.

(추천) Qt QML과 C++로 시작하는 크로스플랫폼 앱 개발 강의 - 입문편

https://inf.run/3XmSH

Qt QML과 C++로 시작하는 크로스플랫폼 앱 개발 - 입문편 강의 - 인프런