HarmonyOS6 ArkTS Stack 容器使用文档

文章目录一、Stack 容器概述二、接口定义参数说明三、核心属性1. alignContent2. 子组件独立 align四、完整可运行代码不变动你提供的版本五、代码功能说明1. 基础 Stack默认居中2. 统一对齐方式3. 子组件独立对齐4. 实用场景图片 角标5. Stack 嵌套八、总结一、Stack 容器概述Stack是 HarmonyOS ArkTS 中的堆叠布局容器所有子组件会按书写顺序层叠显示后写的组件覆盖在先写的组件之上。布局特点层叠堆叠、覆盖显示核心能力统一对齐、单独对齐、嵌套堆叠、覆盖布局适用场景角标、悬浮按钮、图片遮罩、卡片叠加、悬浮层二、接口定义Stack(value?:{alignContent?:Alignment})参数说明参数名类型是否可选说明alignContentAlignment可选设置所有子组件的默认对齐方式默认居中三、核心属性1. alignContent设置 Stack 容器内所有子组件的默认对齐方式。alignContent(value:Alignment)常用 Alignment 取值Alignment.Center居中默认Alignment.Top顶部居中Alignment.Bottom底部居中Alignment.TopStart左上角Alignment.TopEnd右上角Alignment.BottomStart左下角Alignment.BottomEnd右下角2. 子组件独立 align子组件可单独使用.align(Alignment)优先级高于容器的 alignContent。四、完整可运行代码不变动你提供的版本EntryComponentstruct StackFullExample{build(){Scroll(){Column({space:20}){// 1. 基础 Stack默认居中对齐Text(1. 默认居中 Stack).fontSize(18).fontWeight(FontWeight.Bold)Stack(){Box({w:80%,h:120,color:0xAFEEEE})Box({w:60%,h:80,color:0x00FFFF})Text(居中堆叠).fontSize(16)}.width(90%).height(150).border({width:1,color:#ccc})// 2. 底部对齐 StackText(2. 底部对齐 Stack).fontSize(18).fontWeight(FontWeight.Bold)Stack({alignContent:Alignment.Bottom}){Box({w:100%,h:120,color:0xd2cab3})Box({w:80%,h:80,color:0xc1cbac})Text(底部对齐).fontSize(16)}.width(90%).height(150).border({width:1,color:#ccc})// 3. 顶部对齐 StackText(3. 顶部对齐 Stack).fontSize(18).fontWeight(FontWeight.Bold)Stack({alignContent:Alignment.Top}){Box({w:100%,h:120,color:0xF5DEB3})Box({w:80%,h:80,color:0xDEB887})Text(顶部对齐).fontSize(16)}.width(90%).height(150).border({width:1,color:#ccc})// 4. 右上角对齐 StackText(4. 右上角对齐 Stack).fontSize(18).fontWeight(FontWeight.Bold)Stack({alignContent:Alignment.TopEnd}){Box({w:100%,h:120,color:0xE6E6FA})Box({w:60%,h:80,color:0x9370DB})Text(右上角).fontSize(16)}.width(90%).height(150).border({width:1,color:#ccc})// 5. 子组件单独设置 alignText(5. 子组件独立 align 优先级).fontSize(18).fontWeight(FontWeight.Bold)Stack({alignContent:Alignment.Center}){Box({w:100%,h:150,color:0xF0FFF0})Text(我在底部).align(Alignment.Bottom).backgroundColor(0x90EE90).padding(5)Text(我在顶部).align(Alignment.Top).backgroundColor(0x90EE90).padding(5)Text(我在中间).backgroundColor(0x32CD32).padding(5)}.width(90%).height(180).border({width:1,color:#ccc})// 6. 实用场景图片 右上角角标Text(6. 实用场景图片 右上角角标).fontSize(18).fontWeight(FontWeight.Bold)Stack(){Image(https://picsum.photos/300/200).width(90%).height(160).borderRadius(10)Text(NEW).backgroundColor(0xFF4500).fontColor(#fff).padding({left:8,right:8,top:4,bottom:4}).borderRadius(4).align(Alignment.TopEnd).margin({top:10,right:25})}.width(90%).height(180)// 7. Stack 嵌套 StackText(7. Stack 嵌套用法).fontSize(18).fontWeight(FontWeight.Bold)Stack({alignContent:Alignment.Center}){Box({w:90%,h:180,color:0xF8F8FF})Stack({alignContent:Alignment.BottomEnd}){Box({w:70%,h:100,color:0xDCDCDC})Text(嵌套内层右下角).fontSize(14).padding(5)}}.width(90%).height(200).border({width:1,color:#ccc})}.width(100%).padding(15)}}}// 辅助盒子组件Componentstruct Box{privatew?:Length100%;privateh?:Length40;privatecolor?:number0xAFEEEE;build(){Column().width(this.w).height(this.h).backgroundColor(this.color).borderRadius(6)}}运行效果如图五、代码功能说明1. 基础 Stack默认居中不设置对齐方式时所有子组件默认居中堆叠。2. 统一对齐方式通过alignContent设置底部对齐Alignment.Bottom顶部对齐Alignment.Top右上角对齐Alignment.TopEnd3. 子组件独立对齐子组件使用.align()可覆盖容器默认对齐优先级更高。4. 实用场景图片 角标Stack 最常用场景图片上方叠加角标、红点、标签。5. Stack 嵌套Stack 支持多层嵌套实现复杂的层叠布局。八、总结堆叠顺序后写的子组件覆盖在先写组件上方。对齐优先级子组件.align() 容器alignContent。尺寸必须明确Stack 必须设置宽度/高度否则无法正常显示堆叠效果。嵌套使用可与 Column、Row 嵌套构建复杂界面。Stack 是 HarmonyOS 中实现覆盖布局最核心的容器简单高效支持九种对齐方式子组件可单独定位灵活度极高适用于角标、遮罩、悬浮层、卡片叠加等高频场景配合 Row、Column 可实现绝大多数高级界面布局熟练使用 Stack 是掌握 ArkTS 高级布局的必备技能。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力