组件/数据展示

ECarousel 走马灯

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: 12 width: parent.width ECarousel { id: carousel height: 220 type: "card" arrow: "hover" trigger: "hover" pauseOnHover: true width: Math.min(600, parent.width) delegate: EClip { id: slide readonly property var slideData: parent.modelData radius: 8 Image { anchors.fill: parent source: slide.slideData.source fillMode: Image.PreserveAspectCrop } EText { padding: 12 color: "white" font.pixelSize: 24 style: Text.Outline styleColor: "#80000000" text: slide.slideData.title anchors.bottom: parent.bottom } } model: [{ name: "design", title: qsTr("设计系统"), source: "qrc:/example/images/gallery/lake.jpg" }, { name: "build", title: qsTr("组件工程"), source: "qrc:/example/images/gallery/neon-red.jpg" }, { name: "ship", title: qsTr("产品交付"), source: "qrc:/example/images/gallery/neon-purple.jpg" }] } EButton { text: qsTr("切换到组件工程") onClicked: carousel.setActiveItem("build") } }

效果

运行代码，体验组件交互

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

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

走马灯

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECarousel { height: 220 width: parent.width model: ["qrc:/example/images/gallery/lake.jpg", "qrc:/example/images/gallery/neon-red.jpg", "qrc:/example/images/gallery/neon-purple.jpg"] delegate: Image { source: parent.modelData fillMode: Image.PreserveAspectCrop } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

arrowstring

切换箭头的显示策略。

"always" / "hover"
"never"

默认值"always"

autoplaybool

是否自动切换轮播项。

默认值true

cardScalereal

卡片轮播中非当前卡片的缩放比例。

实际值限制在 0.1–1

默认值0.83

currentIndexalias

当前选中或显示项的索引。

-1：未选择
0 起：条目索引

默认值别名：slides.currentIndex

delegateComponent

轮播内容委托，通过 index 和 modelData 读取项目。

默认值defaultSlide

directionstring

组件的排列方向。

"horizontal" / "vertical"

默认值"horizontal"

enabledbool

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

默认值true

heightreal

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

默认值implicitHeight

indicatorPositionstring

轮播指示器的显示位置。

"inside" / "outside"
"none"

默认值"inside"

initialIndexint

初始显示项的索引，从 0 开始。

默认值0

interactivebool

是否允许轮播鼠标和键盘交互。

默认值true

intervalint

轮播自动切换间隔，单位为毫秒。

默认值3000

loopbool

轮播首尾是否循环。

默认值true

modelvar

图片地址数组或轮播条目对象数组。

字段：
name, label, source

默认值[]

motionBlurbool

轮播切换时启用运动模糊效果。

默认值false

pauseOnHoverbool

鼠标悬停时暂停自动切换或关闭计时。

默认值true

triggerstring

激活操作的触发方式。

"click" / "hover"

默认值"click"

typestring

轮播内容的展示样式。

"default" / "card"

默认值"default"

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

countint只读

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

默认值由运行时计算

hasLabelsbool只读

轮播数据是否提供指示器标签。

默认值由运行时计算

信号

签名作用

changed(int index)

当前轮播项变化时触发，index 为新的索引。

indexChanged(int index, int previousIndex)

轮播项切换时触发，index 为新索引，previousIndex 为原索引。

方法

签名作用

next()

切换到下一项或下一步。

previous()

切换到上一项或上一步。

setActiveItem(value)

将 value 或 index 指定的项目设为当前项。

setCurrentIndex(index)

切换到 index 对应的轮播项。