一、场景五:用户技能标签墙

1.1 场景描述
用户个人主页展示技能标签,多种颜色和尺寸,可编辑模式下支持删除,通过加号按钮添加。这类场景常见于招聘 App 的候选人页面、开发者社区的个人主页、知识分享平台的作者简介等,技能标签的颜色和大小差异往往用来表达技能类别或熟练程度。
1.2 设计思路
这个场景引入了"浏览模式"与"编辑模式"两种状态的切换。在浏览模式下,标签仅展示,没有关闭按钮;切换到编辑模式后,每个标签右侧出现关闭图标,同时末尾追加一个"+ 添加"风格的虚线标签供用户点击添加新技能。这种模式在 iOS/Android 原生 App 中已经非常成熟,RcTag 的 rcTagClosable 属性和条件渲染特性使这套模式可以用极少的代码实现。
多尺寸混排是这个案例的视觉亮点。核心技能(如 HarmonyOS、ArkTS)使用 large 尺寸,中等熟练技能使用 medium,辅助技能使用 mini。不同的尺寸建立了明显的视觉权重差异,让浏览者一眼就能判断技能的重要程度,这是比数字评级更直观的表达方式。
1.3 完整代码
import { RcTag } from 'rchoui'
interface SkillTag {
id: string
name: string
type: 'primary' | 'success' | 'warning' | 'error' | 'info'
size: 'large' | 'medium' | 'mini'
}
@Entry
@ComponentV2
struct SkillTagWallDemo {
@Local isEditMode: boolean = false
@Local skills: SkillTag[] = [
{ id: '1', name: , : , : },
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : }
]
(: ): {
idx = ..( s. === id)
(idx >= ) {
..(idx, )
}
}
() {
({ : }) {
() {
().().(.).()
()
(. ? : ).().().( {
. = !.
})
}.()
({ : . }) {
(., {
({
: skill.,
: skill.,
: skill.,
: ,
: .,
: { : , : },
: {
.(skill.)
}
})
}, skill.)
(.) {
({
: ,
: ,
: ,
: ,
: ,
: { : , : },
: {
}
})
}
}.()
().().()
}.().().(.).().()
}
}



