Qt Quick Controls - 연락처 목록

'연락처 목록 예제'는 Qt Quick Designer와 호환되는 방식으로 C++ 백엔드를 통합하는 방법을 보여줍니다. UI의 선언적 부분에는 Qt Quick Designer에서 시각적으로 편집할 수 있는 .ui.qml 파일이 사용됩니다.

C++ 백엔드

이 연락처 목록 애플리케이션을 통해 사용자는 연락처를 추가, 편집 및 삭제할 수 있습니다. 실제 구현은 C++로 이루어지며 QAbstractListModel 로 노출됩니다.

ContactModel C++ 클래스는 네임스페이스 아래에 등록되며, 이후 MainForm.ui.qml에서 가져와 인스턴스화됩니다. C++ 클래스를 QML 유형으로 등록하는 방법에 대한 자세한 내용은 ‘C++에서 QML 유형 정의’를 참조하십시오.

#include <QtQml/qqml.h>
...
qmlRegisterType<ContactModel>("Backend", 1, 0, "ContactModel");
...

디자이너 지원

designer 하위 디렉터리에서, Qt Quick Designer 내의 ContactModel을 대체하는 플러그인을 생성합니다. 이를 위해 contactlist.pro 파일에 다음 줄을 추가합니다.

QML_DESIGNER_IMPORT_PATH = $$PWD/designer

Qt Quick Designer는 ContactModel C++ 클래스를 인스턴스화할 수 없기 때문에, ListModel 를 사용하여 모형을 정의합니다. 이를 통해 해당 모델을 사용하는 ListView 가 Qt Quick Designer에서 제대로 표시되도록 보장합니다.

예제 실행

다음 위치에서 예제를 실행할 수 있습니다.

• 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의 예제 프로젝트