목록 및 기타 데이터 모델 사용

일반적으로 애플리케이션은 목록이나 그리드 뷰 형태로 구성된 데이터를 처리하고 표시해야 합니다. 이를 위해 모델, 뷰, 델리게이트가 사용됩니다. 이들은 데이터 시각화를 모듈화하여 개발자가 데이터의 다양한 측면을 제어할 수 있도록 합니다. 예를 들어, 데이터에 거의 변경을 가하지 않고도 목록 보기를 그리드 보기로 교체할 수 있습니다. 마찬가지로, 데이터 인스턴스를 델리게이트에 캡슐화하면 개발자가 데이터를 표시하거나 처리하는 방식을 직접 지정할 수 있습니다.

모델은 데이터와 그 구조를 포함합니다. 다양한 유형의 모델을 생성하기 위한 여러 구성 요소가 있습니다. 뷰는 데이터를 목록이나 그리드 형태로, 또는 경로를 따라 표시하는 컨테이너입니다. 델리게이트는 데이터가 뷰에 어떻게 표시되어야 하는지를 결정합니다. 델리게이트는 모델 내의 각 데이터 항목을 가져와 캡슐화합니다. 그러면 해당 데이터는 델리게이트를 통해 접근할 수 있게 됩니다.

데이터를 시각화하려면 뷰의 model 속성을 모델에 바인딩하고, delegate 속성을 컴포넌트에 바인딩합니다.

자세한 내용은 Qt Quick 의 ‘모델과 뷰(Models and Views)’를 참조하십시오.

목록 뷰 및 그리드 뷰

List View 및 Grid View 컴포넌트의 인스턴스를 생성하여 다른 컴포넌트 인스턴스를 목록 또는 그리드 형식으로 구성할 수 있습니다. 이 컴포넌트들은 Components > Default Components > Views 에서 확인할 수 있습니다.

List View 는 다른 컴포넌트를 목록 형태로 구성하는 반면, Grid View 는 그리드 형태로 구성합니다. 기본적으로 목록 및 그리드 보기의 컴포넌트는 왼쪽에서 오른쪽으로 수직 방향으로 배열됩니다. 즉, 가로 방향으로는 왼쪽에서 오른쪽으로, 세로 방향으로는 위에서 아래로 배치됩니다.

Orientation 필드에서 목록 보기의 방향을, Flow 필드에서 격자 보기의 배열 방향을 변경할 수 있습니다. Layout direction 필드에서 레이아웃 방향을 변경할 수 있습니다. 이러한 속성에 값을 설정하여 다양한 레이아웃을 만들 수 있습니다.

목록 보기의 경우, ‘ Spacing ’ 필드에서 목록 항목 간의 간격을 지정할 수 있습니다. 그리드 보기의 경우, ‘ W ’ 및 ‘ H ’ 필드에서 각 셀의 너비와 높이를 지정할 수 있습니다.

' Navigation wraps '을 선택하면, 뷰의 끝까지 도달했을 때 키 탐색이 자동으로 다음 줄이나 뷰 반대쪽 끝의 셀로 이동하도록 지정할 수 있습니다.

목록 뷰와 그리드 뷰는 모두 기본적으로 플릭 동작이 가능합니다.

Snap mode 필드의 값은 드래그 또는 플릭 후 뷰 스크롤이 어떻게 정지할지를 결정합니다. 기본적으로 뷰는 표시 영역 내의 아무 곳에서나 정지합니다. SnapToRow 를 선택하면 뷰는 뷰의 시작 부분과 정렬된 행(또는 그리드 뷰의 상단에서 하단으로 흐르는 경우 열)에서 정지합니다. ' SnapOneRow'를 선택하면, 마우스 버튼을 뗐을 때 뷰는 처음에 보이던 행에서 최대 한 행 또는 한 열 떨어진 위치에 정지합니다. 이 옵션은 한 번에 한 페이지씩 이동할 때 특히 유용합니다.

델리게이트 캐시

Cache 필드의 값은 델리게이트가 뷰의 표시 영역 밖에서도 유지될지 여부를 결정합니다.

