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

文章目录一、引言二、Stack堆叠组件基础2.1 什么是Stack组件2.2 基本语法2.3 对齐方式三、实战实现微信消息角标3.1 效果分析3.2 完整代码实现3.3 代码解析3.4 效果展示四、进阶技巧4.1 使用position精确控制位置4.2 支持多种角标样式五、总结六、思考与练习一、引言在鸿蒙应用开发中布局是构建用户界面的基础。Stack堆叠组件是一种非常实用的布局容器它允许子组件按照顺序层叠排列后一个子组件会覆盖在前一个子组件之上。这种特性非常适合实现一些特殊的UI效果比如在应用图标上显示消息角标。本文将以实现微信来信息后在应用图标上显示数字角标为例带你掌握Stack组件的核心用法。二、Stack堆叠组件基础2.1 什么是Stack组件Stack组件是鸿蒙ArkUI框架提供的一种容器组件它采用堆叠的方式排列子组件。简单来说就是先放入的子组件在底层后放入的子组件在上层形成类似“叠罗汉”的效果。2.2 基本语法Stack({alignContent:Alignment}){// 子组件}alignContent可选参数用于设置所有子组件在容器内的对齐方式默认为Alignment.Center。2.3 对齐方式Stack组件支持多种对齐方式常用的包括对齐方式说明Alignment.TopStart顶部起始左上Alignment.TopCenter顶部居中Alignment.TopEnd顶部尾部右上Alignment.Center居中默认Alignment.BottomStart底部起始左下Alignment.BottomEnd底部尾部右下三、实战实现微信消息角标3.1 效果分析微信收到新消息时应用图标右上角会显示一个红色圆形角标里面带有未读消息数量。这个效果用Stack组件实现非常合适底层放置应用图标图片组件上层放置角标文本组件带红色背景3.2 完整代码实现EntryComponentstruct MessageBadgeDemo{// 模拟未读消息数量StateunreadCount:number5build(){Column(){// 堆叠容器图标 角标Stack({alignContent:Alignment.TopEnd}){// 底层应用图标Image($r(app.media.startIcon)).width(80).height(80).borderRadius(16)// 上层消息角标if(this.unreadCount0){Text(this.unreadCount99?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.unreadCount0}).width(30%)}.margin({top:20})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}3.3 代码解析Stack({ alignContent: Alignment.TopEnd })设置堆叠容器为顶端尾部对齐这样角标就会出现在图标的右上角。底层图片使用Image组件加载应用图标并设置宽高和圆角。上层角标使用Text组件显示未读数量通过backgroundColor(Color.Red)设置红色背景borderRadius(10)实现圆形效果。条件渲染通过if (this.unreadCount 0)控制当未读数为0时隐藏角标。数量上限处理当未读数超过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})五、总结通过本文的实战我们学习了Stack堆叠组件的基本用法和对齐方式如何利用Stack实现应用图标消息角标效果条件渲染和数量上限处理技巧进阶的样式定制方法Stack组件在鸿蒙开发中应用广泛除了角标效果还可以用于实现悬浮按钮、遮罩层、卡片叠加等场景。掌握好这个组件能让你的UI开发更加得心应手。六、思考与练习尝试实现一个带“红点”和“数字”两种模式的角标组件如何让角标支持动画效果如缩放出现思考Stack和Flex布局在什么场景下配合使用效果更好