组件/数据展示

EList 列表

import EUI 1.0

示例与代码

预设列表条目

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { width: 420 height: 270 bordered: true items: [{ "key": "a", "title": qsTr("项目 Alpha"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }, { "key": "b", "title": qsTr("项目 Beta"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }, { "key": "c", "title": qsTr("项目 Gamma"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }] }

效果

运行代码，体验组件交互

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

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

头部和尾部

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { width: 420 height: 270 headerText: qsTr("项目 Alpha") footerText: qsTr("点击按钮或改变窗口宽度查看效果。") items: [{ "key": "a", "title": qsTr("项目 Alpha"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }, { "key": "b", "title": qsTr("项目 Beta"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }, { "key": "c", "title": qsTr("项目 Gamma"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }] }

效果

运行代码，体验组件交互

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

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

分页

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { width: 420 height: 270 pageSize: 2 bordered: true pagination: true items: [{ "key": "a", "title": qsTr("项目 Alpha"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }, { "key": "b", "title": qsTr("项目 Beta"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }, { "key": "c", "title": qsTr("项目 Gamma"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }] }

效果

运行代码，体验组件交互

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

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

响应式卡片网格

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { width: 420 height: 270 itemDelegate: Component { EListItem { split: false } } grid: ({ "xs": 1, "sm": 2, "md": 3, "gutter": 12, "itemHeight": 130 }) items: [{ "key": "a", "title": qsTr("项目 Alpha"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }, { "key": "b", "title": qsTr("项目 Beta"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }, { "key": "c", "title": qsTr("项目 Gamma"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }] }

效果

运行代码，体验组件交互

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

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

空状态和加载

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { items: [] width: 420 height: 270 bordered: true }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

borderedbool

是否显示列表外围边框。

默认值false

columnsint只读

按组件宽度和 grid 断点计算的列数。

默认值自动计算

currentPageint

当前页码，从 1 开始，并限制在有效页码范围内。

默认值1

effectivePageSizeint只读

限制后的每页数量。

默认值自动计算

emptyTextstring

空列表状态说明。

默认值ELocale.texts.NoData

footerDelegateComponent

自定义列表尾部组件。

默认值null

footerTextstring

列表尾部文字。

默认值""

gridvar

列表的响应式网格布局配置，断点根据容器宽度判断。

字段：
columns, column, xs
sm, md, lg
xl, xxl, gutter
itemHeight

默认值null

gutterreal只读

校验后的网格间距。

默认值自动计算

headerDelegateComponent

自定义列表头部组件。

默认值null

headerTextstring

列表头部文字。

默认值""

itemCountint只读

源数组的条目总数。

默认值自动计算

itemDelegateComponent

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

默认值null

itemsvar

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

默认值[]

loadingbool

是否显示加载遮罩。

默认值false

pageCountint只读

计算后的总页数，至少为 1。

默认值自动计算

pageItemsvar只读

当前页的条目；未分页时为完整数据。

默认值自动计算

pageOffsetint只读

当前页首项在源数组中的偏移。

默认值自动计算

pageSizeint

每页条目数量；有效值至少为 1。

默认值10

paginationbool

是否使用内置分页。

默认值false

rowKeyvar

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

默认值"key"

splitbool

是否显示条目之间的分隔线。

默认值true

viewalias只读

当前底层 EListy 或 GridView 实例。

默认值viewLoader.item

信号

签名作用

pageChanged(int page)

当前页变化时触发，page 为新的页码，从 1 开始。

itemClicked(var item, int index)

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

方法

签名作用

normalizePage()

将当前页码校正到有效范围，避免页数减少后停留在不存在的页面。

setPage(page)

切换到从 1 开始的页码 page；成功返回 true，禁用或页码无效时返回 false。

resolveColumns()

返回当前宽度和 grid 配置所对应的列表列数。