QML 동적 보기 순서 자습서 1 - 간단한 목록 보기 및 델리게이트 QML 동적 보기 순서 자습서 3 - 드래그한 항목 이동하기

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
                        }
                    }
                }

예제 프로젝트 @ code.qt.io

QML 동적 보기 순서 지정 튜토리얼 1 - 간단한 리스트뷰와 델리게이트 QML 동적 보기 순서 지정 튜토리얼 3 - 드래그한 항목 이동하기

© 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.