이 값이 0보다 크면, 뷰는 지정된 캐시에 들어갈 수 있는 한도 내에서 인스턴스화된 델리게이트를 유지할 수 있습니다. 예를 들어, 세로 방향 뷰에서 델리게이트의 높이가 20픽셀이고, 열이 3개이며, 캐시가 40으로 설정된 경우, 표시 영역 위와 아래에 최대 6개의 델리게이트가 생성되거나 유지될 수 있습니다. 캐시된 델리게이트는 비동기적으로 생성되므로, 여러 프레임에 걸쳐 생성이 이루어지고 프레임 건너뛰기 가능성이 줄어듭니다. 렌더링 성능을 향상시키기 위해, 가시 영역 외부의 델리게이트는 렌더링되지 않습니다.

이 속성의 기본값은 플랫폼에 따라 다르지만, 일반적으로 0보다 큰 값입니다. 음수 값은 무시됩니다.

캐시는 픽셀 버퍼가 아닙니다. 캐시는 인스턴스화된 추가 델리게이트만 관리합니다.

뷰 하이라이트

List View Highlight 및 Grid View Highlight 섹션에서는 뷰 내 항목을 강조 표시하기 위한 속성을 지정할 수 있습니다.

Range 필드의 값을 ApplyRange 또는 StrictlyEnforceRange 로 설정하면 목록 또는 그리드 뷰에서 현재 항목이 강조 표시됩니다. 범위를 적용하도록 선택하면 뷰는 강조 표시가 해당 범위 내에서 유지되도록 시도합니다. 그러나 뷰의 끝부분이나 마우스 상호작용으로 인해 강조 표시가 범위 밖으로 이동할 수 있습니다. 범위 강제 적용을 선택하면 하이라이트가 절대 범위 밖으로 이동하지 않습니다. 키보드나 마우스 조작으로 인해 하이라이트가 범위 밖으로 이동하게 될 경우, 현재 항목이 변경됩니다.

Preferred begin 및 Preferred end 필드의 값은 뷰가 스크롤될 때 현재 항목의 위치에 영향을 미칩니다. 예를 들어, 스크롤 시 현재 선택된 항목이 뷰의 중앙에 머물러야 하는 경우, begin 및 end 값을 중앙 항목이 위치할 상단 및 하단 좌표로 설정하십시오. 프로그래밍 방식으로 현재 항목이 변경되면, 뷰는 현재 항목이 뷰의 중앙에 오도록 자동으로 스크롤됩니다. begin 값은 end 값보다 작아야 합니다.

Follows current 를 선택하면 뷰에서 하이라이트를 관리할 수 있습니다. 하이라이트는 현재 항목을 따라 부드럽게 이동합니다. 그렇지 않은 경우, 뷰에서 하이라이트를 이동시키지 않으며, 모든 이동은 하이라이트 측에서 구현해야 합니다.

Move duration, Move velocity, Resize duration 및 Resize velocity 필드의 값은 하이라이트의 이동 및 크기 조정 애니메이션 속도를 제어합니다.

목록 모델 편집

Grid View, List View 또는 Path View 를 추가하면, ListModel 와 모델의 각 항목에 대한 인스턴스를 생성하는 델리게이트 컴포넌트가 자동으로 추가됩니다. 그리드 및 목록 뷰의 경우, Qt Design Studio 에서 목록 모델을 편집할 수 있습니다.

목록 모델을 편집하려면:

1. Components > Default Components > Views 에서 Grid View 또는 List View 를 Navigator 또는 2D 뷰로 드래그합니다.
2. Navigator 에서 뷰를 마우스 오른쪽 버튼으로 클릭하고, 컨텍스트 메뉴에서 [ Edit List Model ]을 선택하여 목록 모델 편집기를 엽니다.

   

3. 열 머리글과 셀을 두 번 클릭하여 값을 변경합니다.
4. 도구 모음 버튼을 사용하여 행과 열을 추가, 제거 또는 이동할 수 있습니다. 목록에서 각 열은 속성을 나타내고, 각 행은 목록 항목을 추가합니다.

