Qt QML 컴포넌트

앱의 사용자 인터페이스를 디자인할 수 있도록 제공되는 AppStudio QML 컴포넌트 외에도 모든 The Qt Company의 자체 QML 컴포넌트에 접근할 수 있습니다. 이 항목에서는 가장 유용한 컴포넌트에 대해 설명합니다. Qt QML 유형의 전체 목록은 Qt 설명서를 참조하세요.

다음은 가장 많이 사용되는 QML 유형 중 몇 가지입니다.

  • 포지셔너
  • 고정
  • 레이아웃
  • 반복기
  • 상태
  • 연결
주의:

Qt 5.13.1에서 Qt 5.15.2로 마이그레이션하는 중에 AppStudio 앱 및 샘플의 사용자 인터페이스(UI) 요소 디스플레이에서 차이점이 관찰되었습니다. 일부 차이점에는 위치, 크기, 레이아웃, 색상, 자르기, 래핑 및 글꼴이 포함됩니다. 앱의 모든 UI 요소의 디스플레이를 검토합니다. 경우에 따라 컴포넌트의 중첩을 변경해야 할 수 있습니다. 다른 경우, 더 많거나 더 적은 속성을 정의해야 할 수 있습니다. QML에서 UI 요소가 정의되는 방식은 매우 유연하므로 정해진 규칙이 없습니다.

릴리스 5.15.2에서 bool, stringint 등의 Qt 등록정보 유형은 엄격하며 더 이상 null 또는 정의되지 않은 값을 지원하지 않습니다. 앱이 이러한 유형을 사용하는 경우 null 또는 정의되지 않은 값을 어떻게 지원할지 고려해야 합니다. 또는 null 및 정의되지 않은 값뿐 아니라 다른 모든 가능한 값을 허용하는 var 등록정보 유형을 사용할 수 있습니다.

포지셔너

포지셔너는 사용자 인터페이스 내의 항목 위치를 관리하는 컨테이너 항목입니다. 포지셔너 유형에는 행, 열, 그리드, 흐름이 있습니다. 이러한 유형을 기준으로 항목을 구성하면 크기를 조정할 수 있는 사용자 인터페이스에 적합한 일반 레이아웃에서 항목을 정렬할 수 있습니다. 예를 들어 그리드로 항목을 구성하면 세로 방향으로 앱을 볼 때 2x5 항목 매트릭스가 나타날 수 있습니다. 하지만 가로 방향으로 앱을 전환하면 항목 그리드가 화면에 최적화되도록 자동으로 재정렬되어 3x4 항목 매트릭스가 나타납니다.

포지셔너에 대한 자세한 내용은 Qt 설명서를 참조하세요.

고정

각 항목은 고정 지점 7개를 포함하는 것으로 간주할 수 있으며 이러한 고정 지점을 기준으로 다른 항목을 배치할 수 있습니다. 7개 고정 지점은 상단, 하단, 왼쪽, 오른쪽, 수평 중심, 수직 중심, 기준선(항목에 텍스트가 배치되는 선)입니다. 이러한 고정 지점은 항목을 상대적으로 배치하여 동적 사용자 인터페이스를 생성하려는 경우에 적합합니다. 항목의 차원이나 위치가 변경되더라도 고정은 유지됩니다. 고정 여백을 정의하여 항목 고정 바깥쪽에 남겨 두어야 하는 공간의 양을 지정할 수도 있습니다.

고정에 대한 자세한 내용은 Qt 설명서를 참조하세요.

레이아웃

Qt Quick 레이아웃을 사용하려면 QML 파일에서 추가 모듈을 참조해야 합니다. 예를 들면 다음과 같습니다.

import QtQuick.Layouts 1.15

