QML 동적 보기 순서 자습서 3 - 드래그한 항목 이동하기
다음 단계에서는 목록 내 항목을 드래그하여 목록의 순서를 다시 지정할 수 있도록 목록 내 항목을 이동합니다. 이를 위해 애플리케이션에 세 가지 새로운 유형을 도입합니다. DelegateModel, Drag 및 DropArea.
Rectangle { id: root width: 300 height: 400 Component { id: dragDelegate MouseArea { id: dragArea property bool held: false required property string name required property string type required property string size required property int age anchors { left: parent?.left right: parent?.right } height: content.height drag.target: held ? content : undefined drag.axis: Drag.YAxis onPressAndHold: held = true onReleased: held = false Rectangle { id: content Drag.active: dragArea.held Drag.source: dragArea Drag.hotSpot.x: width / 2 Drag.hotSpot.y: height / 2 } DropArea { anchors { fill: parent margins: 10 } onEntered: (drag) => { visualModel.items.move( drag.source.DelegateModel.itemsIndex, dragArea.DelegateModel.itemsIndex) } } } } }
워크스루
보기의 순서를 바꾸려면 한 항목이 다른 항목 위로 드래그된 시점을 확인해야 합니다. 드래그 첨부 속성을 사용하면 첨부된 항목이 움직일 때마다 장면 그래프로 전송되는 이벤트를 생성할 수 있습니다.
Drag.active: dragArea.held Drag.source: dragArea Drag.hotSpot.x: width / 2 Drag.hotSpot.y: height / 2
드래그 이벤트는 활성 프로퍼티가 참일 때만 전송되므로 이 예제에서는 델리게이트가 잡혔을 때 첫 번째 이벤트가 전송되고 드래그할 때 추가 이벤트가 전송됩니다. hotSpot 속성은 드래그된 항목 내에서 드래그 이벤트의 상대적 위치(이 예에서는 항목의 중심)를 지정합니다.
그런 다음 각 뷰 항목에서 DropArea 을 사용하여 드래그한 항목의 핫스팟이 다른 항목과 교차하는 시점을 결정하고, 드래그가 이러한 드롭 영역 중 하나에 들어가면 드래그한 항목을 드래그한 항목의 인덱스로 이동할 수 있습니다.
DropArea { anchors { fill: parent margins: 10 } onEntered: (drag) => { visualModel.items.move( drag.source.DelegateModel.itemsIndex, dragArea.DelegateModel.itemsIndex) } }
뷰 내에서 항목을 이동하려면 DelegateModel. DelegateModel 유형은 뷰 유형에서 모델 데이터의 델리게이트 항목을 인스턴스화하는 데 사용되며 명시적으로 구성된 경우 ListView 에 제공된 모델 항목을 필터링하고 순서를 변경하는 데 사용할 수 있습니다. DelegateModel 의 items 속성은 뷰의 항목에 액세스하고 소스 모델을 수정하지 않고도 표시 순서를 변경할 수 있도록 합니다. 항목의 현재 표시 인덱스를 확인하려면 델리게이트 항목의 DelegateModel 첨부 속성에 있는 itemsIndex {itemsIndex} 속성을 사용합니다.
ListView 을 사용하여 DelegateModel 을 활용하려면 뷰의 model 속성에 바인딩하고 model 및 delegate 을 DelegateModel 에 바인딩합니다.
DelegateModel { id: visualModel model: PetsModel {} delegate: dragDelegate } ListView { id: view anchors { fill: parent margins: 2 } model: visualModel spacing: 4 cacheBuffer: 50 }
© 2025 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.
