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

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

모델에는 데이터와 그 구조가 포함됩니다. 다양한 유형의 모델을 만들기 위한 몇 가지 구성 요소가 있습니다. 보기는 데이터를 목록이나 그리드 또는 경로를 따라 표시하는 컨테이너입니다. 델리게이트는 데이터가 뷰에 표시되는 방식을 지정합니다. 델리게이트는 모델에서 각 데이터를 가져와서 캡슐화합니다. 그런 다음 델리게이트를 통해 데이터에 액세스할 수 있습니다.

데이터를 시각화하기 위해 뷰의 모델 속성은 모델에 바인딩되고 델리게이트 속성은 구성 요소에 바인딩됩니다.

자세한 내용은 Qt Quick 에서 모델 및 보기를 참조하세요.

목록 뷰 및 그리드 뷰

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 필드의 값은 뷰를 스크롤할 때 현재 항목의 위치에 영향을 줍니다. 예를 들어 현재 선택된 항목이 뷰를 스크롤할 때 뷰의 가운데에 있어야 하는 경우 시작 및 끝 값을 가운데 항목의 위쪽 및 아래쪽 좌표로 설정합니다. 현재 항목이 프로그래밍 방식으로 변경되면 현재 항목이 뷰의 가운데에 오도록 뷰가 자동으로 스크롤됩니다. 시작 값은 끝 값보다 작아야 합니다.

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 경로 개체의 경로를 작성합니다. 이 개체는 두 개의 제어점이 있는 지정된 위치에 대한 입방 베지어 곡선입니다. 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	기본 구성 요소 - 뷰	예	모델의 목록 시각화입니다.
	경로 뷰	기본 구성 요소 - 뷰	No	경로를 따라 모델의 내용을 시각화합니다.
	Scroll View	Qt Quick Controls	아니요	사용자 정의 콘텐츠에 대한 스크롤을 제공합니다. Flickable 구성 요소 대신 사용할 수 있습니다.
	Stack View	Qt Quick Controls	아니요	스택 기반 탐색 모델입니다.
	Swipe Delegate	Qt Quick Controls	아니요	왼쪽이나 오른쪽으로 스와이프하여 더 많은 옵션이나 정보를 표시할 수 있는 보기 항목입니다. ListView 와 같은 보기에서 델리게이트로 사용됩니다.
	Swipe View	Qt Quick Controls	예	사용자가 옆으로 스와이프하여 페이지를 탐색할 수 있습니다.