组件

ShadcnAvatar

圆形头像：图片 / 图标 / 首字母三选一，5 档尺寸，右下角可叠加 StatusDot。

圆形头像组件，内容按优先级 图片 → 图标 → 首字母 渲染；右下角可叠加 ShadcnStatusDot 做在线状态指示。

用法

import QtShadcn

// 首字母头像 + 在线状态
ShadcnAvatar {
    size: ShadcnAvatar.Size.Medium
    text: "Ryan"
    status: ShadcnStatusDot.Status.Online
}

// 图标头像
ShadcnAvatar { iconName: "user" }

// 图片头像
ShadcnAvatar {
    source: "file:/path/to/photo.png"
    size: ShadcnAvatar.Size.XLarge
}

// 自定义底色 + 文字色
ShadcnAvatar {
    text: "李"
    bgColor: theme.secondary
    textColor: theme.secondaryForeground
}

属性

属性	类型	说明
`size`	enum	`XSmall(24)` / `Small(32)` / `Medium(44, 默认)` / `Large(56)` / `XLarge(72)`
`source`	url	图片源，`PreserveAspectCrop` + Retina 2× 采样
`iconName`	string	无图片时显示图标（lucide 命名，见 ShadcnIcon）
`text`	string	无图也无图标时取首字母大写渲染
`bgColor`	color	底色（默认 `theme.primary`）
`textColor`	color	首字母文字色（默认 `theme.primaryForeground`）
`iconColor`	color	图标色（默认 `theme.primaryForeground`）
`status`	enum	右下角 `ShadcnStatusDot` 状态，默认 `None`（不显示）

尺寸

Size	直径	适用场景
XSmall	24px	列表行内、表格单元格
Small	32px	紧凑卡片 / 评论区
Medium	44px	导航栏用户头像 / 默认
Large	56px	个人信息卡片
XLarge	72px	个人主页大头像

组合

Avatar Group（堆叠头像）

外层 Row 设置 spacing: -12，每个头像右侧加 1px theme.card 色遮挡条即可产生 shadcn 风格堆叠效果：

Row {
    spacing: -12
    ShadcnAvatar { size: ShadcnAvatar.Size.Medium; text: "A"; bgColor: "#2563eb" }
    ShadcnAvatar { size: ShadcnAvatar.Size.Medium; text: "B"; bgColor: "#0ea5e9" }
    ShadcnAvatar { size: ShadcnAvatar.Size.Medium; text: "C"; bgColor: "#16a34a" }
    ShadcnAvatar { size: ShadcnAvatar.Size.Medium; text: "+5"; bgColor: theme.muted; textColor: theme.mutedForeground }
}

ShadcnAvatar

用法

属性

尺寸

组合

Avatar Group（堆叠头像）

相关