组件/EUI 扩展

EListItem 列表项

import EUI 1.0

示例与代码

标题和说明

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 title: qsTr("项目 Alpha") description: qsTr("点击按钮或改变窗口宽度查看效果。") }

效果

运行代码，体验组件交互

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

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

头像与额外信息

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 extra: "12:30" avatarText: "B" title: qsTr("项目 Beta") avatarSource: "qrc:/example/images/gallery/avatar-03.jpg" }

效果

运行代码，体验组件交互

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

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

条目操作

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 title: qsTr("项目 Alpha") description: qsTr("点击按钮或改变窗口宽度查看效果。") EButton { textButton: true text: qsTr("查看详情") } }

效果

运行代码，体验组件交互

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

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

对象数据

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 avatarText: "G" itemData: ({ "title": qsTr("项目 Gamma"), "description": qsTr("点击按钮或改变窗口宽度查看效果。") }) avatarSource: "qrc:/example/images/gallery/avatar-04.jpg" }

效果

运行代码，体验组件交互

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

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

无分隔线

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 extra: "QML" split: false title: qsTr("项目 Alpha") }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

actionsDelegateComponent

自定义操作区，上下文提供 itemData 和 itemIndex。

默认值null

avatarSourceurl

头像图片地址；默认读取 itemData.avatar。

默认值itemData && typeof itemData === "object" ? itemData.avatar || "" : ""

avatarTextstring

头像文字；与头像地址都为空时隐藏头像。

默认值""

contentalias

默认内容槽；EFloatButton 中为按钮文字的别名。

默认值actions.data

descriptionstring

条目说明；默认读取 itemData.description。

默认值

展开默认值

itemData && typeof itemData === "object" ? String(itemData.description || "") : ""

extrastring

条目右侧额外文字。

默认值""

itemDatavar

当前列表项的数据。

字段：
title, label, description
avatar

默认值null

itemIndexint

当前条目在源数据中的索引。

默认值-1

splitbool

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

默认值true

titlestring

条目标题；默认读取 itemData.title 或 label。

默认值

展开默认值

itemData && typeof itemData === "object" ? String(itemData.title === undefined ? itemData.label === undefined ? "" : itemData.label : itemData.title) : itemData === null || itemData === undefined ? "" : String(itemData)