Code 뷰 또는 Edit 모드에서 기본 모델과 델리게이트를 더 복잡한 다른 모델 및 델리게이트로 대체할 수 있습니다. Item Delegate 및 Swipe Delegate 컴포넌트도 Components > Qt Quick Controls에서 사용할 수 있습니다.

경로 보기

Path View 컴포넌트는 데이터 모델에서 제공하는 데이터를 Path 에 배치합니다.

그래픽 스플라인 편집기를 사용하면 경로 뷰 경로를 지정할 수 있는데, 이는 Code 뷰나 Edit 모드에서는 수행하기 쉽지 않은 작업입니다.

경로 편집을 시작하려면 2D 뷰에서 경로 뷰를 두 번 클릭하십시오. 편집기는 PathCubic 경로 객체로 경로를 구성합니다. 이들은 두 개의 제어점을 가진, 지정된 위치까지 이어지는 3차 베지어 곡선입니다. 2D 뷰에서 제어점을 드래그 앤 드롭하여 곡선을 구성하십시오.

또한, PathLine 및 PathQuad 경로 객체도 간접적으로 지원됩니다. 곡선 세그먼트를 직선으로 만들려면 컨텍스트 메뉴에서 Make Curve Segment Straight 을 선택하십시오.

기본적으로 경로는 닫힌 형태이며, 이는 시작점과 끝점이 동일함을 의미합니다. 별도의 시작점과 끝점을 생성하려면 편집 점을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 열고, ‘ Closed Path ’을 해제하십시오.

곡선 세그먼트에 중간 점을 추가하려면 컨텍스트 메뉴에서 ‘ Split Segment ’를 선택하십시오.

' Path View ' 섹션에서는 경로 보기에 대한 다른 속성을 지정할 수 있습니다. ' Drag margin ' 필드의 값은 마우스 드래그를 시작하는 경로로부터의 최대 거리를 지정합니다.

항목을 플릭할 수 있게 하려면 ‘ Interactive ’ 확인란을 선택하십시오. ‘ Flick deceleration ’ 필드의 값은 플릭 시 감속하는 속도를 지정합니다.

' Offset ' 필드에서 항목이 초기 위치로부터 경로를 따라 얼마나 이동했는지 지정합니다. 이 값은 0부터 ' Item count ' 필드의 값(모델에 포함된 항목 수를 표시함)까지의 실수 범위입니다.

' Path View Highlight ' 섹션에서는 경로 객체를 강조 표시하기 위한 속성을 지정할 수 있습니다.

모델 구성 요소 요약

다음 표에는 UI에 데이터 모델을 추가하는 데 사용할 수 있는 구성 요소가 나열되어 있습니다. '위치' 열은 ' Components'에서 해당 구성 요소의 위치를 나타냅니다. 'MCU 지원' 열은 MCU에서 지원되는 구성 요소를 나타냅니다.

아이콘	이름	위치	MCU 지원	용도
	Grid View	기본 구성 요소 - 뷰	아니요	모델을 그리드 형태로 시각화한 것입니다.
	Item Delegate	Qt Quick Controls	아니요	ListView 및 ComboBox 와 같은 다양한 뷰 및 컨트롤에서 델리게이트로 사용할 수 있는 표준 뷰 항목입니다.
	List View	기본 구성 요소 - 뷰	예	모델의 목록 시각화입니다.
	경로 뷰	기본 구성 요소 - 뷰	아니요	경로를 따라 모델의 내용을 시각화합니다.
	Scroll View	Qt Quick Controls	아니요	사용자 정의 콘텐츠에 대한 스크롤 기능을 제공합니다. ‘ Flickable ’ 컴포넌트 대신 사용할 수 있습니다.
	Stack View	Qt Quick Controls	아니요	스택 기반 탐색 모델입니다.
	Swipe Delegate	Qt Quick Controls	아니요	왼쪽이나 오른쪽으로 스와이프하여 더 많은 옵션이나 정보를 표시할 수 있는 뷰 항목입니다. ` ListView`와 같은 뷰에서 델리게이트로 사용됩니다.
	Swipe View	Qt Quick Controls	예	사용자가 옆으로 스와이프하여 페이지를 탐색할 수 있게 합니다.