QML 동적 뷰 정렬 튜토리얼 2 - 뷰 항목 드래그
이제 항목 목록이 화면에 표시되었으므로, 이 항목들과 상호작용할 수 있도록 하겠습니다. 먼저 델리게이트를 확장하여 화면에 표시된 콘텐츠를 화면 위아래로 드래그할 수 있도록 하겠습니다. 업데이트된 델리게이트는 다음과 같습니다:
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
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
width: dragArea.width
height: column.implicitHeight + 4
border.width: 1
border.color: "lightsteelblue"
color: dragArea.held ? "lightsteelblue" : "white"
Behavior on color { ColorAnimation { duration: 100 } }
radius: 2
states: State {
when: dragArea.held
ParentChange {
target: content
parent: root
}
AnchorChanges {
target: content
anchors {
horizontalCenter: undefined
verticalCenter: undefined
}
}
}
Column {
id: column
anchors {
fill: parent
margins: 2
}
Text { text: qsTr('Name: ') + dragArea.name }
Text { text: qsTr('Type: ') + dragArea.type }
Text { text: qsTr('Age: ') + dragArea.age }
Text { text: qsTr('Size: ') + dragArea.size }
}
}
}
}실행 과정
여기서 가장 큰 변경점은 델리게이트의 루트 항목이 이제 마우스 이벤트 핸들러를 제공하고 델리게이트의 콘텐츠 항목을 드래그할 수 있게 해주는 ` MouseArea `가 되었다는 점입니다. 또한 이 항목은 콘텐츠 항목을 담는 컨테이너 역할도 하는데, 델리게이트의 루트 항목은 뷰에 의해 위치가 결정되며 다른 방법으로는 이동할 수 없기 때문에 이는 중요합니다.
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
}
}콘텐츠 항목을 드래그할 수 있게 하려면 해당 항목을 ` MouseArea`의 ` drag.target ` 속성에 바인딩하면 됩니다. 뷰를 계속해서 플릭할 수 있게 하려면, ` MouseArea`의 ` pressAndHold ` 신호가 발송될 때까지 기다린 후 드래그 대상을 바인딩해야 합니다. 이렇게 하면 홀드 타임아웃이 만료되기 전에 마우스가 움직이면 목록 이동으로 해석되고, 만료된 후에 움직이면 항목 드래그로 해석됩니다. 사용자가 항목을 드래그할 수 있는 시점을 더 명확하게 알 수 있도록, 타임아웃이 만료되면 콘텐츠 항목의 배경색을 변경하겠습니다.
color: dragArea.held ? "lightsteelblue" : "white"
Behavior on color { ColorAnimation { duration: 100 } }항목을 드래그할 수 있게 되기 전에 해야 할 또 다른 작업은, 콘텐츠 항목을 자유롭게 이동할 수 있도록 해당 항목에 설정된 모든 앵커를 해제하는 것입니다. 이는 델리게이트 항목을 길게 눌렀을 때 트리거되는 상태 변경을 통해 수행하며, 동시에 콘텐츠 항목을 루트 항목으로 재할당하여 스태킹 순서에서 다른 항목들 위에 위치하게 하고, 드래그 중에 가려지지 않도록 할 수 있습니다.
states: State {
when: dragArea.held
ParentChange {
target: content
parent: root
}
AnchorChanges {
target: content
anchors {
horizontalCenter: undefined
verticalCenter: undefined
}
}
}© 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.
