ListView QML Type
모델이 제공하는 항목들을 목록 형태로 표시합니다. 더 보기...
| Import Statement: | import QtQuick |
| Inherits: |
속성
- add : Transition
- addDisplaced : Transition
- cacheBuffer : int
- count : int
- currentIndex : int
- currentItem : Item
- currentSection : string
- delegate : Component
- delegateModelAccess : enumeration
(since 6.10) - displaced : Transition
- displayMarginBeginning : int
(since QtQuick 2.3) - displayMarginEnd : int
(since QtQuick 2.3) - effectiveLayoutDirection : enumeration
- footer : Component
- footerItem : Item
- footerPositioning : enumeration
(since Qt 5.4) - header : Component
- headerItem : Item
- headerPositioning : enumeration
(since Qt 5.4) - highlight : Component
- highlightFollowsCurrentItem : bool
- highlightItem : Item
- highlightMoveDuration : int
- highlightMoveVelocity : real
- highlightRangeMode : enumeration
- highlightResizeDuration : int
- highlightResizeVelocity : real
- keyNavigationEnabled : bool
- keyNavigationWraps : bool
- layoutDirection : enumeration
- model : model
- move : Transition
- moveDisplaced : Transition
- orientation : enumeration
- populate : Transition
- preferredHighlightBegin : real
- preferredHighlightEnd : real
- remove : Transition
- removeDisplaced : Transition
- reuseItems : bool
- section
- section.criteria : enumeration
- section.delegate : Component
- section.labelPositioning : enumeration
- section.property : string
- snapMode : enumeration
- spacing : real
- verticalLayoutDirection : enumeration
연관 속성
- delayRemove : bool
- isCurrentItem : bool
- nextSection : string
- previousSection : string
- section : string
- view : ListView
첨부된 신호
방법
- void decrementCurrentIndex()
- void forceLayout()
- void incrementCurrentIndex()
- int indexAt(real x, real y)
- Item itemAt(real x, real y)
- Item itemAtIndex(int index)
- void positionViewAtBeginning()
- void positionViewAtEnd()
- void positionViewAtIndex(int index, PositionMode mode)
상세 설명
ListView는 ListModel 및 XmlListModel 과 같은 내장 QML 유형이나, QAbstractItemModel 또는 QAbstractListModel 을 상속하는 C++에서 정의된 사용자 정의 모델 클래스로부터 생성된 모델의 데이터를 표시합니다.
ListView에는 표시할 데이터를 정의하는 model 와 데이터의 표시 방식을 정의하는 delegate 가 있습니다. ListView의 항목은 가로 또는 세로로 배열됩니다. ListView는 Flickable 을 상속받기 때문에 본질적으로 플릭(flick)이 가능합니다.
참고: ListView는 뷰를 채우는 데 필요한 만큼만 델리게이트 항목을 로드합니다. 충분한 cacheBuffer 가 설정되지 않은 경우, 뷰 범위를 벗어난 항목은 로드되지 않습니다. 따라서 너비나 높이가 0인 ListView는 델리게이트 항목을 전혀 로드하지 않을 수도 있습니다.
사용 예
다음 예제는 ` ContactModel.qml`라는 파일에 정의된 간단한 목록 모델의 정의를 보여줍니다:
import QtQuick
ListModel {
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}다른 컴포넌트에서는 다음과 같이 ListView에 이 모델 데이터를 표시할 수 있습니다:
import QtQuick
ListView {
width: 180; height: 200
model: ContactModel {}
delegate: Text {
required property string name
required property string number
text: name + ": " + number
}
}
여기서 ListView는 모델용으로 ContactModel 컴포넌트를 생성하고, 델리게이트용으로 Text 항목을 생성합니다. 뷰는 모델의 각 항목에 대해 새로운 Text 컴포넌트를 생성합니다. 델리게이트가 모델의 name 및 number 데이터에 직접 액세스할 수 있다는 점에 유의하십시오.
개선된 목록 뷰는 아래와 같습니다. 델리게이트의 시각적 디자인이 개선되었으며, 별도의 contactDelegate 컴포넌트로 분리되었습니다.
Rectangle {
width: 180; height: 200
Component {
id: contactDelegate
Item {
id: myItem
required property string name
required property string number
width: 180; height: 40
Column {
Text { text: '<b>Name:</b> ' + myItem.name }
Text { text: '<b>Number:</b> ' + myItem.number }
}
}
}
ListView {
anchors.fill: parent
model: ContactModel {}
delegate: contactDelegate
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
focus: true
}
}
현재 선택된 항목은 ` highlight ` 속성을 사용하여 파란색 ` Rectangle `으로 강조 표시되며, ` focus `는 ` true `로 설정되어 목록 보기의 키보드 탐색이 가능해집니다. 목록 보기 자체는 포커스 범위입니다(자세한 내용은 Qt Quick 의 '키보드 포커스' 참조).
델리게이트는 필요에 따라 인스턴스화되며 언제든지 소멸될 수 있습니다. 따라서, state should never be stored in a delegate. 델리게이트는 일반적으로 ListView의 ` contentItem`에 부모로 지정되지만, 뷰에서 표시되는지 여부에 따라 부모가 변경될 수 있으며, 때로는 ` null`가 되기도 합니다. 이 때문에 델리게이트 내부에서 부모의 속성에 바인딩하는 것은 권장되지 않습니다. 델리게이트가 ListView의 너비를 모두 차지하도록 하려면, 대신 다음 방법 중 하나를 사용하는 것을 고려해 보십시오:
ListView {
id: listView
// ...
delegate: Item {
// Incorrect.
width: parent.width
// Correct.
width: listView.width
width: ListView.view.width
// ...
}
}ListView는 델리게이트의 루트 항목에 여러 속성을 부착합니다(예: ListView.isCurrentItem). 다음 예제에서 루트 델리게이트 항목은 이 부착된 속성에 ListView.isCurrentItem 형태로 직접 액세스할 수 있는 반면, 자식 contactInfo 객체는 이 속성을 wrapper.ListView.isCurrentItem 형태로 참조해야 합니다.
ListView {
width: 180; height: 200
Component {
id: contactsDelegate
Rectangle {
id: wrapper
width: 180
height: contactInfo.height
color: ListView.isCurrentItem ? "black" : "red"
Text {
id: contactInfo
text: name + ": " + number
color: wrapper.ListView.isCurrentItem ? "red" : "black"
}
}
}
model: ContactModel {}
delegate: contactsDelegate
focus: true
}참고: 뷰는 클립을 자동으로 활성화하지 않습니다. 뷰가 다른 항목이나 화면에 의해 잘리지 않는 경우, 뷰 외부에 있는 항목이 적절하게 잘리도록 하려면 clip: true를 설정해야 합니다.
ListView 레이아웃
ListView 내 항목의 레이아웃은 다음 속성을 통해 제어할 수 있습니다:
- orientation - 항목이 수평으로 배치될지 수직으로 배치될지를 제어합니다. 이 값은 Qt.Horizontal 또는 Qt.Vertical 중 하나일 수 있습니다.
- layoutDirection - 가로 방향 뷰의 수평 레이아웃 방향을 제어합니다. 즉, 항목이 뷰의 왼쪽에서 오른쪽으로 배치될지, 아니면 그 반대로 배치될지를 결정합니다. 이 값은 Qt.LeftToRight 또는 Qt.RightToLeft 중 하나일 수 있습니다.
- verticalLayoutDirection - 수직 방향 뷰의 수직 레이아웃 방향을 제어합니다. 즉, 항목이 뷰의 상단에서 하단으로 배치될지, 아니면 그 반대로 배치될지를 결정합니다. 이 값은 ListView.TopToBottom 또는 ListView.BottomToTop 중 하나일 수 있습니다.
기본적으로 ListView는 세로 방향으로 설정되어 있으며, 항목은 위에서 아래로 배치됩니다. 아래 표는 위에 나열된 속성의 값에 따라 ListView가 가질 수 있는 다양한 레이아웃을 보여줍니다.
| Qt.Vertical 방향을 갖는ListView | |
|---|---|
| 위에서 아래로
| 아래에서 위로
|
| Qt.Horizontal 방향의ListView | |
| 왼쪽에서 오른쪽으로
| 오른쪽에서 왼쪽으로
|
플릭 방향
기본적으로 세로 방향 ListView는 ` flickableDirection `를 `Flickable.Vertical`로 설정하고, 가로 방향 ListView는 ` Flickable.Horizontal`로 설정합니다. 또한, 세로 방향 ListView는 ` contentHeight`만 계산(추정)하고, 가로 방향 ListView는 ` contentWidth`만 계산합니다. 다른 차원은 -1로 설정됩니다.
Qt 5.9(Qt Quick 2.9)부터는 양방향으로 플릭할 수 있는 ListView를 만들 수 있습니다. 이를 위해서는 ` flickableDirection `을 `Flickable.AutoFlickDirection ` 또는 `Flickable.AutoFlickIfNeeded`로 설정하고, 원하는 ` contentWidth ` 또는 ` contentHeight `를 지정해야 합니다.
ListView {
width: 180; height: 200
contentWidth: 320
flickableDirection: Flickable.AutoFlickDirection
model: ContactModel {}
delegate: Row {
Text { text: '<b>Name:</b> ' + name; width: 160 }
Text { text: '<b>Number:</b> ' + number; width: 160 }
}
}ListView의 중첩 순서
항목의 Z value 는 해당 항목이 다른 항목의 위나 아래에 렌더링될지를 결정합니다. ListView는 생성되는 항목의 유형에 따라 여러 가지 기본 Z 값을 사용합니다:
| 속성 | 기본 Z 값 |
|---|---|
| delegate | 1 |
| footer | 1 |
| header | 1 |
| highlight | 0 |
| section.delegate | 2 |
항목의 Z 값이 ` 0`인 경우 이러한 기본값이 설정되므로, 해당 항목의 Z 값을 ` 0 `로 설정해도 아무런 효과가 없습니다. Z 값의 데이터 유형은 ` real`이므로, ` 0.1`과 같은 소수 값을 설정할 수 있습니다.
항목 재사용
5.15 버전부터 ListView는 새로운 행이 플릭 동작으로 화면에 표시될 때마다 delegate 에서 인스턴스를 생성하는 대신 항목을 재사용하도록 구성할 수 있습니다. 이 방식은 델리게이트의 복잡도에 따라 성능을 향상시킵니다. 항목 재사용 기능은 (이전 버전과의 호환성을 위해) 기본적으로 비활성화되어 있지만, reuseItems 속성을 true 로 설정하여 활성화할 수 있습니다.
항목이 화면 밖으로 밀려나면, 사용되지 않은 항목들의 내부 캐시인 재사용 풀로 이동합니다. 이때, 해당 항목에 이를 알리기 위해 ListView::pooled 신호가 발송됩니다. 마찬가지로, 항목이 풀에서 다시 화면으로 이동할 때도 ListView::reused 신호가 발송됩니다.
항목이 재사용될 때 모델에서 파생된 모든 항목 속성이 업데이트됩니다. 여기에는 ` index ` 및 ` row`은 물론, 모든 모델 역할도 포함됩니다.
참고: ` Avoid storing any state inside a delegate`를 설정하지 마십시오. 설정한 경우, ` ListView::reused ` 신호를 수신할 때 수동으로 재설정해야 합니다.
아이템에 타이머나 애니메이션이 있는 경우, ListView::pooled 신호를 수신할 때 이를 일시 중지하는 것을 고려하십시오. 이렇게 하면 보이지 않는 아이템에 대해 CPU 리소스가 소모되는 것을 방지할 수 있습니다. 마찬가지로, 아이템에 재사용할 수 없는 리소스가 있는 경우 이를 해제할 수 있습니다.
참고: 항목이 풀에 있는동안에도 여전히 활성 상태일 수 있으며, 연결된 신호와 바인딩에 반응할 수 있습니다.
참고: 아이템이 풀에포함되려면 , ` cacheBuffer`로 설정된 추가 여백을 포함하여 뷰의 경계 밖으로 완전히 밀려나야 합니다. 또한 ` currentItem`과 같은 일부 아이템은 절대 풀에 포함되거나 재사용되지 않습니다.
다음 예제는 회전하는 사각형을 애니메이션으로 표현하는 델리게이트를 보여줍니다. 이 델리게이트가 풀에 포함되면 애니메이션이 일시적으로 일시 정지됩니다:
Component {
id: listViewDelegate
Rectangle {
width: 100
height: 50
ListView.onPooled: rotationAnimation.pause()
ListView.onReused: rotationAnimation.resume()
Rectangle {
id: rect
anchors.centerIn: parent
width: 40
height: 5
color: "green"
RotationAnimation {
id: rotationAnimation
target: rect
duration: (Math.random() * 2000) + 200
from: 0
to: 359
running: true
loops: Animation.Infinite
}
}
}
}변동되는 델리게이트 크기와 섹션 레이블
델리게이트 크기가 가변적일 경우, 연결된 ` ScrollBar`의 크기가 조정되거나 건너뛸 수 있습니다. 이는 ListView가 할당된 항목(일반적으로 보이는 항목만 포함되며, 나머지는 비슷한 크기로 간주됨)을 기준으로 콘텐츠 크기를 추정하는데, 델리게이트 크기가 가변적일 경우 정확한 추정이 불가능하기 때문입니다. 이러한 영향을 줄이려면 ` cacheBuffer `를 더 큰 값으로 설정할 수 있습니다. 이렇게 하면 추가 메모리 사용량을 감수하는 대신, 실질적으로 더 많은 항목을 생성하여 할당되지 않은 항목의 크기 추정을 개선할 수 있습니다. ` Sections `도 섹션 내 첫 번째 항목에 섹션 레이블을 연결하고 길이를 늘리기 때문에 동일한 효과를 냅니다.
델리게이트에 상태를 저장하지 마십시오
ListView의 델리게이트는 필요에 따라 인스턴스화되며, 화면 밖으로 나갔을 때 소멸될 수 있습니다. 이를 확인하려면 다음 예제를 실행해 보십시오:
ListView {
anchors.fill: parent
model: 3
delegate: CheckDelegate {
text: qsTr("Channel %1").arg(index + 1)
required property int index
property bool channelActivated
onClicked: channelActivated = checked
}
}항목을 클릭하면 channelActivated 가 true 로 설정됩니다. 그러나 델리게이트는 reused 될 수 있고 소멸될 수 있으므로, 뷰가 충분히 멀리 이동하면 모든 상태가 손실됩니다. 델리게이트가 다시 표시되면 수정되지 않은 기본 상태(또는 항목이 재사용된 경우, 이전 항목의 오래된 상태)로 돌아갑니다.
이를 방지하려면 상태를 모델에 저장해야 합니다:
ListView {
anchors.fill: parent
model: ListModel {
ListElement {
channelActivated: true
}
// ...
}
delegate: CheckDelegate {
text: qsTr("Channel %1").arg(index + 1)
checked: model.channelActivated
required property int index
required property var model
onClicked: model.channelActivated = checked
}
}델리게이트 숨기기
델리게이트의 ` visible ` 속성을 ` false `로 설정하면 해당 항목이 숨겨지지만, 뷰에서 해당 항목이 차지했던 공간은 그대로 유지됩니다. 항목의 ` height `을 ` 0 `으로 설정할 수 있습니다( vertical ListView의 경우):
ListView {
anchors.fill: parent
model: ListModel {
ListElement { hidden: false }
ListElement { hidden: false }
ListElement { hidden: false }
// ...
}
delegate: ItemDelegate {
text: qsTr("Item %1").arg(index)
visible: !model.hidden
height: visible ? implicitHeight : 0
required property int index
required property var model
onClicked: model.hidden = true
}
}' Avoid Storing State in Delegates ' 섹션의 권장 사항에 따라, 숨김 상태는 모델에 저장된다는 점에 유의하십시오.
그러나 spacing 가 0이 아닌 경우, 델리게이트 사이에 고르지 않은 간격이 생길 수 있습니다.
더 나은 방법은 모델을 필터링하여 표시되어서는 안 되는 항목이 뷰에 아예 로드되지 않도록 하는 것입니다. 이는 QSortFilterProxyModel 을 사용하여 달성할 수 있습니다.
또 다른 방법은 델리게이트를 숨기는 대신 disable 를 적용하는 것입니다.
QML 데이터 모델, GridView, PathView 및 Qt Quick 예제 - 뷰도 참조하십시오 .
속성 문서
add : Transition
이 속성은 뷰에 추가되는 항목에 적용할 전환 효과를 지정합니다.
예를 들어, 다음과 같이 해당 전환 효과를 지정하는 뷰가 있습니다:
ListView {
...
add: Transition {
NumberAnimation { properties: "x,y"; from: 100; duration: 1000 }
}
}위 뷰에 항목이 추가될 때마다, 해당 항목은 (100, 100) 위치에서 뷰 내의 최종 x, y 위치로 1초에 걸쳐 애니메이션이 적용됩니다. 이 전환 효과는 뷰에 새로 추가된 항목에만 적용되며, 새 항목이 추가되면서 아래로 밀려난 기존 항목에는 적용되지 않습니다. 밀려난 항목에 애니메이션을 적용하려면 ` displaced ` 또는 ` addDisplaced ` 속성을 설정하십시오.
뷰 전환 사용 방법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.
참고: 이 전환 효과는 뷰가 처음 채워질 때나 뷰의 model 가 변경될 때 생성되는 항목에는 적용되지 않습니다. (이러한 경우에는 대신 populate 전환 효과가 적용됩니다.) 또한, 이 전환 효과는 새 항목의 높이를 애니메이션 처리해서는 안 됩니다. 그렇게 할 경우 새 항목 아래에 있는 항목들이 잘못된 위치에 배치될 수 있습니다. 대신, 높이는 델리게이트의 ` onAdd ` 핸들러 내에서 애니메이션을 적용할 수 있습니다.
addDisplaced, populate 및 ViewTransition도 참조하십시오 .
addDisplaced : Transition
이 속성은 뷰에 다른 항목이 추가됨에 따라 위치를 이동하게 되는 뷰 내의 항목에 적용될 전환 효과를 지정합니다.
예를 들어, 다음과 같이 해당 전환 효과를 지정하는 뷰가 있습니다:
ListView {
...
addDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}위 뷰에 항목이 추가될 때마다, 새로 추가된 항목 아래에 있는 모든 항목이 밀려나면서 뷰 내에서 아래쪽(또는 가로 방향인 경우 옆쪽)으로 이동하게 됩니다. 이러한 위치 이동이 발생하면, 지정된 대로 항목들이 뷰 내의 새로운 x, y 위치로 이동하는 과정이 1초에 걸쳐 ‘ NumberAnimation ’ 애니메이션으로 표현됩니다. 이 전환 효과는 뷰에 새로 추가된 항목에는 적용되지 않습니다. 추가된 항목에 애니메이션을 적용하려면 ‘ add ’ 속성을 설정하십시오.
항목이 여러 유형의 작업에 의해 동시에 변위되는 경우, addDisplaced, moveDisplaced 또는 removeDisplaced 전환 중 어느 것이 적용될지는 정의되어 있지 않습니다. 또한, 항목이 추가(add), 이동(move) 또는 제거(remove) 작업에 의해 변위되는지에 따라 서로 다른 전환을 지정할 필요가 없다면, 대신 displaced 속성을 설정하는 것을 고려해 보십시오.
뷰 전환 사용 방법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.
관련 항목: displaced, add, populate 및 ViewTransition.
cacheBuffer : int
이 속성은 델리게이트가 뷰의 가시 영역 밖에서도 유지될지 여부를 결정합니다.
이 값이 0보다 크면, 뷰는 지정된 버퍼 내에 들어갈 수 있는 한도 내에서 가능한 한 많은 델리게이트 인스턴스를 유지할 수 있습니다. 예를 들어, 세로 방향 뷰에서 델리게이트의 높이가 20픽셀이고 ` cacheBuffer `가 40으로 설정된 경우, 가시 영역 위쪽과 아래쪽에 각각 최대 2개의 델리게이트가 생성되거나 유지될 수 있습니다. 버퍼링된 델리게이트는 비동기적으로 생성되므로, 여러 프레임에 걸쳐 생성이 이루어지고 프레임 건너뛰기 가능성이 줄어듭니다. 렌더링 성능을 향상시키기 위해 가시 영역 외부의 델리게이트는 렌더링되지 않습니다.
이 속성의 기본값은 플랫폼에 따라 다르지만, 일반적으로 0보다 큰 값입니다. 음수 값은 무시됩니다.
cacheBuffer는 픽셀 버퍼가 아니며, 추가로 인스턴스화된 델리게이트만 관리한다는 점에 유의하십시오.
참고: 이 속성을설정하는 것은 효율적인 델리게이트를 생성하는 것을 대체하지 않습니다. 이는 추가적인 메모리 사용량을 대가로 스크롤 동작의 부드러움을 향상시킬 수 있습니다. 델리게이트 내의 객체와 바인딩이 적을수록 뷰를 더 빠르게 스크롤할 수 있습니다. cacheBuffer를 설정하는 것은 로딩 속도가 느린 델리게이트로 인해 발생하는 문제를 일시적으로 미루는 것일 뿐, 이 시나리오에 대한 해결책이 아니라는 점을 인식하는 것이 중요합니다.
cacheBuffer는 displayMarginBeginning 또는 displayMarginEnd 에서 지정된 디스플레이 여백 외부에서 작동합니다.
count : int [read-only]
이 속성은 ListView 모델에 포함된 항목의 수를 반영하며, 해당 항목이 표시되어 있는지 또는 Item 델리게이트 컴포넌트의 인스턴스로 생성되었는지 여부와는 무관합니다.
currentIndex 속성은 현재 항목의 인덱스를, currentItem 속성은 현재 항목을 저장합니다. currentIndex 을 -1로 설정하면 하이라이트가 해제되고 currentItem 이 null로 설정됩니다.
highlightFollowsCurrentItem 가 true 인 경우, 이 두 속성 중 하나를 설정하면 현재 항목이 보이도록 ListView 가 부드럽게 스크롤됩니다.
현재 항목이 뷰에 표시되기 전까지는 그 위치가 대략적인 것일 수 있다는 점에 유의하십시오.
currentItem 는 모든 델리게이트와 함께 작동해야 하므로, 그 유형은 Item 입니다. 하지만 ListView 는 대개 정확히 한 가지 유형의 델리게이트와 함께 사용됩니다. 이 경우, currentItem 를 델리게이트의 유형으로 형변환하면 도구 활용에 도움이 되며 더 효율적인 코드를 작성할 수 있습니다:
component Message : Item {
required property string sender
required property string text
}
ListView {
id: messageView
delegate: Message {}
model: messageModel
}
Button {
text: "Reply to %1".arg((messageView.currentItem) as Message).sender
}currentSection : string [read-only]
이 속성은 현재 뷰의 맨 앞에 위치한 섹션을 저장합니다.
delegate : Component
델리게이트는 뷰에 의해 인스턴스화되는 각 항목을 정의하는 템플릿을 제공합니다. 인덱스는 index 속성으로 노출됩니다. 데이터 모델의 유형에 따라 모델의 속성도 사용할 수 있습니다.
델리게이트 내의 객체 수와 바인딩 수는 뷰의 플릭킹 성능에 직접적인 영향을 미칩니다. 가능하다면, 델리게이트의 정상적인 표시에 필요하지 않은 기능은 필요할 때 추가 컴포넌트를 로드할 수 있는 Loader 에 배치하십시오.
ListView 는 델리게이트 내 루트 항목의 크기를 기준으로 항목의 레이아웃을 구성합니다.
항목의 서브 픽셀 정렬을 방지하기 위해 델리게이트의 크기를 정수로 설정하는 것이 좋습니다.
델리게이트 인스턴스의 기본 stacking order 은 1 입니다.
참고: 델리게이트는 필요에 따라 인스턴스화되며 언제든지 소멸될 수 있습니다. 델리게이트는 뷰 자체가 아닌 ListView 의 contentItem 에 부모로 연결됩니다. 델리게이트에는 절대로 상태를 저장해서는 안 됩니다.
Stacking Order in ListView도 참조하십시오 .
delegateModelAccess : enumeration [since 6.10]
이 속성은 델리게이트가 모델에 접근하는 방식을 결정합니다.
| 상수 | 설명 |
|---|---|
DelegateModel.ReadOnly | 델리게이트가 컨텍스트 속성, ` model ` 객체 또는 필수 속성을 통해 모델에 쓰기 작업을 수행하는 것을 금지합니다. |
DelegateModel.ReadWrite | 델리게이트가 컨텍스트 속성, ` model ` 개체 또는 필수 속성을 통해 모델에 쓰기 작업을 수행할 수 있도록 허용합니다. |
DelegateModel.Qt5ReadWrite | 델리게이트가 model 객체 및 컨텍스트 속성을 통해 모델에 쓰기 작업을 수행할 수 있도록 허용하지만, 필수 속성을 통한 쓰기 작업은 허용하지 않습니다. |
기본값은 DelegateModel.Qt5ReadWrite 입니다.
이 속성은 Qt 6.10에서 도입되었습니다.
Qt Quick 의 모델 및 뷰 #모델 데이터 변경항목도 참조하십시오 .
displaced : Transition
이 속성은 뷰에 영향을 미치는 모델 연산으로 인해 위치가 변경된 항목에 적용될 일반 전환을 포함합니다.
이는 추가(add), 이동(move) 또는 제거(remove) 연산으로 인해 위치가 변경된 모든 항목에 적용될 일반 전환을 지정할 때, 개별적인 ` addDisplaced`, ` moveDisplaced ` 및 ` removeDisplaced ` 속성을 일일이 지정할 필요 없이 편리하게 사용할 수 있도록 해줍니다. 예를 들어, 다음은 위치 변경 전환을 지정하는 뷰입니다:
ListView {
...
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}위 뷰 내에서 항목이 추가, 이동 또는 제거되면 그 아래에 있는 항목들이 밀려나면서 뷰 내에서 아래로(또는 가로 방향인 경우 옆으로) 이동하게 됩니다. 이러한 밀림 현상이 발생함에 따라, 항목들이 뷰 내의 새로운 x, y 위치로 이동하는 과정은 지정된 대로 1초에 걸쳐 NumberAnimation 애니메이션으로 표현됩니다.
뷰가 이 일반적인 'displaced' 전환과 함께 특정 ' addDisplaced', ' moveDisplaced ' 또는 ' removeDisplaced ' 전환을 모두 지정하는 경우, 관련 작업이 발생할 때 더 구체적인 전환이 비활성화되지 않은 한( enabled 를 false로 설정하여), 일반적인 'displaced' 전환 대신 더 구체적인 전환이 사용됩니다. 만약 해당 전환이 비활성화된 경우, 대신 일반적인 'displaced' 전환이 적용됩니다.
뷰 전환 사용 방법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.
addDisplaced, moveDisplaced, removeDisplaced 및 ViewTransition도 참조하십시오 .
이 속성을 사용하면 델리게이트를 뷰의 기하학적 영역 밖으로 표시할 수 있습니다.
이 값이 0이 아닌 경우, 뷰는 뷰의 시작 부분 앞이나 끝 부분 뒤에 추가 델리게이트를 생성합니다. 뷰는 지정된 픽셀 크기에 들어갈 수 있는 한도 내에서 최대한 많은 델리게이트를 생성합니다.
예를 들어, 세로 방향 뷰에서 델리게이트의 높이가 20픽셀이고, ` displayMarginBeginning ` 및 ` displayMarginEnd `가 모두 40으로 설정된 경우, 위쪽과 아래쪽에 각각 2개의 델리게이트가 생성되어 표시됩니다.
기본값은 0입니다.
이 속성은 특정 UI 구성을 허용하기 위한 것이며, 성능 최적화를 위한 것이 아닙니다. 성능상의 이유로 뷰 지오메트리 외부에 델리게이트를 생성하려는 경우, 대신 cacheBuffer 속성을 사용하는 것이 좋습니다.
이 속성들은 QtQuick 2.3에서 도입되었습니다.
effectiveLayoutDirection : enumeration [read-only]
이 속성은 가로 방향 목록의 실제 레이아웃 방향을 지정합니다.
로케일 레이아웃에 첨부 속성 LayoutMirroring::enabled 을 사용할 경우, 가로 목록의 시각적 레이아웃 방향이 반전됩니다. 그러나 속성 layoutDirection 의 값은 변경되지 않습니다.
ListView::layoutDirection 및 LayoutMirroring도 참조하십시오 .
footer : Component
이 속성은 푸터로 사용할 컴포넌트를 지정합니다.
각 뷰마다 푸터 컴포넌트의 인스턴스가 생성됩니다. 푸터는 뷰의 맨 끝, 모든 항목 뒤에 배치됩니다. 푸터의 기본 stacking order 는 1 입니다.
header, footerItem 및 Stacking Order in ListView도 참조하십시오 .
footerItem : Item [read-only]
여기에는 ‘ footer ’ 컴포넌트로 생성된 푸터 항목이 포함됩니다.
각 뷰마다 푸터 컴포넌트의 인스턴스가 생성됩니다. 푸터는 뷰의 맨 끝, 다른 항목들 뒤에 배치됩니다. 푸터의 기본 stacking order 는 1 입니다.
footer, headerItem 및 Stacking Order in ListView도 참조하십시오 .
footerPositioning : enumeration [since Qt 5.4]
이 속성은 footer item 의 위치를 결정합니다.
| 상수 | 설명 |
|---|---|
ListView.InlineFooter | (기본값) 푸터는 콘텐츠의 맨 끝에 위치하며, 일반 항목과 마찬가지로 콘텐츠와 함께 이동합니다. |
ListView.OverlayFooter | 푸터는 뷰의 맨 끝에 위치합니다. |
ListView.PullBackFooter | 푸터는 뷰의 끝 부분에 위치합니다. 콘텐츠를 뒤로 이동하면 푸터가 밀려나가고, 콘텐츠를 앞으로 이동하면 푸터가 다시 돌아옵니다. 참고: 이 속성은 푸터의 Z 축( stacking order )에는 영향을 미치지 않습니다. 예를 들어, ` 참고: |
이 속성은 Qt 5.4에서 도입되었습니다.
header : Component
이 속성은 헤더로 사용할 컴포넌트를 지정합니다.
각 뷰마다 헤더 컴포넌트의 인스턴스가 생성됩니다. 헤더는 뷰의 맨 앞, 즉 어떤 항목보다 앞에 배치됩니다. 헤더의 기본 stacking order 는 1 입니다.
footer, headerItem 및 Stacking Order in ListView도 참조하십시오 .
headerItem : Item [read-only]
이 컴포넌트는 header 컴포넌트로 생성된 헤더 항목을 포함합니다.
각 뷰마다 헤더 컴포넌트의 인스턴스가 생성됩니다. 헤더는 뷰의 맨 앞, 다른 항목들보다 앞에 배치됩니다. 헤더의 기본 stacking order 는 1 입니다.
header, footerItem 및 Stacking Order in ListView도 참조하십시오 .
headerPositioning : enumeration [since Qt 5.4]
이 속성은 header item 의 위치를 결정합니다.
| 상수 | 설명 |
|---|---|
ListView.InlineHeader | (기본값) 헤더는 콘텐츠의 맨 앞에 배치되며, 일반 항목과 마찬가지로 콘텐츠와 함께 이동합니다. |
ListView.OverlayHeader | 헤더는 뷰의 맨 앞에 배치됩니다. |
ListView.PullBackHeader | 헤더는 뷰의 시작 부분에 위치합니다. 콘텐츠를 앞으로 이동하면 헤더가 밀려나가고, 콘텐츠를 뒤로 이동하면 헤더가 다시 제자리로 돌아옵니다. 참고: 이 속성은 헤더의 Z-순서( stacking order )에는 영향을 미치지 않습니다. 예를 들어, ` 참고: ` |
이 속성은 Qt 5.4에서 도입되었습니다.
highlight : Component
이 속성은 하이라이트로 사용할 컴포넌트를 저장합니다.
각 목록에 대해 하이라이트 컴포넌트의 인스턴스가 생성됩니다. 생성된 컴포넌트 인스턴스의 기하학적 구조는 ` highlightFollowsCurrentItem ` 속성이 false가 아닌 한, 현재 항목에 따라 이동하도록 목록에서 관리됩니다. 하이라이트 항목의 기본 ` stacking order `은 ` 0`입니다.
highlightItem, highlightFollowsCurrentItem, ListView 하이라이트 예제 및 Stacking Order in ListView도 참조하십시오 .
highlightFollowsCurrentItem : bool
이 속성은 하이라이트가 뷰에 의해 관리되는지 여부를 나타냅니다.
이 속성이 true(기본값)인 경우, 하이라이트는 현재 항목을 따라 부드럽게 이동합니다. 그렇지 않은 경우, 뷰에서 하이라이트를 이동시키지 않으며, 모든 이동은 하이라이트 측에서 구현해야 합니다.
다음은 ` SpringAnimation ` 항목에 의해 동작이 정의된 하이라이트의 예입니다:
Component {
id: highlight
Rectangle {
width: 180; height: 40
color: "lightsteelblue"; radius: 5
y: list.currentItem.y
Behavior on y {
SpringAnimation {
spring: 3
damping: 0.2
}
}
}
}
ListView {
id: list
width: 180; height: 200
model: ContactModel {}
delegate: Text { text: name }
highlight: highlight
highlightFollowsCurrentItem: false
focus: true
}하이라이트 애니메이션은 뷰가 스크롤되는 방식에도 영향을 미친다는 점에 유의하십시오. 이는 뷰가 하이라이트를 선호하는 하이라이트 범위(또는 보이는 뷰포트) 내에 유지하기 위해 이동하기 때문입니다.
highlight 및 highlightMoveVelocity도 참조하십시오 .
highlightItem : Item [read-only]
여기에는 ‘ highlight ’ 컴포넌트에서 생성된 하이라이트 항목이 저장됩니다.
highlightFollowsCurrentItem 가 false로 설정되지 않은 한, highlightItem 는 뷰에서 관리됩니다. 하이라이트 항목의 기본 stacking order 는 0 입니다.
highlight, highlightFollowsCurrentItem 및 Stacking Order in ListView항목도 참조하십시오 .
highlightMoveDuration : int
highlightMoveVelocity : real
highlightResizeDuration : int
highlightResizeVelocity : real
이 속성들은 하이라이트 델리게이트의 이동 및 크기 조정 애니메이션 속도를 제어합니다.
highlightFollowsCurrentItem 이 속성들이 적용되려면 값이 true여야 합니다.
속도 속성의 기본값은 400 픽셀/초입니다. 지속 시간 속성의 기본값은 -1이며, 즉 하이라이트는 설정된 속도로 이동하는 데 필요한 만큼의 시간을 소요합니다.
이 속성들은 SmoothedAnimation 와 동일한 특성을 가집니다. 즉, velocity와 duration이 모두 설정된 경우, 애니메이션은 두 값 중 더 짧은 지속 시간을 제공하는 값을 사용합니다.
이동 속도와 지속 시간 속성은 인덱스 변경으로 인한 이동을 제어하는 데 사용됩니다. 예를 들어, ` incrementCurrentIndex()`가 호출될 때와 같은 경우입니다. 사용자가 ` ListView`를 튕길 때는 튕김 동작에서 발생한 속도가 대신 이동을 제어하는 데 사용됩니다.
한 가지 속성만 설정하려면 다른 속성을 ` -1`로 설정하면 됩니다. 예를 들어, 속도는 변경하지 않고 지속 시간만 애니메이션으로 표현하려면 다음 코드를 사용하십시오:
highlightMoveDuration: 1000
highlightMoveVelocity: -1highlightFollowsCurrentItem도 참조하십시오 .
이 속성들은 뷰 내에서 (현재 항목에 대한) 하이라이트의 우선 순위 범위를 정의합니다. ‘ preferredHighlightBegin ’ 값은 ‘ preferredHighlightEnd ’ 값보다 작아야 합니다.
이 속성들은 목록이 스크롤될 때 현재 항목의 위치에 영향을 미칩니다. 예를 들어, 뷰가 스크롤될 때 현재 선택된 항목이 목록의 중앙에 위치하도록 하려면, preferredHighlightBegin 및 preferredHighlightEnd 값을 중앙 항목이 위치할 상단 및 하단 좌표로 설정하십시오. currentItem 가 프로그래밍 방식으로 변경되면, 현재 항목이 뷰의 중앙에 오도록 목록이 자동으로 스크롤됩니다. 또한, 현재 항목 인덱스의 동작은 하이라이트가 있는지 여부와 관계없이 발생합니다.
highlightRangeMode 에 사용할 수 있는 유효한 값은 다음과 같습니다:
| 상수 | 설명 |
|---|---|
ListView.ApplyRange | 뷰는 하이라이트를 지정된 범위 내에 유지하려고 시도합니다. 그러나 목록의 끝 부분이나 마우스 상호작용으로 인해 하이라이트가 범위 밖으로 이동할 수 있습니다. |
ListView.StrictlyEnforceRange | 하이라이트는 절대 범위 밖으로 이동하지 않습니다. 키보드 또는 마우스 동작으로 인해 하이라이트가 범위 밖으로 이동하게 될 경우, 현재 항목이 변경됩니다. |
ListView.NoHighlightRange | 이것이 기본값입니다. |
keyNavigationEnabled : bool
이 속성은 목록의 키보드 탐색 기능이 활성화되어 있는지 여부를 나타냅니다.
이 속성의 값이 ` true`인 경우, 사용자는 키보드를 사용하여 뷰를 탐색할 수 있습니다. 이 속성은 마우스 및 키보드 상호작용을 선택적으로 활성화하거나 비활성화해야 하는 애플리케이션에 유용합니다.
기본적으로 이 속성의 값은 기존 애플리케이션과의 동작 호환성을 보장하기 위해 ` interactive `에 바인딩되어 있습니다. 명시적으로 설정할 경우, 더 이상 `interactive` 속성에 바인딩되지 않게 됩니다.
interactive도 참조하십시오 .
keyNavigationWraps : bool
이 속성은 목록에서 키 기반 탐색 시 줄 바꿈이 발생하는지 여부를 나타냅니다.
이 속성이 true인 경우, 현재 선택된 항목을 목록의 끝을 넘어 이동시킬 키 탐색 명령은 대신 목록의 맨 앞으로 돌아가 선택 항목을 이동시키며, 그 반대의 경우도 마찬가지입니다.
기본적으로 키 탐색은 감싸지지 않습니다.
layoutDirection : enumeration
이 속성은 가로 방향 목록의 레이아웃 방향을 지정합니다.
사용 가능한 값:
| 상수 | 설명 |
|---|---|
Qt.LeftToRight | (기본값) 항목이 왼쪽에서 오른쪽으로 배치됩니다. |
Qt.RightToLeft | 항목이 오른쪽에서 왼쪽으로 배열됩니다. |
orientation 가 Qt.Vertical인 경우 이 속성을 설정해도 효과가 없습니다.
ListView::effectiveLayoutDirection 및 ListView::verticalLayoutDirection도 참조하십시오 .
model : model
이 속성은 목록에 데이터를 제공하는 모델을 포함합니다.
이 모델은 뷰의 항목을 생성하는 데 사용되는 데이터 집합을 제공합니다. 모델은 QML에서 ` ListModel`, ` ObjectModel`을 사용하여 직접 생성하거나, C++ 모델 클래스를 통해 제공할 수 있습니다. C++ 모델 클래스를 사용하는 경우, 해당 클래스는 ` QAbstractItemModel `의 서브클래스이거나 단순 목록이어야 합니다.
‘데이터 모델’항목도 참조하십시오 .
move : Transition
이 속성은 뷰의 ‘ model ’에서 이동 작업으로 인해 이동 중인 뷰 내 항목에 적용될 전환 효과를 지정합니다.
예를 들어, 다음과 같이 해당 전환을 지정하는 뷰가 있습니다:
ListView {
...
move: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}model 이 특정 인덱스 집합을 이동하기 위한 이동 작업을 수행할 때마다, 뷰 내의 해당 항목들은 1초에 걸쳐 뷰 내의 새로운 위치로 애니메이션 처리됩니다. 이 전환 효과는 모델 내 이동 작업의 대상이 되는 항목에만 적용되며, 이동 작업으로 인해 밀려난 그 아래의 항목에는 적용되지 않습니다. 밀려난 항목에 애니메이션을 적용하려면 ` displaced ` 또는 ` moveDisplaced ` 속성을 설정하십시오.
뷰 전환 사용 방법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.
또한 moveDisplaced 및 ViewTransition 을참조하십시오 .
moveDisplaced : Transition
이 속성은 뷰의 ‘ model ’에서 이동 작업으로 인해 위치가 변경된 항목에 적용될 전환을 저장합니다.
예를 들어, 다음과 같이 이러한 전환을 지정하는 뷰가 있습니다:
ListView {
...
moveDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}model 가 특정 인덱스 집합을 이동시키기 위해 이동 작업을 수행할 때마다, 이동 작업의 시작 인덱스와 종료 인덱스 사이에 있는 항목들이 밀려나며, 이로 인해 뷰 내에서 위나 아래로(수평 방향인 경우 좌우로) 이동하게 됩니다. 이러한 변위가 발생하면, 항목들이 뷰 내의 새로운 x, y 좌표로 이동하는 과정이 지정된 대로 1초에 걸쳐 ‘ NumberAnimation ’ 애니메이션으로 표현됩니다. 이 전환 효과는 이동 작업의 실제 대상인 항목에는 적용되지 않습니다. 이동된 항목에 애니메이션을 적용하려면 move 속성을 설정하십시오.
항목이 여러 유형의 작업에 의해 동시에 이동되는 경우, ‘ addDisplaced ’, ‘moveDisplaced’ 또는 ‘ removeDisplaced ’ 전환 중 어느 것이 적용될지는 정의되어 있지 않습니다. 또한, 항목이 ‘add’, ‘move’ 또는 ‘remove’ 작업에 의해 이동되는지에 따라 서로 다른 전환을 지정할 필요가 없다면, 대신 ‘ displaced ’ 속성을 설정하는 것을 고려해 보십시오.
뷰 전환 사용 방법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.
또한 displaced, move 및 ViewTransition 을참조하십시오 .
orientation : enumeration
이 속성은 목록의 방향을 지정합니다.
사용 가능한 값:
| 상수 | 설명 |
|---|---|
ListView.Horizontal | 항목이 수평으로 배열됩니다 ![]() |
ListView.Vertical | (기본값) 항목이 세로로 배열됩니다 ![]() |
Flickable Direction도 참조하십시오 .
populate : Transition
이 속성은 뷰를 위해 처음 생성된 항목들에 적용될 전환 효과를 지정합니다.
이 속성은 다음 상황에서 생성되는 모든 항목에 적용됩니다:
- 뷰가 처음 생성될 때
- 뷰의 ` model `가 변경되어 표시되는 델리게이트가 완전히 대체되는 경우
- 뷰의 ` model `가 ` reset`인 경우(모델이 ` QAbstractItemModel `의 서브클래스인 경우)
예를 들어, 다음과 같이 이러한 전환을 지정하는 뷰가 있습니다:
ListView {
...
populate: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}뷰가 초기화되면, 뷰는 뷰에 필요한 모든 항목을 생성한 다음, 1초에 걸쳐 해당 항목들을 뷰 내의 올바른 위치로 애니메이션 처리합니다.
그러나 나중에 뷰를 스크롤할 때, 델리게이트가 표시됨에 따라 인스턴스화되더라도 ‘populate’ 전환은 실행되지 않습니다. 모델이 변경되어 새로운 델리게이트가 표시될 때는 ‘ add ’ 전환이 실행됩니다. 따라서 델리게이트의 속성을 초기화하기 위해 ‘ populate ’ 전환에 의존해서는 안 됩니다. 이 전환은 모든 델리게이트에 적용되는 것이 아니기 때문입니다. 애니메이션이 속성의 ` to ` 값을 설정하는 경우, 해당 속성은 처음에 ` to ` 값을 가져야 하며, 애니메이션이 적용될 경우 애니메이션은 ` from ` 값을 설정해야 합니다:
ListView {
...
delegate: Rectangle {
opacity: 1 // not necessary because it's the default
}
populate: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
}
}뷰 전환 사용 방법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.
또한 add 및 ViewTransition 을참조하십시오 .
remove : Transition
이 속성은 뷰에서 제거되는 항목에 적용할 전환 효과를 지정합니다.
예를 들어, 다음과 같은 뷰에서는 이러한 전환 효과를 지정합니다:
ListView {
...
remove: Transition {
ParallelAnimation {
NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
}
}
}위의 뷰에서 항목이 제거될 때마다, 해당 항목은 1초에 걸쳐 (100, 100) 위치로 이동하는 애니메이션이 적용되며, 동시에 불투명도가 0으로 변경됩니다. 이 전환 효과는 뷰에서 제거된 항목에만 적용되며, 해당 항목의 제거로 인해 위치가 이동한 그 아래의 항목에는 적용되지 않습니다. 위치가 이동한 항목에 애니메이션을 적용하려면 ` displaced ` 또는 ` removeDisplaced ` 속성을 설정하십시오.
전환이 적용될 시점에는 항목이 이미 모델에서 제거된 상태이므로, 제거된 인덱스에 대한 모델 데이터 참조는 유효하지 않다는 점에 유의하십시오.
또한, 델리게이트 항목에 대해 delayRemove 첨부 속성이 설정된 경우, delayRemove 가 다시 false가 될 때까지 remove 전환이 적용되지 않습니다.
뷰 전환 사용 방법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.
removeDisplaced 및 ViewTransition항목도 참조하십시오 .
removeDisplaced : Transition
이 속성은 뷰 내의 다른 항목이 제거됨으로써 위치가 변경된 항목에 적용할 전환 효과를 지정합니다.
예를 들어, 다음과 같이 해당 전환을 지정하는 뷰가 있습니다:
ListView {
...
removeDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}위 뷰에서 항목이 제거될 때마다, 그 아래에 있는 모든 항목이 밀려나면서 뷰 내에서 위쪽(또는 가로 방향인 경우 옆쪽)으로 이동하게 됩니다. 이러한 위치 이동이 발생하면, 항목들이 뷰 내의 새로운 x, y 위치로 이동하는 과정이 지정된 대로 1초에 걸쳐 ‘ NumberAnimation ’ 애니메이션으로 표현됩니다. 이 전환 효과는 뷰에서 실제로 제거된 항목에는 적용되지 않습니다. 제거된 항목에 애니메이션을 적용하려면 ‘ remove ’ 속성을 설정하십시오.
항목이 여러 유형의 작업에 의해 동시에 변위되는 경우, addDisplaced, moveDisplaced 또는 removeDisplaced 전환 중 어느 것이 적용될지는 정의되어 있지 않습니다. 또한, 항목이 추가(add), 이동(move) 또는 제거(remove) 작업에 의해 변위되는지에 따라 서로 다른 전환을 지정할 필요가 없다면, 대신 displaced 속성을 설정하는 것을 고려해 보십시오.
뷰 전환 사용 방법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.
displaced, remove 및 ViewTransition도 참조하십시오 .
reuseItems : bool
이 속성을 사용하면 ` delegate`에서 인스턴스화된 항목을 재사용할 수 있습니다. 이 속성을 ` false`로 설정하면 현재 풀에 있는 모든 항목이 파기됩니다.
이 속성의 기본값은 false 입니다.
Reusing items, pooled() 및 reused()도 참조하십시오 .
section group
section.criteria : enumeration
section.delegate : Component
section.labelPositioning : enumeration
section.property : string
이 속성들은 평가할 표현식과 섹션 레이블의 모양을 결정합니다.
section.property 각 섹션의 기초가 되는 속성의 이름을 포함합니다.
section.criteria section.property 를 기반으로 각 섹션을 구성하는 기준을 포함합니다. 이 값은 다음 중 하나일 수 있습니다:
| Constant | 설명 |
|---|---|
ViewSection.FullString | (기본값) ' section.property ' 값을 기준으로 섹션이 생성됩니다. |
ViewSection.FirstCharacter | section.property 값의 첫 번째 문자를 기준으로 섹션이 생성됩니다(예: 주소록의 경우 'A', 'B', 'C' ... 섹션). |
섹션 경계를 결정할 때는 대소문자를 구분하지 않는 비교가 사용됩니다.
section.delegate 각 섹션에 대한 델리게이트 컴포넌트를 보유합니다. 섹션 델리게이트 인스턴스의 기본 stacking order 는 2 입니다. 여기에 "section"이라는 이름의 required 속성을 선언하면, 해당 속성에는 섹션의 제목이 포함됩니다.
section.labelPositioning 는 현재 및/또는 다음 섹션 레이블이 뷰의 시작/끝 부분에 고정되는지, 그리고 레이블이 인라인으로 표시되는지를 결정합니다. 이 값은 다음의 조합일 수 있습니다:
| 상수 | 설명 |
|---|---|
ViewSection.InlineLabels | (기본값) 섹션을 구분하는 항목 델리게이트 사이에 섹션 레이블이 인라인으로 표시됩니다. |
ViewSection.CurrentLabelAtStart | 현재 섹션 레이블은 뷰가 이동할 때 뷰의 시작 부분에 고정됩니다. |
ViewSection.NextLabelAtEnd | 다음 섹션 레이블(보이는 모든 섹션을 넘어선 부분)은 뷰가 이동할 때 뷰의 끝 부분에 고정됩니다. 참고: ‘ |
목록의 각 항목에는 ListView.section, ListView.previousSection 및 ListView.nextSection 라는 속성이 첨부되어 있습니다.
예를 들어, 다음은 섹션별로 구분된 동물 목록을 표시하는 ‘ ListView ’입니다. ‘ ListView ’의 각 항목은 모델 항목의 “size” 속성에 따라 서로 다른 섹션에 배치됩니다. ‘ sectionHeading ’ 델리게이트 컴포넌트는 각 섹션의 시작을 표시하는 연한 파란색 막대를 제공합니다.
// The delegate for each section header
Component {
id: sectionHeading
Rectangle {
width: ListView.view.width
height: childrenRect.height
color: "lightsteelblue"
required property string section
Text {
text: parent.section
font.bold: true
font.pixelSize: 20
}
}
}
ListView {
id: view
anchors.top: parent.top
anchors.bottom: buttonBar.top
width: parent.width
model: animalsModel
delegate: Text {
required property string name
text: name
font.pixelSize: 18
}
section.property: "size"
section.criteria: ViewSection.FullString
section.delegate: sectionHeading
}
참고: ListView 에 섹션을추가한다고 해서 목록 항목이 섹션 기준에 따라 자동으로 재정렬되는 것은 아닙니다. 모델이 섹션별로 정렬되어 있지 않은 경우, 생성된 섹션이 고유하지 않을 수 있습니다. 서로 다른 섹션 사이의 경계마다, 해당 섹션이 다른 곳에 존재하더라도 섹션 헤더가 생성됩니다.
ListView 예제 및 Stacking Order in ListView도 참조하십시오 .
snapMode : enumeration
이 속성은 드래그 또는 플릭 동작 후 뷰 스크롤이 어떻게 안정화될지를 결정합니다. 가능한 값은 다음과 같습니다:
| Constant | 설명 |
|---|---|
ListView.NoSnap | (기본값) 뷰는 표시 영역 내의 임의의 위치에서 멈춥니다. |
ListView.SnapToItem | 뷰가 시작 지점에 항목이 정렬된 상태로 정지합니다. |
ListView.SnapOneItem | 마우스 버튼을 뗀 시점에 뷰는 처음에 보이던 항목으로부터 최대 한 항목 거리 이내에서 정지합니다. 이 모드는 한 번에 한 페이지씩 이동할 때 특히 유용합니다. SnapOneItem이 활성화되면, 이동이 발생할 때 ListView 는 인접한 항목에 더 강한 친화력을 보입니다. 예를 들어, SnapToItem을 사용하여 현재 항목으로 다시 스냅되는 짧은 드래그 동작도 SnapOneItem을 사용하면 인접한 항목으로 스냅될 수 있습니다. |
snapMode currentIndex 에는 영향을 미치지 않습니다. 목록이 이동함에 따라 를 업데이트하려면 를 로 설정하십시오. currentIndex highlightRangeMode ListView.StrictlyEnforceRange
highlightRangeMode도 참조하십시오 .
spacing : real
이 속성은 항목 간의 간격을 지정합니다.
기본값은 0입니다.
verticalLayoutDirection : enumeration
이 속성은 세로 방향 목록의 레이아웃 방향을 지정합니다.
사용 가능한 값:
| 상수 | 설명 |
|---|---|
ListView.TopToBottom | (기본값) 항목은 뷰의 상단부터 하단 방향으로 배치됩니다. |
ListView.BottomToTop | 항목들은 뷰의 하단에서 상단으로 배열됩니다. |
orientation 가 Qt.Horizontal인 경우 이 속성을 설정해도 아무런 효과가 없습니다.
ListView::layoutDirection도 참조하십시오 .
부속 속성 문서
ListView.delayRemove : bool [attached]
이 첨부 속성은 델리게이트가 소멸될 수 있는지 여부를 나타냅니다. 이 속성은 델리게이트의 각 인스턴스에 첨부됩니다. 기본값은 false입니다.
애니메이션이 완료될 때까지 항목의 소멸을 지연시켜야 할 때가 있습니다. 아래의 예제 델리게이트는 항목이 목록에서 제거되기 전에 애니메이션이 완료되도록 보장합니다.
Component {
id: delegate
Item {
SequentialAnimation {
id: removeAnimation
PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: true }
NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false }
}
ListView.onRemove: removeAnimation.start()
}
}remove 전환이 지정된 경우, delayRemove가 false 로 반환될 때까지 해당 전환이 적용되지 않습니다.
ListView.isCurrentItem : bool [read-only attached]
이 첨부 속성은 해당 델리게이트가 현재 항목인 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다.
이 속성은 델리게이트의 각 인스턴스에 연결되어 있습니다.
이 속성은 현재 항목의 모양을 조정하는 데 사용할 수 있습니다. 예를 들어:
ListView {
width: 180; height: 200
Component {
id: contactsDelegate
Rectangle {
id: wrapper
width: 180
height: contactInfo.height
color: ListView.isCurrentItem ? "black" : "red"
Text {
id: contactInfo
text: name + ": " + number
color: wrapper.ListView.isCurrentItem ? "red" : "black"
}
}
}
model: ContactModel {}
delegate: contactsDelegate
focus: true
}ListView.nextSection : string [read-only attached]
이 첨부 속성은 다음 요소의 섹션을 포함합니다.
이는 델리게이트의 각 인스턴스에 연결됩니다.
이 섹션은 ` section ` 속성을 사용하여 평가됩니다.
ListView.previousSection : string [read-only attached]
이 첨부 속성은 이전 요소의 섹션을 포함합니다.
이는 델리게이트의 각 인스턴스에 연결됩니다.
이 섹션은 ` section ` 속성을 사용하여 평가됩니다.
ListView.section : string [read-only attached]
이 첨부 속성은 이 요소의 섹션을 포함합니다.
이는 델리게이트의 각 인스턴스에 연결됩니다.
이 섹션은 ` section ` 속성을 사용하여 평가됩니다.
ListView.view : ListView [read-only attached]
이 첨부 속성은 이 델리게이트 인스턴스를 관리하는 뷰를 포함합니다.
이 속성은 각 델리게이트 인스턴스뿐만 아니라 헤더, 푸터, 섹션 및 하이라이트 델리게이트에도 연결되어 있습니다.
Attached Signal 문서
[attached] add()
이 첨부된 신호는 항목이 뷰에 추가된 직후에 발생합니다.
추가 전환이 지정된 경우, 이 신호가 처리된 직후에 해당 전환이 적용됩니다.
참고: 해당핸들러는 ` onAdd`입니다.
[attached] pooled()
이 신호는 아이템이 재사용 풀에 추가된 후에 발생합니다. 이 신호를 사용하여 아이템 내에서 진행 중인 타이머나 애니메이션을 일시 중지하거나, 재사용할 수 없는 리소스를 해제할 수 있습니다.
이 신호는 reuseItems 속성이 true 인 경우에만 발생합니다.
참고: 해당 핸들러는 onPooled 입니다.
Reusing items, reuseItems 및 reused()도 참조하십시오 .
[attached] remove()
이 신호는 항목이 뷰에서 제거되기 직전에 발생합니다.
제거 전환이 지정된 경우, delayRemove 가 false인 한 이 신호가 처리된 후에 해당 전환이 적용됩니다.
참고: 이에 대응하는핸들러는 onRemove 입니다.
[attached] reused()
이 신호는 항목이 재사용된 후에 발생합니다. 이 시점에서 항목은 풀에서 제거되어 콘텐츠 뷰에 배치되었으며, ` index ` 및 ` row `과 같은 모델 속성이 업데이트되었습니다.
모델에서 제공하지 않는 다른 속성들은 항목이 재사용될 때 변경되지 않습니다. 델리게이트 내에 어떤 상태도 저장하지 않는 것이 좋지만, 만약 저장했다면 이 신호를 수신할 때 해당 상태를 수동으로 재설정해야 합니다.
이 신호는 항목이 처음 생성될 때가 아니라 재사용될 때 발송됩니다.
이 신호는 reuseItems 속성이 true 인 경우에만 발송됩니다.
참고: 해당 핸들러는 onReused 입니다.
Reusing items, reuseItems 및 pooled()도 참조하십시오 .
메서드 설명
void decrementCurrentIndex()
현재 인덱스를 1씩 줄입니다. ` keyNavigationWraps `가 true이고 현재 인덱스가 시작 위치에 있을 경우, 인덱스는 처음부터 다시 시작됩니다. ` count `가 0인 경우 이 메서드는 아무런 효과도 없습니다.
참고: 메서드는 컴포넌트(Component)가 완전히 완료된 후에만 호출해야 합니다.
void forceLayout()
모델의 변경 사항에 대한 반응은 일반적으로 프레임당 한 번만 일괄 처리됩니다. 즉, 스크립트 블록 내부에서는 기본 모델이 변경되었을 수 있지만, ` ListView `가 아직 이를 반영하지 못한 상태일 수 있습니다.
이 메서드는 ListView 가 모델의 미처리된 변경 사항에 즉시 반응하도록 강제합니다.
참고: 메서드는 Component가 완료된 후에만 호출해야 합니다.
void incrementCurrentIndex()
현재 인덱스를 증가시킵니다. ` keyNavigationWraps `가 true이고 현재 인덱스가 끝 위치에 있을 경우, 현재 인덱스는 다시 처음부터 시작됩니다. ` count `가 0인 경우 이 메서드는 아무런 효과도 없습니다.
참고: 메서드는 컴포넌트(Component)가 완료된 후에만 호출해야 합니다.
int indexAt(real x, real y)
콘텐츠 좌표계에서 점 x, y 을 포함하는 표시된 항목의 인덱스를 반환합니다. 지정된 지점에 항목이 없거나 항목이 표시되지 않은 경우 -1이 반환됩니다.
항목이 표시 영역 밖에 있는 경우, 스크롤을 통해 해당 지점이 화면에 표시될 때 항목이 존재할지 여부와 관계없이 -1을 반환합니다.
참고: 메서드는 컴포넌트의 초기화가 완료된 후에만 호출해야 합니다.
Item itemAt(real x, real y)
콘텐츠 좌표계에서 x, y 지점을 포함하는 표시된 항목을 반환합니다. 지정된 지점에 항목이 없거나 항목이 표시되지 않는 경우 null이 반환됩니다.
항목이 가시 영역 밖에 있는 경우, 스크롤을 통해 해당 지점이 화면에 표시될 때 항목이 존재할지 여부와 관계없이 null이 반환됩니다.
참고: 메서드는 Component가 완료된 후에만 호출해야 합니다.
Item itemAtIndex(int index)
index 에 해당하는 항목을 반환합니다. 해당 인덱스에 해당하는 항목이 없는 경우(예: 아직 생성되지 않았거나, 화면 밖으로 이동하여 캐시에서 제거된 경우 등)에는 null이 반환됩니다.
참고: 이 메서드는 컴포넌트가 완료된 후에만 호출해야 합니다. 또한, 뷰에서 해당 항목을 해제할 경우 호출 범위를 벗어나는 즉시 반환 값이 null로 바뀔 수 있으므로, 반환된 값을 저장해서는 안 됩니다.
헤더나 푸터를 고려하여 뷰를 시작 부분이나 끝 부분에 배치합니다.
contentX 이나 contentY 를 사용하여 뷰를 특정 인덱스에 배치하는 것은 권장되지 않습니다. 목록의 시작 부분에서 항목을 제거하더라도 다른 모든 항목의 위치가 재조정되지는 않으며, 델리게이트의 크기에 따라 뷰의 실제 시작 위치가 달라질 수 있으므로 이 방법은 신뢰할 수 없습니다.
참고: 메서드는 Component가 완료된 후에만 호출해야 합니다. 시작 시 뷰의 위치를 지정하려면 Component.onCompleted에서 이 메서드를 호출해야 합니다. 예를 들어, 시작 시 뷰를 끝으로 이동시키려면:
Component.onCompleted: positionViewAtEnd()void positionViewAtIndex(int index, PositionMode mode)
index 가 mode 로 지정된 위치에 오도록 뷰의 위치를 조정합니다:
| 상수 | 설명 |
|---|---|
ListView.Beginning | 뷰의 상단(또는 가로 방향인 경우 왼쪽)에 위치 항목 배치. |
ListView.Center | 항목을 뷰의 중앙에 배치합니다. |
ListView.End | 항목을 뷰의 하단(가로 방향인 경우 오른쪽)에 배치합니다. |
ListView.Visible | 항목의 일부라도 보이면 아무 조치도 취하지 않고, 그렇지 않으면 항목을 화면에 표시합니다. |
ListView.Contain | 항목 전체가 보이도록 합니다. 항목이 뷰보다 큰 경우, 항목은 뷰의 상단(가로 방향인 경우 왼쪽)에 배치됩니다. |
ListView.SnapPosition | 항목을 preferredHighlightBegin 에 배치합니다. 이 모드는 highlightRangeMode 가 StrictlyEnforceRange이거나 snapMode 를 통해 스냅이 활성화된 경우에만 유효합니다. |
index 에 뷰를 배치할 경우 뷰의 시작 부분이나 끝 부분에 빈 공간이 표시된다면, 뷰는 경계에 배치됩니다.
contentX 또는 contentY 을 사용하여 뷰를 특정 인덱스에 배치하는 것은 권장되지 않습니다. 목록의 시작 부분에서 항목을 제거해도 다른 모든 항목의 위치가 재조정되지는 않으며, 델리게이트의 크기에 따라 뷰의 실제 시작 위치가 달라질 수 있으므로 이 방법은 신뢰할 수 없습니다. 항목을 뷰에 표시하는 올바른 방법은 positionViewAtIndex 를 사용하는 것입니다.
참고: 메서드는 Component가 완료된 후에만 호출해야 합니다. 시작 시 뷰를 배치하려면 Component.onCompleted에서 이 메서드를 호출해야 합니다. 예를 들어, 뷰를 끝 부분에 배치하려면:
Component.onCompleted: positionViewAtIndex(count - 1, ListView.Beginning)© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.




