组件/数据展示

EAvatar 头像

import EUI 1.0

示例与代码

图标头像、自定义 fallback 和填充模式

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 16 EAvatar { size: 56 iconSource: EIcons.PERSON } EAvatar { size: 56 shape: "square" fillMode: Image.PreserveAspectFit source: "qrc:/example/images/gallery/avatar-01.jpg" } EAvatar { size: 56 EText { color: "white" anchors.centerIn: parent text: qsTr("设计") } } }

效果

运行代码，体验组件交互

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

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

头像

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EAvatar { size: 48 text: "EU" shape: "circle" }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

altstring

头像资源无法加载时的替代文字。

默认值""

backgroundColorcolor

背景颜色。

默认值动态绑定

contentalias

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

默认值别名：fallbackContent.data

enabledbool

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

默认值true

fillModeint

头像图片的缩放和填充方式。

Image.Stretch
Image.PreserveAspectFit
Image.PreserveAspectCrop

默认值Image.PreserveAspectCrop

heightreal

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

默认值implicitHeight

iconSourceint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

shapestring

头像形状。

circle
square

默认值"circle"

sizeint

头像直径或边长，单位为像素。

默认值40

sourceurl

图片或媒体资源地址，支持 Qt 可加载的 URL。

默认值""

srcsetstring

头像候选图片列表；用于选择可加载的图片资源。

默认值""

textstring

显示的文字内容。

默认值""

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

effectiveSourceurl只读

头像从 source 与 srcset 中确定的实际图片地址。

默认值由运行时计算

loadedbool只读

头像图片是否加载成功。

默认值由运行时计算

信号

签名作用

loadError()

图片资源加载失败时触发，可用于显示替代内容。