组件/数据展示

EListy 虚拟列表

import EUI 1.0

示例与代码

虚拟列表

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListy { readonly property string itemLabel: qsTr("项目 Alpha") width: 420 height: 270 overscan: 80 items: Array.from({ "length": 500 }, function(_, index) { return { "key": index, "label": itemLabel + " " + index, "kind": index < 250 ? "A" : "B" } }) }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

函数分组

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListy { readonly property string itemLabel: qsTr("项目 Alpha") width: 420 height: 270 group: ({ "key": function(item) { return item.kind }, "title": function(key, entries) { return key + " · " + entries.length } }) items: Array.from({ "length": 500 }, function(_, index) { return { "key": index, "label": itemLabel + " " + index, "kind": index < 250 ? "A" : "B" } }) }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

吸顶分组标题

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListy { readonly property string itemLabel: qsTr("项目 Alpha") width: 420 height: 270 sticky: true group: ({ "key": "kind" }) items: Array.from({ "length": 500 }, function(_, index) { return { "key": index, "label": itemLabel + " " + index, "kind": index < 250 ? "A" : "B" } }) }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

自定义条目

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListy { readonly property string itemLabel: qsTr("项目 Alpha") width: 420 height: 270 itemDelegate: Component { EListItem { property var itemKey: null avatarText: "Q" extra: String(itemKey) } } items: Array.from({ "length": 500 }, function(_, index) { return { "key": index, "label": itemLabel + " " + index, "kind": index < 250 ? "A" : "B" } }) }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

按稳定 key 定位

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListy { id: list readonly property string itemLabel: qsTr("项目 Alpha") width: 420 height: 270 header: EButton { text: qsTr("定位到第 200 项") onClicked: list.scrollTo({ "key": 200, "align": "top" }) } items: Array.from({ "length": 500 }, function(_, index) { return { "key": index, "label": itemLabel + " " + index, "kind": index < 250 ? "A" : "B" } }) }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

datasetvar只读

行数据及构建错误信息。

默认值自动计算

errorStringstring只读

无效数据或用户回调异常的说明；正常时为空。

默认值自动计算

groupvar

分组键及分组标题的配置。

字段：
key, title

默认值null

groupHeaderDelegateComponent

自定义分组标题；上下文提供 groupKey 和 groupTitle。

默认值null

indexOffsetint

源索引偏移；供 EList 分页保持源数组索引。

默认值0

itemDelegateComponent

自定义条目委托；上下文提供 itemData、itemIndex 等字段。

默认值null

itemsvar

列表数据数组；替换数组后更新显示。

默认值[]

overscanreal

可视区域之外的委托缓存距离，单位为像素。

默认值120

rowKeyvar

稳定 key 的字段名或 (item, index) 函数；缺少字段时回退到索引。

默认值"key"

rowsvar只读

分组后的行数据，保留源索引、稳定 key 和分组信息。

默认值自动计算

stickybool

是否保持当前分组标题吸顶。

默认值false

virtualbool

是否按需创建并复用委托；false 扩大缓存到全部内容。

默认值true

信号

签名作用

itemClicked(var item, int index)

点击列表项时触发，item 为该项数据，index 为其从 0 开始的索引。

方法

签名作用

scrollTo(config)

按 config 滚动到指定项目或位置。