先讲层叠布局：

核心布局：Stack 层叠布局

什么是 Stack？

Stack 就像一叠盘子：后放的盘子会压住先放的盘子。

特点	说明
堆叠顺序	后写的组件在上层（覆盖先写的）
对齐方式	通过 alignContent 统一控制所有子组件位置
灵活定位	可配合 position 单独控制每个子组件
适用场景	图标叠加、图片加文字、卡片阴影、多层图形

层叠布局示例代码

@Entry
@Component
struct ColorfulNested {
  build() {
    Stack() {
      // 1. 底层：红色大圆
      Circle()
        .width(220)
        .height(220)
        .fill(Color.Red)
        .opacity(0.9)

      // 2. 中间：蓝色中圆
      Circle()
        .width(140)
        .height(140)
        .fill(Color.Blue)
        .opacity(0.9)

      // 3. 上层：粉色小圆
      Circle()
        .width(60)
        .height(60)
        .fill(Color.Pink)
        .opacity(0.9)

      // 4. 最上层：文字
      Text('开始')
        .fontSize(28)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
        .shadow({ radius: 10, color: Color.Black, offsetX: 2, offsetY: 2 })
    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Center)  // 所有子元素居中
    .backgroundColor('#F0F0F0')      // 浅灰色背景
  }
}

效果预览

其中代码含义：

Circle() 
/*Circle 是 HarmonyOS ArkUI 中用于绘制圆形的图形组件，可以设置大小、颜色、边框等样式。 */
  .width(100)    // 宽度（直径）
  .height(100)   // 高度（直径）
  .fill(Color.Red) // 填充颜色

文字代码含义：

Text('开始')
  .fontSize(28)                    // 设置字体大小
  .fontColor(Color.White)          // 设置字体颜色
  .fontWeight(FontWeight.Bold)     // 设置字体粗细
  .shadow({                        // 添加阴影效果
    radius: 10,                    // 阴影模糊半径
    color: Color.Black,            // 阴影颜色
    offsetX: 2,                    // 阴影水平偏移
    offsetY: 2                     // 阴影垂直偏移
  })

选项卡和轮播图

示例代码：

@Entry
@Component
struct TabBaseDemo{
  // 定义轮播图数据
  @State bannerImages: Resource[] = [
    $r('app.media.wo'),      // 图片 - 请替换为你的图片
    $r('app.media.zipai'),
    $r('app.media.fengjing')
  ]
  // 当前轮播图索引（用于指示器）
  @State currentIndex: number = 0

  build() {
    Tabs() {
      // ========== 首页：右侧图文字 ==========
      TabContent() {
        Column({ space: 20 }) {
          Text('欢迎来到新5-501宿舍,\n下面介绍一下宿舍信息。')
            .fontSize(26)
            .margin(20)
          Image($r('app.media.wo'))  // 请将图片放入 resources/base/media/
            .width('90%')
            .height(200)
            .objectFit(ImageFit.Cover)
            .borderRadius(12)
        }
      }
      .tabBar('首页')

      // ========== 推荐：轮播图 ==========
      TabContent() {
        Column() {
          // 轮播图容器
          Swiper() {
            // 循环渲染轮播图图片
            ForEach(this.bannerImages, (image: Resource) => {
              Image(image)
                .width('100%')           // 宽度填满
                .height(300)              // 固定高度300
                .objectFit(ImageFit.Cover) // 覆盖模式，保持比例裁剪
                .borderRadius(16)          // 圆角效果
            })
          }
          .width('95%')                    // 宽度留点边距
          .height(320)                     // 高度比图片大一点，给指示器留空间
          .autoPlay(true)                  // 自动轮播
          .interval(3000)                  // 每隔3秒切换一张
          .loop(true)                      // 无限循环
          .indicator(true)                 // 显示底部指示器（小圆点）
          .onChange((index: number) => {   // 监听轮播切换
            this.currentIndex = index      // 更新当前索引
          })

          // 显示当前是第几张（辅助信息）
          Text(`当前第 ${this.currentIndex + 1} 张 / 共 ${this.bannerImages.length} 张`)
            .fontSize(16)
            .fontColor('#999')
            .margin({ top: 10 })
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)  // 居中显示
      }
      .tabBar('推荐')

      // ========== 发现：中间6个方框2列3行 ==========
      TabContent() {
        Flex({wrap:FlexWrap.Wrap}){
          ForEach([1,2,3,4,5,6],()=>{
            Text('')
              .width(80)
              .height(80)
              .border({width:2,color:Color.Black})
              .margin(12)
          })
        }
        .padding(20)
      }
      .tabBar('发现')

      // ========== 我的 ==========
      TabContent() {
        Text('我的内容').fontSize(30)
      }
      .tabBar('我的')
    }
    .barPosition(BarPosition.End)  // 标签栏在底部
  }
}

轮播图代码讲解：

一、数据源：bannerImages

@State bannerImages: Resource[] = [
    $r('app.media.wo'),      // 第1张图
    $r('app.media.zipai'),   // 第2张图  
    $r('app.media.R-C')      // 第3张图
]

二，轮播容器：Swiper

三、循环渲染：ForEach

typescript

ForEach(this.bannerImages, (image: Resource) => {
    Image(image)  // 把数组里的每张图都显示出来
})

四、选项卡

Tabs() {                    // ① 选项卡容器
  TabContent() {            // ② 选项卡内容页

.tabBar('首页')           // ③ 选项卡标签（显示在底部/顶部）

组件	角色	比喻
Tabs	容器	整个选项卡控件
TabContent	内容页	每个选项卡显示的页面
.tabBar('标题')	标签按钮	底部/顶部点击切换的按钮

最终效果如图：