Qt官方示例-Qml之ListView

❝我们通过定义一个ListView，将向视图(ListView)提供数据模型(model)以及模板委托(delegate)。❞

ListView和委托(delegate)的代码如下所示：

代码语言：javascript复制

import QtQuick 2.0

Rectangle {
    id: root

    width: 300; height: 400

    Component {
        id: dragDelegate

        Rectangle {
            id: content

            anchors { left: parent.left; right: parent.right }
            height: column.implicitHeight   4

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

            radius: 2

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

                Text { text: 'Name: '   name }
                Text { text: 'Type: '   type }
                Text { text: 'Age: '   age }
                Text { text: 'Size: '   size }
            }
        }
    }
    ListView {
        id: view

        anchors { fill: parent; margins: 2 }

        model: PetsModel {}
        delegate: dragDelegate

        spacing: 4
        cacheBuffer: 50
    }
}

该数据模型在一个单独的QML文件中定义，如下所示：

代码语言：javascript复制

import QtQuick 2.0

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

在应用程序的根Rectangle中定义的第一项是委托组件。这是用于构造ListView中每个项目的模板。

委托中引用的名称，年龄，类型和大小变量均来自模型数据。这些名称与模型中定义的角色相对应。

代码语言：javascript复制

Component {
    id: dragDelegate

    Rectangle {
        id: content

        anchors { left: parent.left; right: parent.right }
        height: column.implicitHeight   4

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

        radius: 2

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

            Text { text: 'Name: '   name }
            Text { text: 'Type: '   type }
            Text { text: 'Age: '   age }
            Text { text: 'Size: '   size }
        }
    }
}

应用程序的第二部分是ListView本身，我们将数据模型绑定并委托给它。

代码语言：javascript复制

ListView {
    id: view

    anchors { fill: parent; margins: 2 }

    model: PetsModel {}
    delegate: dragDelegate

    spacing: 4
    cacheBuffer: 50
}

关于更多

在「QtCreator软件」可以找到：

代码语言：javascript复制

C:Qt{你的Qt版本}Examples{你的Qt版本}quicktutorialsdynamicviewdynamicview1

「相关链接」

代码语言：javascript复制

https://doc.qt.io/qt-5/qtquick-tutorials-dynamicview-dynamicview1-example.html

listview qt model qml 软件

1 人点赞