RowLayout, ColumnLayout, GridLayout의 3개 레이아웃을 사용할 수 있습니다. 레이아웃을 사용하면 행, 열, 그리드에 비해 항목 위치를 더욱 세밀하게 제어할 수 있습니다. 레이아웃에서 각 항목의 정렬을 지정하는 기능도 사용할 수 있습니다. GridLayout의 경우 개별 열 및 행 간격을 설정하고, 행과 열에 배치되는 항목의 범위를 지정하고, 항목에 대해 개별 그리드 셀을 지정할 수도 있습니다. 레이아웃을 사용하여 각 항목에 대해 선호하는 최대/최소 너비와 높이를 설정할 수도 있으며 너비와 높이를 채우는 기능도 사용할 수 있습니다. 이러한 기능은 동적 디스플레이 또는 여러 디스플레이를 디자인할 때 특히 유용합니다. 레이아웃을 대칭하여 왼쪽에서 오른쪽 방향 레이아웃을 오른쪽에서 왼쪽 방향 레이아웃으로 변경할 수도 있습니다.

반복기

반복기 객체는 모델의 데이터를 사용하여 포지셔너와 함께 사용할 수 있는 템플릿에서 항목을 생성합니다. 반복기와 포지셔너를 함께 사용하면 많은 항목이 포함된 레이아웃을 효과적으로 생성할 수 있습니다. 모델은 다음 중 하나일 수 있습니다.

  • 반복기를 통해 생성할 대리자 수를 나타내는 숫자
  • 자유 형식 목록 데이터 원본(ListModel)
  • 문자열 목록
  • 객체 목록

위임에서는 반복기가 인스턴스화하는 각 항목을 정의하는 템플릿을 제공합니다. 반복기 대리자는 반복기의 해당 색인과 대리자 관련 모델 데이터에 모두 접근할 수 있습니다.

반복기에 대한 자세한 내용은 Qt 설명서를 참조하세요.

상태

상태를 사용하면 앱의 다른 뷰나 화면을 나타낼 수 있습니다. 속성의 값을 기준으로 요소를 나타내고 숨기거나, 고정을 변경하거나, 상위 객체를 변경하는 데 상태를 사용할 수 있습니다. 상태를 기준으로 하여 애니메이션을 시작/중지/일시 중지하거나 스크립트를 실행할 수 있습니다. 모든 항목 기반 컴포넌트에는 상태 등록정보와 기본 상태가 있습니다. 기본 상태는 빈 문자열("")이며 모든 초기 등록정보 값을 포함합니다. 상태 속성을 빈 문자열로 설정하면 기본 상태를 불러옵니다.

상태에 대한 자세한 내용은 Qt 설명서를 참조하세요.

연결

Qt 5.15에는 연결에 대한 새로운 구문이 있습니다. on<Signal> 처리기를 생성하는 이전 방식은 지원 중단되었으며 이제 함수 구문이 후행되어야 합니다. 다음은 이전 연결 구문을 사용하는 앱을 실행할 때 받는 경고 메시지입니다.

qrc:/qml/main.qml:277:5: QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo (<arguments>) { ... }

다음 예시는 Qt 5.13 이하에서 일반적으로 연결이 어떻게 정의되었는지 보여줍니다.

Connections { 
     target: mouseArea 
     onPositionChanged: { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     onPressedChanged: { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

다음 예시는 Qt 5.15 이상에서 연결이 어떻게 정의되어야 하는지 보여줍니다.

Connections { 
     target: mouseArea 
     function onPositionChanged(mouse) { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     function onPressedChanged() { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

이제 함수 구문이 사용되므로 모든 신호 매개변수가 명시적으로 등록되어 있는지 확인해야 합니다. 하나라도 생략하면 신호 매개변수는 이름을 통해 사용할 수 없으며, 코드에서 정의되지 않은 참조로 이어질 수 있습니다. 예를 들어 onPositionChanged 대신 function onPositionChanged(mouse)을(를) 사용해야 합니다.

신호 매개변수를 등록할 때는 공식 신호 매개변수 이름을 함수 매개변수 이름으로 사용하여 모든 매개변수를 올바른 순서로 등록하는 것을 권장합니다. 예를 들어, function onPositionChanged(m)이(가) 아닌 function onPositionChanged(mouse)을(를) 사용합니다.

등록정보 변경을 위한 신호인 경우, 객체의 이름을 명시적으로 지정해야 등록정보에 접근할 수 있습니다. 예를 들어 pressed이(가) 아닌 mouseArea.pressed을(를) 사용해야 합니다.

연결에 대한 자세한 내용은 Qt 설명서를 참조하세요.