【HarmonyOS NEXT星河版开发学习】小型测试案例09-B站卡片

@VON

发布于 2025-12-17 11:51:06

基础语法部分会发布于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)
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除

测试