QML 동적 뷰 순서 지정 자습서 QML 동적 뷰 순서 지정 자습서 2 - 뷰 항목 드래그하기

QML 동적 뷰 순서 지정 자습서 1 - 간단한 ListView 및 델리게이트

뷰에 데이터를 제공할 모델인 ListView 과 뷰의 항목 구성을 위한 템플릿을 제공하는 델리게이트를 정의하는 것으로 애플리케이션을 시작합니다.

ListView 및 델리게이트의 코드는 다음과 같습니다:

import QtQuick

Rectangle {
    id: root

    width: 300
    height: 400

    Component {
        id: dragDelegate

        Rectangle {
            id: content

            required property string name
            required property string type
            required property string size
            required property int age

            width: view.width
            height: column.implicitHeight + 4

            border.width: 1
            border.color: "lightsteelblue"

            radius: 2

            Column {
                id: column
                anchors {
                    fill: parent
                    margins: 2
                }

                Text { text: qsTr('Name: ') + content.name }
                Text { text: qsTr('Type: ') + content.type }
                Text { text: qsTr('Age: ') + content.age }
                Text { text: qsTr('Size: ') + content.size }
            }
        }
    }
    ListView {
        id: view

        anchors {
            fill: parent
            margins: 2
        }

        model: PetsModel {}
        delegate: dragDelegate

        spacing: 4
        cacheBuffer: 50
    }
}

모델은 다음과 같은 별도의 QML 파일에 정의됩니다:

import QtQuick

ListModel {
    ListElement {
        name: qsTr("Polly")
        type: qsTr("Parrot")
        age: 12
        size: qsTr("Small")
    }
    ListElement {
        name: qsTr("Penny")
        type: qsTr("Turtle")
        age: 4
        size: qsTr("Small")
    }
}

워크스루

애플리케이션의 루트 사각형 내에 정의된 첫 번째 항목은 델리게이트 컴포넌트입니다. 이것은 ListView 의 각 항목이 구성되는 템플릿입니다.

델리게이트에서 참조된 name, age, type, size 변수는 모델 데이터에서 가져옵니다. 이름은 모델에 정의된 역할에 해당합니다.

    Component {
        id: dragDelegate

        Rectangle {
            id: content

            required property string name
            required property string type
            required property string size
            required property int age

            width: view.width
            height: column.implicitHeight + 4

            border.width: 1
            border.color: "lightsteelblue"

            radius: 2

            Column {
                id: column
                anchors {
                    fill: parent
                    margins: 2
                }

                Text { text: qsTr('Name: ') + content.name }
                Text { text: qsTr('Type: ') + content.type }
                Text { text: qsTr('Age: ') + content.age }
                Text { text: qsTr('Size: ') + content.size }
            }
        }
    }

애플리케이션의 두 번째 부분은 모델과 델리게이트를 바인딩하는 ListView 자체입니다.

    ListView {
        id: view

        anchors {
            fill: parent
            margins: 2
        }

        model: PetsModel {}
        delegate: dragDelegate

        spacing: 4
        cacheBuffer: 50
    }

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

QML 동적 보기 순서 지정 자습서 QML 동적 보기 순서 지정 자습서 2 - 보기 항목 드래그하기

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