HarmonyOS 6 ArkUI - ArkUI 自定义柱状消费统计图，使用 Column 堆叠高度实现简易条形图，循环渲染月度消费数据
在 HarmonyOS 声明式 UI 范式中，组件化的设计思想不仅是代码组织的手段，更是构建复杂商业应用的核心架构基石。每一个 @Component 都是一个自包含的视觉与逻辑单元，通过状态驱动实现界面与数据的精准联动。
陆冲（Surfskate）作为一种模拟冲浪浪感的陆地运动，其垂直电商场景天然具备多品类、多维度数据展示的诉求。从板型筛选到硬度光谱对比，从月销柱状图到价格排行，每一处可视化都需要 ArkTS 的灵活表达能力。
本应用的奶油黄 × 电光紫 × 青柠绿三色体系，不仅承载了街头活力风的视觉主张，更在代码层面通过统一的主题常量对象实现了设计令牌（Design Token）的集中管控，为后续暗色模式扩展与品牌换肤奠定了架构基础。
引言
在移动端电商应用的开发实践中，垂直品类商城因其深度的专业数据维度和精细化的用户运营需求，对 UI 框架的表达能力和状态管理机制提出了极高要求。本文分析的陆冲滑板公园应用，正是基于 HarmonyOS ArkTS 声明式开发范式构建的一站式陆冲运动装备商城，覆盖陆冲板、轮子、护具、板面四大核心品类，并延伸至教练课程预约、附近场地推荐、签到积分体系等社区化运营场景。
该应用的技术架构采用典型的分层设计策略：顶层为统一的主题配置层，通过 SkTheme 接口和 SK 常量将全局色彩、卡片背景、文字层次等设计变量集中收敛；中间层为数据处理层，包含大量的纯函数式过滤器、排序器、格式化器和动画计算器，这些函数不依赖组件状态，保证了数据处理的可测试性和可复用性；底层为组件表现层，由六个独立的 @Component 结构体分别承载首页、陆冲板、轮子、护具、板面、个人中心六个标签页的全部 UI 逻辑与交互行为。
从业务设计的角度审视，该应用不仅仅是一个商品展示列表，更是一个融合了数据可视化（价格对比条形图、硬度光谱、月销柱状图、消费趋势图）、CRUD 全生命周期管理（上架-编辑-删除-详情查看）、动效系统（浮动、弹跳、摆动、脉冲、涟漪、闪烁）、模态弹窗体系（签到、优惠券、新品首发、教练预约、删除确认）和社区化运营要素（签到积分、教练课程、附近场地、新手指南）的综合体。这种复杂度的实现，充分体现了 ArkTS 在处理多状态联动、定时器驱动的帧动画、条件渲染弹窗等场景时的架构韧性。
一、主题系统与设计令牌架构
interface SkTheme {
bg: string
primary: string
accent: string
card: string
text: string
sub: string
line: string
glow: string
}
const SK: SkTheme = {
bg: '#FFFBE8',
primary: '#7C3AED',
accent: '#84CC16',
card: '#FFFFFF',
text: '#2D2438',
sub: '#8A7FA3',
line: '#F0E4B8',
glow: '#C084FC'
}
应用的主题系统以 SkTheme 接口为类型约束，通过 SK 常量对象实例化全部八个色彩维度。这种设计令牌化的方案将背景色（奶油黄 #FFFBE8）、主色（电光紫 #7C3AED）、强调色（青柠绿 #84CC16）、卡片底色（纯白）、主文字色、辅助文字色、分割线色和辉光色统一收口到一个对象中。在整个应用的所有组件中，任何色彩引用都通过 SK.primary、SK.accent 等属性访问，而非直接硬编码十六进制色值。
这种设计的优势在于：第一，色彩语义化程度高，SK.accent 远比 #84CC16 更具可读性，开发者在阅读组件代码时能立即理解某个色彩的角色定位；第二，未来若需要实现暗色模式或品牌换肤，只需替换 SK 对象的属性值，全局所有组件的色彩引用将自动同步更新，无需逐个文件搜索替换；第三，TypeScript 的接口类型检查能在编译阶段捕获拼写错误，避免因手误导致的色彩失效问题。
二、数据模型与静态数据体系
interface SkBoard {
name: string
brand: string
shape: string
price: number
orig: number
sale: number
flex: number
stars: number
icon: string
}
const SK_BOARDS: SkBoard[] = [
{ name: '浪感陆冲板 32"', brand: 'YOW', shape: '翘头板', price: 1280, orig: 1580, sale: 486, flex: 3, stars: 5, icon: '🛹' },
{ name: '冲浪模拟器 V4', brand: 'Smoothstar', shape: '深弧板', price: 1680, orig: 1980, sale: 352, flex: 4, stars: 5, icon: '🏄' },
{ name: '碳纤维竞速板', brand: 'Waterborne', shape: '平宽板', price: 2199, orig: 2599, sale: 128, flex: 6, stars: 5, icon: '⚡' },
// ... 共 10 款板型
]
应用的核心数据模型覆盖了五大商品品类和一个用户维度数据集。SkBoard 定义了陆冲板的结构，包含名称、品牌、板型（翘头板/深弧板/小鱼板/平宽板/长巡航板）、现价、原价、月销量、硬度（1-10 柔软度等级）、星级评分和 Emoji 图标。SkWheel 定义了轮子数据，包含硬度（duro，74A-90A 的硬度计）、直径、品牌、月销量。SkGuard 定义了护具数据，包含防护部位（护膝/护肘/头盔/护掌/护背）、级别（入门级/进阶级/专业级）。SkDeck 定义了板面数据，包含宽度（英寸）和脚窝类型（浅凹/中凹/深凹）。
此外，还有用户维度的 SkOrder（订单记录，含订单号、状态、日期）、SkFav（收藏夹，含标签分类）、SkMonth（月度消费数据，用于柱状图趋势展示）和 SkTab（底部导航栏配置）。所有数据均以 const 常量数组形式声明，在应用生命周期内充当内存数据库的角色。
在实际生产环境中，这些静态数组将被网络请求的数据源替代，但当前的内存数据模式为 UI 开发和调试提供了高效的前端独立开发路径，体现了"数据先行、接口后接"的工程实践智慧。
三、纯函数式数据处理层
function skBoardFilter(arr: SkBoard[], t: string): SkBoard[] {
let r: SkBoard[] = []
for (let i = 0; i < arr.length; i++) {
if (t === '全部' || arr[i].shape === t) {
r.push(arr[i])
}
}
return r
}
function skBoardTop(): SkBoard[] {
let r: SkBoard[] = SK_BOARDS.slice()
r.sort((a: SkBoard, b: SkBoard) => b.price - a.price)
return r.slice(0, 6)
}
function skMaxPrice(): number {
let m: number = 1
for (let i = 0; i < SK_BOARDS.length; i++) {
if (SK_BOARDS[i].price > m) {
m = SK_BOARDS[i].price
}
}
return m
}
数据处理层是该应用架构中最值得关注的设计决策之一。全部数据处理逻辑被提取为独立的纯函数，不依赖任何组件的 @State 状态。skBoardFilter 根据板型标签对数组进行线性过滤，当标签为"全部"时返回完整数组，否则只返回匹配的板型。skBoardTop 通过 slice() 创建数组副本后按价格降序排序，取前六名用于价格对比可视化。skMaxPrice 遍历全量数据获取最大价格值，用于条形图宽度计算的归一化分母。
这种纯函数设计带来了三个显著的工程收益：首先是可测试性，每个函数可以脱离 UI 组件独立编写单元测试；其次是可组合性，在组件的 build() 方法中可以链式调用 skBoardFilter(this.boards, this.chip) 等函数实现数据流管道；最后是性能可预测性，由于函数不修改原始数组（slice() 创建副本），避免了引用突变导致的渲染副作用。
此外还有格式化函数群，如 skPrice 将数字格式化为带人民币符号的字符串，skOff 计算折扣比例并格式化为"折"单位，skStars 通过字符串截取生成星级符号，skBarW 和 skVBarH 分别计算水平条形图和垂直柱状图的宽度/高度百分比。
四、动画驱动的帧函数体系
function skFloatY(w: number, i: number): number {
return Math.sin((w + i * 12) * 0.12) * 6
}
function skPulse(w: number): number {
return 40 + Math.sin(w * 0.15) * 20
}
function skRipple(w: number): number {
return (w % 50) * 2
}
function skShineO(w: number): number {
return ((w * 2) % 240) - 60
}
function skBounceY(w: number, i: number): number {
return -Math.abs(Math.sin((w + i * 10) * 0.1)) * 8
}
function skSwingX(w: number, i: number): number {
return Math.sin((w + i * 8) * 0.08) * 5
}
function skBlink(w: number, i: number): number {
return (Math.floor(w / 8) + i) % 2
}
应用的动效系统由七个帧函数支撑，全部以全局自增的 wave 计数器为时间轴输入。skFloatY 利用正弦函数生成上下浮动位移，通过 i * 12 的索引偏移使同屏多个元素产生相位差，避免整齐划一的机械感。skPulse 生成脉冲缩放值，用于护具页面的呼吸光晕效果。skRipple 通过取模运算生成递增后重置的涟漪半径，模拟水波扩散。skShineO 生成扫描光带的位置偏移，配合 clip(true) 实现卡片高光扫过的微交互效果。
skBounceY 使用 Math.abs 包裹正弦函数生成非对称弹跳轨迹，模拟物理重力的下落感。skSwingX 生成水平摇摆位移，用于轮子图标的轻微旋转暗示滚动方向。skBlink 通过整数除法取整再取模的方式生成 0/1 交替的闪烁信号，用于排行榜排名徽章的脉冲透明度。
这些帧函数共同构成了一个轻量级的动画引擎，通过
setInterval每 60ms 递增wave值并触发@State重渲染，在不需要专业动画框架的前提下，仅凭数学函数就实现了丰富的有机动态效果。这种方案的代价是每帧全量重渲染，但在列表项数量可控的场景下性能表现完全可接受。
五、主入口组件与导航架构
@Entry
@Component
struct SkApp {
@State curTab: number = 0
build() {
Stack() {
Column() {
Row({ space: 10 }) {
Text('🛹').fontSize(26)
Column({ space: 2 }) {
Text('陆冲公园').fontSize(18).fontWeight(FontWeight.Bold).fontColor(SK.text)
Text('SURFSKATE PARK').fontSize(8).fontColor(SK.sub)
}.alignItems(HorizontalAlign.Start)
Column().layoutWeight(1)
Column({ space: 2 }) {
Text('🔔').fontSize(20)
Text('3').fontSize(8).fontColor('#FFFFFF').backgroundColor(SK.primary).borderRadius(6)
.padding({ left: 4, right: 4 })
}.alignItems(HorizontalAlign.Center)
}
.width('100%').height(56).padding({ left: 16, right: 16 }).backgroundColor(SK.card)
Row({ space: 8 }) {
Text('🔍').fontSize(16)
Text('陆冲板 新手套装 限时特惠').fontSize(12).fontColor(SK.sub)
.layoutWeight(1).maxLines(1)
Text('搜索').fontSize(12).fontColor('#FFFFFF').backgroundColor(SK.primary)
.borderRadius(14).padding({ left: 12, right: 12, top: 5, bottom: 5 })
}
.width('92%').height(40).borderRadius(20).backgroundColor('#F5EEDC')
.padding({ left: 14, right: 8 }).margin({ top: 10, bottom: 6 })
Column() {
if (this.curTab === 0) {
SkHomeTab()
} else if (this.curTab === 1) {
SkBoardTab()
} else if (this.curTab === 2) {
SkWheelTab()
} else if (this.curTab === 3) {
SkGuardTab()
} else if (this.curTab === 4) {
SkDeckTab()
} else {
SkMineTab()
}
}.layoutWeight(1).width('100%')
Row() {
ForEach(SK_TABS, (t: SkTab, i: number) => {
Column({ space: 3 }) {
Text(t.icon).fontSize(20)
Text(t.label).fontSize(10).fontColor(this.curTab === i ? SK.primary : SK.sub)
if (this.curTab === i) {
Row().width(14).height(3).borderRadius(2).backgroundColor(SK.accent)
}
}
.justifyContent(FlexAlign.Center)
.layoutWeight(1)
.onClick(() => {
this.curTab = i
})
}, (t: SkTab) => t.label)
}
.width('100%').height(58).backgroundColor(SK.card)
.border({ width: { top: 1 }, color: SK.line })
}.width('100%').height('100%').backgroundColor(SK.bg)
}
}
}
SkApp 是应用的唯一入口组件，由 @Entry 装饰器标记。其核心状态 curTab 是一个 0-5 的整数，控制当前展示的标签页。整个布局由 Stack 包裹一个 Column 构成：顶部是 56dp 高的标题栏，包含品牌 Logo、应用名称、通知铃铛与角标；其下是搜索提示条；中间的 Column 通过 layoutWeight(1) 占据剩余空间，内部使用 if-else 链根据 curTab 值条件渲染对应的子组件；底部是 58dp 高的导航栏，通过 ForEach 遍历 SK_TABS 数组动态生成六个导航项。
导航项的激活态通过三重视觉反馈表达：文字颜色从 SK.sub（灰色）切换为 SK.primary（紫色），并在下方渲染一个 14×3 的青柠绿圆角指示条。onClick 回调将 curTab 赋值为被点击项的索引 i，触发 ArkTS 的状态驱动重渲染，条件链重新评估并挂载对应子组件。这种 if-else 条件渲染方案的优势在于，非激活标签页的组件不参与渲染树，节省了内存和渲染开销。
六、首页组件：Banner、快捷入口与热门榜单
@Component
struct SkHomeTab {
@State wave: number = 0
@State timer: number = 0
@State showSign: boolean = false
@State showCoupon: boolean = false
@State showNewin: boolean = false
@State showCoach: boolean = false
aboutToAppear(): void {
this.timer = setInterval(() => {
this.wave = (this.wave + 1) % 1000
}, 60)
}
aboutToDisappear(): void {
if (this.timer > 0) {
clearInterval(this.timer)
}
}
首页组件 SkHomeTab 管理着五个状态变量：wave 为动画计数器，timer 存储定时器 ID 以便清理，四个 show 布尔值分别控制签到、优惠券、新品首发、教练课程四个弹窗的显隐。aboutToAppear 生命周期钩子在组件挂载时启动 60ms 间隔的定时器，递增 wave 触发帧动画；aboutToDisappear 在卸载时清理定时器，防止内存泄漏。
build() {
Stack() {
Scroll() {
Column({ space: 12 }) {
Stack() {
Column() {
Text('夏季浪感季').fontSize(22).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('全场陆冲板 8 折起 · 满 999 送专业护具')
.fontSize(11).fontColor('#EDE0FF').margin({ top: 6 })
Text('立即抢购').fontSize(12).fontColor(SK.primary).backgroundColor('#FFFFFF')
.borderRadius(14).padding({ left: 16, right: 16, top: 6, bottom: 6 }).margin({ top: 12 })
}
.width('100%').padding({ top: 24, bottom: 24 }).borderRadius(18)
.linearGradient({ angle: 135, colors: [[SK.primary, 0], [SK.glow, 1]] })
.alignItems(HorizontalAlign.Center)
Text('🛹').fontSize(30).translate({ y: skFloatY(this.wave, 0) })
.position({ x: 24, y: 20 }).opacity(0.9)
Text('🏄').fontSize(26).translate({ y: skFloatY(this.wave, 1) })
.position({ x: '78%', y: 68 }).opacity(0.85)
}.width('100%').height(140)
Banner 区域使用 Stack 叠加，底层是一个紫色渐变背景的文本卡片，上层是两个通过 skFloatY 函数驱动的浮动 Emoji 图标。linearGradient 以 135 度角从 SK.primary（电光紫）渐变到 SK.glow（辉光紫），形成视觉纵深。Emoji 通过 translate({ y: ... }) 实现垂直浮动动画，position 绝对定位使其悬浮于 Banner 上方。
Column({ space: 10 }) {
ForEach(skHotTop(), (b: SkBoard, i: number) => {
Row({ space: 10 }) {
Text((i + 1).toString()).fontSize(16).fontWeight(FontWeight.Bold)
.fontColor(i < 3 ? '#FFFFFF' : SK.sub)
.width(26).height(26).borderRadius(13)
.backgroundColor(i === 0 ? '#F43F5E' : (i === 1 ? '#F97316' : (i === 2 ? '#EAB308' : SK.line)))
.textAlign(TextAlign.Center)
Column({ space: 4 }) {
Text(b.name).fontSize(13).fontWeight(FontWeight.Medium).fontColor(SK.text).maxLines(1)
Stack({ alignContent: Alignment.Start }) {
Row().height(8).width('100%').borderRadius(4).backgroundColor(SK.line)
Row().height(8).width(skBarW(b.sale, skMaxHot())).borderRadius(4)
.linearGradient({ angle: 0, colors: [[SK.primary, 0], [SK.glow, 1]] })
}.width('100%')
Text('月销 ' + b.sale + ' 件 · ' + b.brand).fontSize(10).fontColor(SK.sub)
}.layoutWeight(1).alignItems(HorizontalAlign.Start)
Text(skPrice(b.price)).fontSize(13).fontWeight(FontWeight.Bold).fontColor(SK.primary)
}
.width('100%').padding(12).borderRadius(14).backgroundColor(SK.card)
}, (b: SkBoard) => b.name)
}.width('100%')
热门榜单区域调用 skHotTop() 函数获取月销 TOP5 的陆冲板数据，通过 ForEach 渲染列表项。每项左侧是排名徽章，前三名分别使用玫红、橙色、黄色背景，其余为灰色。中间区域是商品名称和月销条形图——一个 Stack 内嵌灰色底条和紫色渐变进度条，进度宽度由 skBarW(b.sale, skMaxHot()) 计算得出，实现数据归一化可视化。右侧是格式化后的价格。
七、陆冲板标签页：价格对比、筛选与 CRUD 全流程
@Component
struct SkBoardTab {
@State wave: number = 0
@State timer: number = 0
@State boards: SkBoard[] = []
@State chip: string = '全部'
@State selIdx: number = 0
@State editIdx: number = 0
@State showDetail: boolean = false
@State showAdd: boolean = false
@State showEdit: boolean = false
@State showDel: boolean = false
@State nName: string = ''
@State nBrand: string = ''
@State nPrice: string = ''
@State nFlex: string = ''
@State eName: string = ''
@State ePrice: string = ''
@State eFlex: string = ''
SkBoardTab 是应用中状态最密集的组件，管理着十六个 @State 变量。其中 boards 是可变商品数组（通过 SK_BOARDS.slice() 创建副本，使得组件内的增删改不影响原始数据），chip 是当前筛选标签，selIdx 和 editIdx 分别记录详情查看和编辑操作的目标索引。四个 show 布尔值控制详情弹窗、上架弹窗、编辑弹窗、删除弹窗的显隐。n 前缀的四个变量是上架表单的输入值，e 前缀的三个变量是编辑表单的输入值。
Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
ForEach(skBoardFilter(this.boards, this.chip), (b: SkBoard, i: number) => {
Column({ space: 6 }) {
Stack() {
Column().width(64).height(64).borderRadius(32)
.linearGradient({ angle: 135, colors: [['#F5EEDC', 0], ['#F0E4B8', 1]] })
Text(b.icon).fontSize(30)
.translate({ y: skBounceY(this.wave, i) })
}.alignContent(Alignment.Center)
Text(b.name).fontSize(12).fontWeight(FontWeight.Medium).fontColor(SK.text).maxLines(1)
Text(b.brand + ' · ' + b.shape).fontSize(9).fontColor(SK.sub).maxLines(1)
Text(skStars(b.stars)).fontSize(10).fontColor('#F59E0B')
Row({ space: 6 }) {
Text(skPrice(b.price)).fontSize(13).fontWeight(FontWeight.Bold).fontColor(SK.primary)
Text(skPrice(b.orig)).fontSize(9).fontColor(SK.sub)
.decoration({ type: TextDecorationType.LineThrough })
}
Text('硬度 ' + b.flex + ' · 月销 ' + b.sale).fontSize(9).fontColor(SK.sub)
}
.width('48.5%')
.padding(12).borderRadius(16).backgroundColor(SK.card)
.alignItems(HorizontalAlign.Center)
.onClick(() => {
this.selIdx = skFindBoardIdx(this.boards, b.name)
this.showDetail = true
})
}, (b: SkBoard) => b.name)
}.width('100%')
商品列表使用 Flex 布局配合 FlexWrap.Wrap 实现自动换行的两列瀑布流网格，SpaceBetween 对齐方式使两项之间均匀分布间距。每项宽度设为 48.5%，留出 3% 的间隙。商品图标使用 skBounceY 动画函数实现弹跳效果，原价文本通过 TextDecorationType.LineThrough 添加删除线。点击列表项时，通过 skFindBoardIdx 线性查找目标商品在数组中的索引，赋值给 selIdx 并触发详情弹窗。
上架新品的表单弹窗通过 TextInput 组件收集用户输入，每个输入框通过 onChange 回调将值同步到对应的 @State 变量。提交时构造 SkBoard 对象并执行数据校验：
.onClick(() => {
let it: SkBoard = {
name: this.nName === '' ? '神秘新板' : this.nName,
brand: this.nBrand === '' ? '滑板大师' : this.nBrand,
shape: '翘头板',
price: isNaN(parseInt(this.nPrice)) ? 999 : parseInt(this.nPrice),
orig: isNaN(parseInt(this.nPrice)) ? 1299 : parseInt(this.nPrice) + 300,
sale: 0,
flex: isNaN(parseInt(this.nFlex)) ? 3 : parseInt(this.nFlex),
stars: 5,
icon: '🆕'
}
if (it.price > 0 && it.flex >= 1 && it.flex <= 10) {
this.boards.push(it)
this.showAdd = false
}
})
上架逻辑包含了完整的默认值兜底策略：空名称时使用"神秘新板"，空品牌时使用"滑板大师"，非法价格时使用 999，非法硬度时使用 3。校验条件确保价格大于 0 且硬度在 1-10 范围内，通过后执行 push 追加到 boards 数组并关闭弹窗。编辑操作类似，但使用索引赋值 this.boards[this.editIdx] = it 替换目标项。删除操作通过 splice 移除指定索引项。
八、轮子标签页：硬度光谱与销量柱状图
Column({ space: 10 }) {
Row() {
Text('🧪 硬度光谱对比').fontSize(15).fontWeight(FontWeight.Bold).fontColor(SK.text)
Column().layoutWeight(1)
Text('软 ← → 硬').fontSize(9).fontColor(SK.sub)
}.width('100%')
Column({ space: 8 }) {
ForEach(skWheelTop(), (w: SkWheel, i: number) => {
Row({ space: 8 }) {
Text(w.name).fontSize(10).fontColor(SK.text).width(96).maxLines(1)
Stack({ alignContent: Alignment.Start }) {
Row().height(14).width('100%').borderRadius(7).backgroundColor(SK.line)
Row().height(14).width(skDuroW(w.duro)).borderRadius(7)
.linearGradient({ angle: 0, colors: [['#FBBF24', 0], ['#F43F5E', 1]] })
}.layoutWeight(1)
Text(w.duro + 'A').fontSize(10).fontWeight(FontWeight.Bold).fontColor('#E11D48')
.width(36).textAlign(TextAlign.End)
}.width('100%')
}, (w: SkWheel) => w.name)
}.width('100%').padding(12).borderRadius(14).backgroundColor(SK.card)
}.width('100%')
轮子标签页的核心可视化是"硬度光谱对比"——一个水平条形图，每行的进度条宽度由 skDuroW(w.duro) 计算，该函数将 70-90A 的硬度值映射为 0%-100% 的宽度比例。进度条使用从琥珀黄（#FBBF24）到玫红（#F43F5E）的渐变，直觉地传达"越硬越红"的语义。右侧显示 duro + 'A' 的硬度数值标签。
Row({ space: 10 }).alignItems(VerticalAlign.Bottom).height(110) {
ForEach(skWheelFilter(this.wheels, this.chip), (w: SkWheel, i: number) => {
Column({ space: 4 }) {
Column().width(20).height(skVBarH(w.sale, skMaxWheelSale())).borderRadius(6)
.linearGradient({ angle: 180, colors: [[SK.primary, 0], [SK.glow, 1]] })
.translate({ y: skBounceY(this.wave, i) })
Text(w.size + 'mm').fontSize(8).fontColor(SK.sub)
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
}, (w: SkWheel) => w.name)
}.width('100%').padding(12).borderRadius(14).backgroundColor(SK.card)
销量柱状图采用 Row 容器配 VerticalAlign.Bottom 底部对齐，使每根柱子从底部向上生长。柱子高度由 skVBarH 函数根据销量和最大销量的比值计算，最低 6dp、最高 90dp。每根柱子叠加了 skBounceY 弹跳动画，使整个图表产生持续的微动感。柱子下方标注轮子直径尺寸。
九、护具标签页：脉冲光晕与防护色系
Stack() {
Column() {
Text('🛡 安全部落').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('护具全场满 300 减 50 · 速降系列上新').fontSize(10)
.fontColor('#F0FDE4').margin({ top: 4 })
}
.width('100%').padding({ top: 16, bottom: 16 }).borderRadius(16)
.linearGradient({ angle: 135, colors: [['#3F6212', 0], ['#84CC16', 1]] })
.alignItems(HorizontalAlign.Center)
Row()
.width(skPulse(this.wave)).height(skPulse(this.wave))
.borderRadius(skPulse(this.wave) / 2)
.backgroundColor('rgba(132, 204, 22, 0.15)')
.position({ x: '80%', y: 8 })
}.width('100%').height(84)
护具标签页的顶部 Banner 使用 Stack 叠加了一个动态光晕元素。这个 Row 的宽高和圆角全部由 skPulse(this.wave) 函数驱动，该函数返回 20-60 之间正弦波动的数值，使光晕产生持续呼吸式的缩放。半透明的青柠绿背景配合 position 绝对定位，使光晕悬浮于 Banner 右上方，营造出防护能量的视觉氛围。
护具的颜色体系通过 skPartColor 函数实现按部位着色：头盔映射为紫色、护膝为橙色、护肘为天蓝、护掌为粉色、护背为绿色。skLevelColor 将级别映射为颜色：专业级为紫色、进阶级为橙色、入门级为青柠绿。这些颜色函数在排行榜徽章、详情页标签、柱状图柱体等多处复用，保证了视觉编码的一致性。
十、板面标签页：宽度对比与涟漪动效
Stack() {
Column({ space: 8 }) {
Row({ space: 12 }) {
Stack() {
Column().width(64).height(40).borderRadius(12)
.linearGradient({ angle: 135, colors: [['#FDE68A', 0], ['#F59E0B', 1]] })
Text(d.icon).fontSize(24)
.translate({ x: skSwingX(this.wave, i) })
}.alignContent(Alignment.Center)
// ...商品信息
}.width('100%')
}
.width('100%').padding(14).borderRadius(18).backgroundColor(SK.card)
.border({ width: 1, color: SK.line })
Row()
.width(skRipple(this.wave)).height(skRipple(this.wave))
.borderRadius(skRipple(this.wave) / 2)
.backgroundColor('rgba(124, 58, 237, 0.06)')
.position({ x: '84%', y: 10 })
}.width('100%').alignContent(Alignment.TopStart)
板面列表项使用 Stack 叠加了一个涟漪元素，其尺寸由 skRipple 函数驱动——该函数返回 (wave % 50) * 2，即从 0 递增到 98 后突然归零循环。半透明紫色背景的圆形涟漪在列表项右上方周期性扩散，为静态卡片注入了微妙的动感。板面图标的 skSwingX 水平摇摆暗示了板面的横向运动属性。
板面宽度对比可视化使用 skWidthW 函数将英寸宽度（7.5-8.5）映射为百分比进度条宽度，渐变从青柠绿到深绿色，传达"越宽越绿"的直觉。
十一、个人中心：扫光特效与消费趋势图
Stack() {
Column({ space: 6 }) {
Row({ space: 10 }) {
Text('🛹').fontSize(34)
Column({ space: 3 }) {
Text(this.nick).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('ID: SK888666 · 银牌滑手').fontSize(10).fontColor('#EDE0FF')
}.alignItems(HorizontalAlign.Start)
Column().layoutWeight(1)
Text('Lv.6').fontSize(12).fontColor(SK.primary).backgroundColor('#FFFFFF')
.borderRadius(10).padding({ left: 8, right: 8, top: 3, bottom: 3 })
}.width('100%')
// ...
}
.width('100%').padding(18).borderRadius(18)
.linearGradient({ angle: 135, colors: [[SK.primary, 0], [SK.glow, 1]] })
Column()
.width(46).height(140).borderRadius(23)
.backgroundColor('rgba(255, 255, 255, 0.22)').rotate({ angle: 24 })
.translate({ x: skShineO(this.wave) })
.position({ x: -30, y: 0 })
}.width('100%').height(140).clip(true)
个人中心的用户卡片通过 Stack 叠加了一个扫光特效层。这是一个白色半透明的 Column，宽 46dp、高 140dp，旋转 24 度，通过 skShineO 函数驱动的 translate 属性实现水平位移。skShineO 返回 ((wave * 2) % 240) - 60，使光带从 -60 平移到 180 后重置。clip(true) 裁剪确保光带不会溢出卡片边界，营造出光泽扫过的高级质感。
消费趋势图使用 ForEach 遍历 SK_MONTHS 数组渲染六个月度柱状图，每根柱子高度由 skVBarH 计算并使用紫到辉光紫的垂直渐变。柱顶标注金额数值，柱底标注月份。
技术点对比表格
| 技术维度 | 实现方案 | 设计优势 | 适用场景 |
|---|---|---|---|
| 主题管理 | SkTheme 接口 + SK 常量对象 | 色彩集中管控，支持一键换肤 | 全局色彩引用 |
| 数据过滤 | 纯函数 skXxxFilter(arr, tag) | 可独立测试，不修改原数组 | 筛选标签联动列表 |
| 动画引擎 | setInterval + wave 计数器 + 数学函数 | 无需动画框架，轻量灵活 | 浮动/弹跳/脉冲/涟漪 |
| 布局策略 | Flex + FlexWrap.Wrap 两列网格 | 自动换行适配异构数据 | 商品卡片网格 |
| 进度条可视化 | Stack 叠加底条+进度条 | 单组件实现对比图 | 价格/硬度/销量对比 |
| 弹窗管理 | @State 布尔值 + if 条件渲染 | 多弹窗互斥控制简单 | 详情/上架/编辑/删除 |
| 数据校验 | isNaN + 范围判断 + 默认值兜底 | 防止非法输入崩溃 | 表单提交前校验 |
| CRUD 操作 | push/splice/索引赋值 | 内存态即时反映 | 商品全生命周期管理 |
| 扫光特效 | 半透明层 + rotate + translate + clip | 高级微交互质感 | 会员卡/品牌区域 |
| 柱状图 | Row + VerticalAlign.Bottom + 动态高度 | 原生组件实现数据图表 | 月度消费/销量展示 |
安装DevEco Studio程序
选择目标安装目录：
设置环境变量，但是需要重启一下：
新建一个空白模板：
设置API为24的模板项目：
初始化项目，自动下载相关依赖：
完整代码：
interface SkTheme {
bg: string
primary: string
accent: string
card: string
text: string
sub: string
line: string
glow: string
}
const SK: SkTheme = {
bg: '#FFFBE8',
primary: '#7C3AED',
accent: '#84CC16',
card: '#FFFFFF',
text: '#2D2438',
sub: '#8A7FA3',
line: '#F0E4B8',
glow: '#C084FC'
}
interface SkBoard {
name: string
brand: string
shape: string
price: number
orig: number
sale: number
flex: number
stars: number
icon: string
}
const SK_BOARDS: SkBoard[] = [
{ name: '浪感陆冲板 32"', brand: 'YOW', shape: '翘头板', price: 1280, orig: 1580, sale: 486, flex: 3, stars: 5, icon: '🛹' },
{ name: '冲浪模拟器 V4', brand: 'Smoothstar', shape: '深弧板', price: 1680, orig: 1980, sale: 352, flex: 4, stars: 5, icon: '🏄' },
{ name: '雕刻经典 C7', brand: 'Carver', shape: '平宽板', price: 1450, orig: 1699, sale: 421, flex: 5, stars: 4, icon: '🌊' },
{ name: '新手入门套装', brand: '滑板大师', shape: '翘头板', price: 599, orig: 799, sale: 892, flex: 2, stars: 4, icon: '🛹' },
{ name: '夜光荧光板面', brand: 'Penny', shape: '小鱼板', price: 459, orig: 599, sale: 638, flex: 2, stars: 3, icon: '✨' },
{ name: '碳纤维竞速板', brand: 'Waterborne', shape: '平宽板', price: 2199, orig: 2599, sale: 128, flex: 6, stars: 5, icon: '⚡' },
{ name: '少女心糖果板', brand: '滑板大师', shape: '小鱼板', price: 529, orig: 699, sale: 515, flex: 2, stars: 4, icon: '🍬' },
{ name: '全地形越野板', brand: 'Carver', shape: '深弧板', price: 1899, orig: 2199, sale: 203, flex: 5, stars: 5, icon: '🏔' },
{ name: '枫木长板 42"', brand: 'Loaded', shape: '长巡航板', price: 1750, orig: 2050, sale: 176, flex: 4, stars: 4, icon: '🍂' },
{ name: '极简白板 28"', brand: 'Penny', shape: '小鱼板', price: 399, orig: 499, sale: 744, flex: 1, stars: 3, icon: '🤍' }
]
interface SkWheel {
name: string
brand: string
duro: number
size: number
price: number
sale: number
icon: string
}
const SK_WHEELS: SkWheel[] = [
{ name: '公路巡航轮 70mm', brand: 'Orangatang', duro: 80, size: 70, price: 389, sale: 322, icon: '🟠' },
{ name: '缓震软轮 66mm', brand: 'Orangatang', duro: 77, size: 66, price: 359, sale: 289, icon: '🍊' },
{ name: '抓地竞速轮 72mm', brand: 'Seismic', duro: 82, size: 72, price: 429, sale: 198, icon: '🔵' },
{ name: '荧光夜光轮 65mm', brand: '滑板大师', duro: 78, size: 65, price: 299, sale: 456, icon: '🌙' },
{ name: '白刃硬轮 60mm', brand: 'Seismic', duro: 88, size: 60, price: 319, sale: 156, icon: '⚪' },
{ name: '奶油糖果轮 62mm', brand: 'Penny', duro: 79, size: 62, price: 259, sale: 512, icon: '🍬' },
{ name: '全地形越野轮 75mm', brand: 'Waterborne', duro: 81, size: 75, price: 469, sale: 134, icon: '🟢' },
{ name: '渐变紫雾轮 68mm', brand: '滑板大师', duro: 83, size: 68, price: 339, sale: 241, icon: '🟣' }
]
interface SkGuard {
name: string
brand: string
part: string
price: number
sale: number
level: string
icon: string
}
const SK_GUARDS: SkGuard[] = [
{ name: '专业防撞护膝 Pro', brand: 'G-Form', part: '护膝', price: 399, sale: 421, level: '专业级', icon: '🦵' },
{ name: '轻量透气护肘', brand: '187 Killer', part: '护肘', price: 289, sale: 365, level: '进阶级', icon: '💪' },
{ name: '一体成型头盔 MIPS', brand: 'Triple8', part: '头盔', price: 599, sale: 298, level: '专业级', icon: '⛑' },
{ name: '入门三件套', brand: '滑板大师', part: '护膝', price: 159, sale: 743, level: '入门级', icon: '🛡' },
{ name: '硅胶护掌加厚', brand: '187 Killer', part: '护掌', price: 189, sale: 386, level: '进阶级', icon: '🖐' },
{ name: '夜骑反光头盔', brand: 'Triple8', part: '头盔', price: 499, sale: 254, level: '进阶级', icon: '🪖' },
{ name: '儿童卡通护具组', brand: '滑板大师', part: '护膝', price: 139, sale: 612, level: '入门级', icon: '🎠' },
{ name: '速降竞速护背', brand: 'G-Form', part: '护背', price: 699, sale: 98, level: '专业级', icon: '🦺' }
]
interface SkDeck {
name: string
brand: string
width: number
price: number
sale: number
concave: string
icon: string
}
const SK_DECKS: SkDeck[] = [
{ name: '枫木经典 8.0"', brand: '滑板大师', width: 8.0, price: 299, sale: 421, concave: '中凹', icon: '🪵' },
{ name: '街头涂鸦 8.25"', brand: 'Baker', width: 8.25, price: 359, sale: 377, concave: '深凹', icon: '🎨' },
{ name: '极简黑白 8.5"', brand: 'Primitive', width: 8.5, price: 389, sale: 288, concave: '中凹', icon: '🖤' },
{ name: '糖果渐变 8.0"', brand: 'Girl', width: 8.0, price: 329, sale: 344, concave: '浅凹', icon: '🌈' },
{ name: '碳纤维一体 8.4"', brand: 'Liberace', width: 8.4, price: 699, sale: 121, concave: '深凹', icon: '⚫' },
{ name: '复古波普 8.2"', brand: 'Santa Cruz', width: 8.2, price: 419, sale: 256, concave: '浅凹', icon: '🎪' }
]
interface SkOrder {
id: string
name: string
state: string
price: number
date: string
icon: string
}
const SK_ORDERS: SkOrder[] = [
{ id: 'SK20260801', name: '浪感陆冲板 32"', state: '已完成', price: 1280, date: '08-01', icon: '🛹' },
{ id: 'SK20260725', name: '荧光夜光轮 65mm', state: '待收货', price: 299, date: '07-25', icon: '🌙' },
{ id: 'SK20260718', name: '专业防撞护膝 Pro', state: '已发货', price: 399, date: '07-18', icon: '🦵' },
{ id: 'SK20260702', name: '枫木经典 8.0"', state: '已完成', price: 299, date: '07-02', icon: '🪵' },
{ id: 'SK20260621', name: '一体成型头盔 MIPS', state: '已取消', price: 599, date: '06-21', icon: '⛑' },
{ id: 'SK20260608', name: '少女心糖果板', state: '已完成', price: 529, date: '06-08', icon: '🍬' }
]
interface SkFav {
name: string
price: number
tag: string
icon: string
}
const SK_FAVS: SkFav[] = [
{ name: '碳纤维竞速板', price: 2199, tag: '竞速', icon: '⚡' },
{ name: '抓地竞速轮 72mm', price: 429, tag: '抓地', icon: '🔵' },
{ name: '速降竞速护背', price: 699, tag: '速降', icon: '🦺' },
{ name: '街头涂鸦 8.25"', price: 359, tag: '街头', icon: '🎨' },
{ name: '冲浪模拟器 V4', price: 1680, tag: '浪感', icon: '🏄' },
{ name: '全地形越野轮 75mm', price: 469, tag: '越野', icon: '🟢' }
]
interface SkMonth {
m: string
v: number
}
const SK_MONTHS: SkMonth[] = [
{ m: '2月', v: 920 },
{ m: '3月', v: 1350 },
{ m: '4月', v: 780 },
{ m: '5月', v: 1680 },
{ m: '6月', v: 2140 },
{ m: '7月', v: 1490 }
]
interface SkTab {
icon: string
label: string
}
const SK_TABS: SkTab[] = [
{ icon: '🏠', label: '首页' },
{ icon: '🛹', label: '陆冲板' },
{ icon: '⭕', label: '轮子' },
{ icon: '🛡', label: '护具' },
{ icon: '🪵', label: '板面' },
{ icon: '👤', label: '我的' }
]
function skPrice(v: number): string {
return '¥' + v.toFixed(0)
}
function skOff(p: number, o: number): string {
return (Math.round(p / o * 100) / 10).toFixed(1) + '折'
}
function skStars(n: number): string {
return '★★★★★'.substring(0, Math.max(0, Math.min(5, n)))
}
function skBarW(v: number, m: number): string {
return Math.min(100, Math.round(v / Math.max(1, m) * 100)) + '%'
}
function skDuroW(d: number): string {
return Math.min(100, Math.round((d - 70) / 20 * 100)) + '%'
}
function skWidthW(w: number): string {
return Math.min(100, Math.round(w / 8.5 * 100)) + '%'
}
function skVBarH(v: number, m: number): number {
return Math.max(6, Math.round(v / Math.max(1, m) * 90))
}
function skStatusColor(s: string): string {
if (s === '已完成') {
return SK.accent
}
if (s === '待收货') {
return '#F59E0B'
}
if (s === '已发货') {
return '#3B82F6'
}
return '#9CA3AF'
}
function skPartColor(p: string): string {
if (p === '头盔') {
return SK.primary
}
if (p === '护膝') {
return '#F97316'
}
if (p === '护肘') {
return '#0EA5E9'
}
if (p === '护掌') {
return '#EC4899'
}
return '#10B981'
}
function skLevelColor(l: string): string {
if (l === '专业级') {
return SK.primary
}
if (l === '进阶级') {
return '#F97316'
}
return SK.accent
}
function skShapeColor(s: string): string {
if (s === '翘头板') {
return SK.primary
}
if (s === '深弧板') {
return '#0EA5E9'
}
if (s === '小鱼板') {
return '#EC4899'
}
if (s === '平宽板') {
return '#F97316'
}
return SK.accent
}
function skBoardFilter(arr: SkBoard[], t: string): SkBoard[] {
let r: SkBoard[] = []
for (let i = 0; i < arr.length; i++) {
if (t === '全部' || arr[i].shape === t) {
r.push(arr[i])
}
}
return r
}
function skWheelFilter(arr: SkWheel[], t: string): SkWheel[] {
let r: SkWheel[] = []
for (let i = 0; i < arr.length; i++) {
if (t === '全部' || arr[i].duro <= parseInt(t.replace(/[^0-9]/g, ''))) {
r.push(arr[i])
}
}
return r
}
function skGuardFilter(arr: SkGuard[], t: string): SkGuard[] {
let r: SkGuard[] = []
for (let i = 0; i < arr.length; i++) {
if (t === '全部' || arr[i].part === t) {
r.push(arr[i])
}
}
return r
}
function skDeckFilter(arr: SkDeck[], t: string): SkDeck[] {
let r: SkDeck[] = []
for (let i = 0; i < arr.length; i++) {
if (t === '全部' || arr[i].concave === t) {
r.push(arr[i])
}
}
return r
}
function skBoardTop(): SkBoard[] {
let r: SkBoard[] = SK_BOARDS.slice()
r.sort((a: SkBoard, b: SkBoard) => b.price - a.price)
return r.slice(0, 6)
}
function skWheelTop(): SkWheel[] {
let r: SkWheel[] = SK_WHEELS.slice()
r.sort((a: SkWheel, b: SkWheel) => b.sale - a.sale)
return r.slice(0, 6)
}
function skGuardTop(): SkGuard[] {
let r: SkGuard[] = SK_GUARDS.slice()
r.sort((a: SkGuard, b: SkGuard) => b.sale - a.sale)
return r
}
function skDeckTop(): SkDeck[] {
let r: SkDeck[] = SK_DECKS.slice()
r.sort((a: SkDeck, b: SkDeck) => b.sale - a.sale)
return r
}
function skHotTop(): SkBoard[] {
let r: SkBoard[] = SK_BOARDS.slice()
r.sort((a: SkBoard, b: SkBoard) => b.sale - a.sale)
return r.slice(0, 5)
}
function skMaxPrice(): number {
let m: number = 1
for (let i = 0; i < SK_BOARDS.length; i++) {
if (SK_BOARDS[i].price > m) {
m = SK_BOARDS[i].price
}
}
return m
}
function skMaxWheelSale(): number {
let m: number = 1
for (let i = 0; i < SK_WHEELS.length; i++) {
if (SK_WHEELS[i].sale > m) {
m = SK_WHEELS[i].sale
}
}
return m
}
function skMaxGuardSale(): number {
let m: number = 1
for (let i = 0; i < SK_GUARDS.length; i++) {
if (SK_GUARDS[i].sale > m) {
m = SK_GUARDS[i].sale
}
}
return m
}
function skMaxDeckSale(): number {
let m: number = 1
for (let i = 0; i < SK_DECKS.length; i++) {
if (SK_DECKS[i].sale > m) {
m = SK_DECKS[i].sale
}
}
return m
}
function skMaxHot(): number {
let m: number = 1
for (let i = 0; i < SK_BOARDS.length; i++) {
if (SK_BOARDS[i].sale > m) {
m = SK_BOARDS[i].sale
}
}
return m
}
function skMaxMonth(): number {
let m: number = 1
for (let i = 0; i < SK_MONTHS.length; i++) {
if (SK_MONTHS[i].v > m) {
m = SK_MONTHS[i].v
}
}
return m
}
function skBoardShapeChips(): string[] {
return ['全部', '翘头板', '深弧板', '小鱼板', '平宽板', '长巡航板']
}
function skWheelDuroChips(): string[] {
return ['全部', '软轮≤78', '中硬80', '硬轮83', '超硬88']
}
function skGuardPartChips(): string[] {
return ['全部', '护膝', '护肘', '头盔', '护掌', '护背']
}
function skDeckConcaveChips(): string[] {
return ['全部', '浅凹', '中凹', '深凹']
}
function skFloatY(w: number, i: number): number {
return Math.sin((w + i * 12) * 0.12) * 6
}
function skPulse(w: number): number {
return 40 + Math.sin(w * 0.15) * 20
}
function skRipple(w: number): number {
return (w % 50) * 2
}
function skShineO(w: number): number {
return ((w * 2) % 240) - 60
}
function skBlink(w: number, i: number): number {
return (Math.floor(w / 8) + i) % 2
}
function skBounceY(w: number, i: number): number {
return -Math.abs(Math.sin((w + i * 10) * 0.1)) * 8
}
function skSwingX(w: number, i: number): number {
return Math.sin((w + i * 8) * 0.08) * 5
}
function skFindBoardIdx(arr: SkBoard[], n: string): number {
let r: number = -1
for (let i = 0; i < arr.length; i++) {
if (arr[i].name === n) {
r = i
}
}
return r
}
function skFindWheelIdx(arr: SkWheel[], n: string): number {
let r: number = -1
for (let i = 0; i < arr.length; i++) {
if (arr[i].name === n) {
r = i
}
}
return r
}
function skFindGuardIdx(arr: SkGuard[], n: string): number {
let r: number = -1
for (let i = 0; i < arr.length; i++) {
if (arr[i].name === n) {
r = i
}
}
return r
}
})
}.width('82%').padding(20).borderRadius(18).backgroundColor(SK.card).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%')
}
}.width('100%').height('100%')
}
@Builder
modalOverlay() {
Column()
.width('100%').height('100%')
.backgroundColor('rgba(20, 10, 40, 0.5)')
.position({ x: 0, y: 0 }).zIndex(999)
.onClick(() => {
this.showNick = false
this.showAddr = false
this.showAbout = false
})
}
}
总结
本文从架构分层、数据模型、纯函数处理层、帧动画引擎、组件化设计、CRUD 全流程、数据可视化、动效微交互等维度，系统性地剖析了基于 HarmonyOS ArkTS 构建的陆冲滑板公园电商应用。该应用的核心架构思想是将数据处理与视觉表现严格分离——全部过滤器、排序器、格式化器和动画函数均以全局纯函数形式存在，组件仅负责状态持有和视图编排，这种"函数式数据层 + 声明式视图层"的二元架构在中小规模应用中展现了极高的开发效率和可维护性。
应用的动效系统尤为值得关注。通过一个全局递增的 wave 计数器和七个数学函数（正弦浮动、绝对值弹跳、取模涟漪、脉冲缩放、扫描偏移、闪烁取整、水平摇摆），在没有引入任何专业动画库的前提下，实现了覆盖 Banner 浮动、图标弹跳、光晕脉冲、涟漪扩散、扫光特效、徽章闪烁等六种有机动态效果。虽然每帧全量重渲染的方案在列表项超过数十个时可能面临性能瓶颈，但在当前品类的数据规模下表现完全可接受，体现了"够用即好"的工程务实主义。
CRUD 全流程的实现展示了 ArkTS 状态驱动范式的简洁表达力。十六个 @State 变量管理着陆冲板标签页的完整数据生命周期，从筛选标签联动到详情查看、从上架表单收集到编辑回填、从删除确认到数组 splice 移除，全部交互通过布尔值条件渲染弹窗实现，无需路由跳转或状态机库。modalOverlay 复用为每个组件提供了统一的遮罩层，点击遮罩关闭所有弹窗的设计保证了用户随时可退出的操作安全感。这种"重状态、轻路由"的方案在标签页式应用中尤为高效，避免了多页面跳转的上下文切换成本。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
7
0- 0
已为社区贡献8条内容
所有评论(0)