C

ListView QML 类型

提供由模型提供的项目列表视图。 更多信息...

导入声明import QtQuick
自从Qt Quick Ultralite 1.0
继承

Flickable

属性

方法

详细描述

ListView 显示由内置 QML 类型（如 ListModel）创建的模型创建的数据。

ListView 有一个模型，该模型定义要显示的数据，以及一个代理，该代理定义如何显示数据。ListView 中的项目水平或垂直排列。由于 ListView 继承自 Flickable，ListView 本质上是可同屏滚动的。

注意：在 Qt Quick Ultralite 中，所有代理必须具有相同的大小，并且必须明确指定其大小。

示例用法

以下示例显示了用于 ListView 的简单列表模型的定义。在这里，ListView 为其代理创建一个 Text 项。

Item {
    ListView {
        width: 180; height: 300

        model: ListModel {
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
        }

        delegate: Text {
            width: 180
            height: 30
            text: model.name + ": " + model.number
        }
    }
}

视图为模型中的每个项创建一个新的 Text 组件。注意，代理可以直接访问模型的名字和数字数据。

改进的示例

以下是一个改进的列表视图示例。该代理的外观得到改善，并被移动到单独的 contactDelegate 组件中。

Item {
    Rectangle {
        width: 360; height: 200

        Component {
            id: contactDelegate
            Item {
                width: 360; height: 60
                Column {
                    Text { text: 'Name: ' + model.name }
                    Text { text: 'Number: ' + model.number }
                }
            }
        }

        ListView {
            anchors.fill: parent

            model: ListModel {
                ListElement {
                    name: "Bill Smith"
                    number: "555 3264"
                }
                ListElement {
                    name: "John Brown"
                    number: "555 8426"
                }
                ListElement {
                    name: "Sam Wise"
                    number: "555 0473"
                }
            }

            delegate: contactDelegate
        }
    }
}

代理根据需要实例化，并且可以随时销毁。它们是 ListView 的内容项的父级，而不是视图本身。不应在代理中存储状态。

布局示例

可以使用 orientation 属性来控制 ListView 中的项的布局，该属性控制是否水平或垂直流动项。此值可以是 Qt.Horizontal 或 Qt.Vertical。

Item {
    Rectangle {
        width: 360; height: 200

        Component {
            id: contactDelegate
            Item {
                width: 120; height: 200
                Column {
                    Text { text: model.name }
                    Text { text: model.surname }
                    Text { text: "Age: " + model.age }
                }
            }
        }

        ListView {
            anchors.fill: parent
            orientation: Qt.Horizontal

            model: ListModel {
                ListElement {
                    name: "Bill"
                    surname: "Smith"
                    age: "30"
                }
                ListElement {
                    name: "John"
                    surname: "Brown"
                    age: "56"
                }
                ListElement {
                    name: "Sam"
                    surname: "Wise"
                    age: "42"
                }
            }

            delegate: contactDelegate
        }
    }
}

另请参阅ListView QML 类型 和 模型-视图-代理模式。

属性文档

代理 : 组件

代理提供了一个模板，定义了列表视图实例化的每个项目。


模型 : 模型

此属性持有模型，为列表提供数据。

模型提供用于在视图中创建项目的数据集。

另请参阅Qt Quick Ultralite中的模型和视图。


方向 : 枚举

此属性保存列表的方向。

可能的值

常量描述
Qt.Horizontal项目将以水平方向排列。
Qt.Vertical项目默认以垂直方向排列。

间距 : 实数

此属性保存项目间的间距。

默认值是0。


方法文档

[自 Qt Quick Ultralite 1.6 以来]var itemAtIndex(int index)

返回位于索引处的项目。如果没有对应的项目，例如因为它尚未创建，或者因为它已经被滚动出可视区域并从缓存中移除，则返回null项目。

此方法是在Qt Quick Ultralite 1.6中引入的。


在某些Qt许可证下可用。
了解更多信息。