组件/视觉效果

EBorderBeam 边框流光

import EUI 1.0

示例与代码

沿边框流动

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { height: 96 width: 420 ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EText { anchors.centerIn: parent text: qsTr("项目 Alpha") } }

效果

运行代码，体验组件交互

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

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

多道流光

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { count: 3 size: 70 height: 96 width: 420 ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EText { anchors.centerIn: parent text: qsTr("项目 Alpha") } }

效果

运行代码，体验组件交互

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

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

渐变与速度

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { height: 96 width: 420 duration: 3 color: [{ "color": "#3267e8", "percent": 0 }, { "color": "#b65cff", "percent": 100 }] ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EText { anchors.centerIn: parent text: qsTr("项目 Alpha") } }

效果

运行代码，体验组件交互

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

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

外扩与线宽

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { outset: 3 height: 96 radius: 16 width: 420 lineWidth: 3 ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EText { anchors.centerIn: parent text: qsTr("项目 Alpha") } }

效果

运行代码，体验组件交互

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

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

暂停和减少动画

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { id: beam height: 96 width: 420 running: false ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EButton { anchors.centerIn: parent text: qsTr("保存") onClicked: beam.running = !beam.running } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

beamCountint只读

限制后的流光数量。

默认值自动计算

beamSizereal只读

校验后的流光长度。

默认值自动计算

colorvar

边框光束使用的单色或渐变颜色。

单个颜色，或渐变数组
节点字段：color, percent
percent: 0–100

默认值EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)

contentalias

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

默认值body.data

countint

沿边框等距分布的流光数量。

实际值限制在 1–64

默认值1

durationreal

完整循环的时长，单位为秒。

默认值6

expansionreal只读

校验后的外扩距离。

默认值自动计算

lineWidthreal

流光描边宽度，单位为像素；0 表示不绘制。

默认值2

outsetreal

边框路径向外扩展的距离，单位为像素。

默认值0

radiusreal

路径圆角半径；不会超过容器边长的一半。

默认值8

reducedMotionbool

是否关闭装饰绘制与动画。

默认值false

runningbool

是否持续播放流光动画；false 保留当前帧。

默认值true

sizereal

流光长度，单位为像素。

默认值100

stopsvar只读

按位置排序并校验后的颜色节点。

默认值自动计算

strokeWidthreal只读

校验后的描边宽度。

默认值自动计算