鸿蒙应用开发：Stack堆叠组件实战——实现微信消息角标效果

一、引言

在鸿蒙应用开发中，布局是构建用户界面的基础。Stack（堆叠）组件是一种非常实用的布局容器，它允许子组件按照顺序层叠排列，后一个子组件会覆盖在前一个子组件之上。这种特性非常适合实现一些特殊的UI效果，比如在应用图标上显示消息角标。

本文将以实现微信来信息后，在应用图标上显示数字角标为例，带你掌握Stack组件的核心用法。

二、Stack堆叠组件基础

2.1 什么是Stack组件

Stack组件是鸿蒙ArkUI框架提供的一种容器组件，它采用堆叠的方式排列子组件。简单来说，就是先放入的子组件在底层，后放入的子组件在上层，形成类似“叠罗汉”的效果。

2.2 基本语法

Stack({alignContent:Alignment}){// 子组件}

• alignContent：可选参数，用于设置所有子组件在容器内的对齐方式，默认为Alignment.Center。

2.3 对齐方式

Stack组件支持多种对齐方式，常用的包括：

三、实战：实现微信消息角标

3.1 效果分析

微信收到新消息时，应用图标右上角会显示一个红色圆形角标，里面带有未读消息数量。这个效果用Stack组件实现非常合适：

• 底层：放置应用图标（图片组件）
• 上层：放置角标（文本组件，带红色背景）

3.2 完整代码实现

@Entry@Componentstruct MessageBadgeDemo{// 模拟未读消息数量@StateunreadCount:number=5build(){Column(){// 堆叠容器：图标 + 角标Stack({alignContent:Alignment.TopEnd}){// 底层：应用图标Image($r('app.media.startIcon')).width(80).height(80).borderRadius(16)// 上层：消息角标if(this.unreadCount>0){Text(this.unreadCount>99?'99+':this.unreadCount.toString()).fontSize(12).fontColor(Color.White).backgroundColor(Color.Red).borderRadius(10).width(20).height(20).textAlign(TextAlign.Center).position({x:60,y:-5})// 微调角标位置}}.width(80).height(80)// 显示未读数量控制按钮Row({space:30}){Button('+1').onClick(()=>{this.unreadCount++}).width("30%")Button('清零').onClick(()=>{this.unreadCount=0}).width("30%")}.margin({top:20})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}}

3.3 代码解析

1. Stack({ alignContent: Alignment.TopEnd })：设置堆叠容器为顶端尾部对齐，这样角标就会出现在图标的右上角。

2. 底层图片：使用Image组件加载应用图标，并设置宽高和圆角。

3. 上层角标：使用Text组件显示未读数量，通过backgroundColor(Color.Red)设置红色背景，borderRadius(10)实现圆形效果。

4. 条件渲染：通过if (this.unreadCount > 0)控制，当未读数为0时隐藏角标。

5. 数量上限处理：当未读数超过99时，显示99+，避免角标显示不下。

3.4 效果展示

运行上述代码，你会看到：

• 应用图标右上角显示红色圆形角标，里面显示数字5
• 点击+1按钮，角标数字递增
• 点击清零按钮，角标消失

四、进阶技巧

4.1 使用position精确控制位置

除了通过alignContent控制整体对齐，还可以使用position属性对单个子组件进行微调：

Text('3').position({x:55,y:-8})// 相对于父容器左上角的偏移

4.2 支持多种角标样式

// 红点模式（仅提示，不显示数字）Circle().width(10).height(10).fill(Color.Red).position({x:65,y:-3})// 带边框的角标Text('新消息').fontSize(10).fontColor(Color.White).backgroundColor(Color.Red).border({width:1,color:Color.White}).borderRadius(8).padding({left:6,right:6,top:2,bottom:2})

五、总结

通过本文的实战，我们学习了：

1. Stack堆叠组件的基本用法和对齐方式
2. 如何利用Stack实现应用图标消息角标效果
3. 条件渲染和数量上限处理技巧
4. 进阶的样式定制方法

Stack组件在鸿蒙开发中应用广泛，除了角标效果，还可以用于实现悬浮按钮、遮罩层、卡片叠加等场景。掌握好这个组件，能让你的UI开发更加得心应手。

六、思考与练习

1. 尝试实现一个带“红点”和“数字”两种模式的角标组件
2. 如何让角标支持动画效果（如缩放出现）？
3. 思考Stack和Flex布局在什么场景下配合使用效果更好？