个人主页→VON
收录专栏→鸿蒙开发小型案例总结
基础语法部分会发布于github 和 gitee上面（暂未发布）
前言
鸿蒙开发中层叠布局通过Stack容器组件实现了强大的页面层叠和位置定位能力。这种布局方式不仅增强了界面的美观性和功能性，也提升了用户的交互体验。开发者可以利用StackLayout精确地控制UI组件的层叠关系和显示优先级，满足各种复杂的布局需求。
知识点概述
鸿蒙OS（HarmonyOS）是一个基于微内核的全场景分布式操作系统，其开发环境提供了丰富的功能和工具，使得开发者可以构建适应多设备的应用程序。在UI设计和布局构建过程中，层叠布局是一种非常实用且常见的布局方式。
基本概念与实现方式
- 层叠布局的定义：层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。
- Stack容器：Stack容器是实现层叠布局的核心组件。容器中的子元素按照添加顺序依次入栈，后一个子元素会覆盖前一个子元素，从而实现层叠效果。
层级管理与Z序控制
- Z序控制：Stack子组件中可以通过zIndex属性控制层级，zIndex值越大，显示层级越高，即该组件会覆盖在zIndex值较小的组件上方。
- 应用场景：在实际项目中，广告、卡片层叠效果等需要重叠显示的场景经常会用到层叠布局。
对齐方式与参数配置
- 对齐方式：Stack组件通过alignContent参数实现位置的相对移动，支持九种对齐方式，包括TopStart、Top、TopEnd、CenterStart、Center、CenterEnd、BottomStart、Bottom和BottomEnd。
- 参数配置：Stack组件的属性包括alignContent，用于设置子组件在容器内的对齐方式，默认值为Alignment.Center。
层叠布局的使用
- 代码示例：一个简单的Stack布局示例代码展示了如何使用Stack组件创建层叠效果，并通过zIndex调整层级。例如，一个Stack包含三个子元素，其中第一个子元素的zIndex为2，第二个子元素的zIndex为1，第三个子元素没有zIndex属性，则前两个子元素会显示在第三个子元素上方。
- 布局顺序：Stack作为容器，容器内的子元素的顺序为Item1->Item2->Item3。
其他布局方式比较
- 弹性布局（Flex）：弹性布局（Flex）提供了更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。弹性布局适用于多种复杂的布局需求，如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
- 相对定位与绝对定位：这两种定位方式与层叠布局不同，它们主要用于控制组件在二维平面上的位置，而不涉及层叠和Z序控制。
界面效果展示
代码展示
@Entry
@Component
struct Index {
build() {
Column(){
Column(){
// 1.图片区域(层叠布局)
Stack({alignContent:Alignment.Bottom}){
Image($r('app.media.bzhan_word2'))
.borderRadius(5)
Row(){
Row({space:5}){
Image($r('app.media.bzhan_public_play_norm'))
.width(14)
.fillColor(Color.White)
Text('80.4万')
.fontSize(12)
.fontColor(Color.White)
}
.margin({right:10})
Row({space:5}){
Image($r('app.media.bzhab_public_comments'))
.width(14)
.fillColor(Color.White)
Text('4724')
.fontSize(12)
.fontColor(Color.White)
}
Blank()
Text('16:04')
.fontSize(12)
.fontColor(Color.White)
}
.padding({left:5,right:5})
.width('100%')
.height(24)
}
.width('100%')
.height(125)
// 2.底部文字区域
Column(){
Text('16年火爆全中国的【qq飞车】，如今变成了什么样子？')
.fontSize(12)
.lineHeight(16)
Row(){
Text(){
Span('2万点赞')
.fontSize(10)
.fontColor('#e66c43')
.backgroundColor('#fff0e3')
.padding(2)
.borderRadius(2)
Span(' L另唐 8-2')
.fontSize(10)
.fontColor('#cacac4')
}
.padding(5)
Image($r('app.media.bzhan_public_more_list'))
.width(14)
}
.margin({top:6})
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
}
.padding(5)
}
.width(200)
.height(200)
.borderRadius(5)
.backgroundColor(Color.White)
}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
}
