组件/数据展示

ESkeleton 骨架屏

import EUI 1.0

示例与代码

多组骨架、延迟显隐和加载内容

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width ESwitch { checked: true text: qsTr("加载中") onToggled: skeleton.loading = checked } ESkeleton { id: skeleton rows: 2 count: 2 animated: true width: Math.min(480, parent.width) throttle: ({ leading: 250, trailing: 150 }) EText { height: 80 width: parent.width wrapMode: Text.WordWrap text: qsTr("加载完成。切换加载状态后，内容高度保持由实际内容决定。") } } }

效果

运行代码，体验组件交互

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

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

骨架屏

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESkeleton { rows: 3 loading: true animated: true EText { text: qsTr("加载完成") } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

animatedbool

启用骨架动画。

默认值false

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值别名：loadedContent.data

countint

骨架实例数量或当前项目数量，具体含义由组件决定。

默认值1

enabledbool

是否允许交互；false 时控件禁用。

默认值true

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

loadingbool

是否处于加载状态。

默认值true

rowsint

文本行数或骨架行数。

默认值3

templateDelegateComponent

自定义骨架模板的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

throttlevar

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

毫秒数值或对象：
leading, trailing, initVal

默认值0

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

displayedLoadingbool只读

经过延迟和节流处理的骨架加载状态。

默认值由运行时计算