一、学习前言

最近刚开始学习鸿蒙ArkTS开发，初步接触了页面基础组件与布局。本次主要练习三个最基础、最常用的功能：底部Tab导航、Swiper轮播图、相对布局。为了方便自己理解和复习，我把每个功能单独拆分编写，代码尽量精简，只保留基础核心功能，适合鸿蒙新手入门学习。

二、基础知识了解

1. Tab底部导航

Tab导航是手机App最常见的功能，用来实现多个页面来回切换。鸿蒙中通过Tabs和TabContent配合使用，底部显示对应菜单文字，点击即可切换页面。

新手易错点：每个TabContent里面只能放一个根布局，如果有多个控件，必须嵌套Column布局，不然代码会报错。

2. Swiper轮播组件

Swiper是鸿蒙自带的轮播组件，操作简单。可以实现左右滑动切换内容，也可以设置自动播放，底部小圆点指示器可以直观显示当前轮播页数，常用来展示图文、信息公告。

3. 相对布局RelativeContainer

相对布局和普通的上下排列布局不同，不需要固定坐标位置。可以给每个组件设置唯一标识，让组件参考其他组件或者父容器摆放，布局方式更加灵活，适合做自由排版的页面。

三、分模块最简代码练习（新手入门）

下面将三个功能分开实现，每一段都是独立可直接运行的代码，结构简单、注释清晰，适合新手逐个练习掌握。

1. 基础Tab底部导航

实现最基础的四个底部标签切换，包含首页、推荐、发现、我的四个页面，满足基础页面跳转需求。

2. 基础Swiper轮播图

实现新手必备的轮播效果，支持左右滑动、自动轮播、显示底部指示器，代码极简，容易看懂。

3. 基础相对布局

通过简单的控件锚定，实现组件自由摆放，新手可以直观理解相对布局的定位规则。

@Entry
@Component
struct RelativeC{
  build() {
    RelativeContainer(){
      Text('相对布局的案例')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .id('title')
        .alignRules({
          top:{anchor:'__container__',align:VerticalAlign.Top},
          left:{anchor:'__container__',align:HorizontalAlign.Start}
        })
        .backgroundColor(Color.Green)
        .width(150)
        .height(150)

      Text('相对布局的案例2')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .id('title1')
        .alignRules({
          top:{anchor:'__container__',align:VerticalAlign.Top},
          right:{anchor:'__container__',align:HorizontalAlign.End}
        })
        .backgroundColor(Color.Blue)
        .width(150)
        .height(150)

      Text('相对布局的案例3')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .id('title2')
        .alignRules({
          top:{anchor:'title',align:VerticalAlign.Bottom},
          left:{anchor:'title',align:HorizontalAlign.Start}
        })
        .backgroundColor(Color.Yellow)
        .width(150)
        .height(150)

      Text('相对布局的案例4')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .id('title3')
        .alignRules({
          top:{anchor:'title2',align:VerticalAlign.Bottom},
          left:{anchor:'title2',align:HorizontalAlign.End}
        })
        .backgroundColor(Color.Red)
        .width(150)
        .height(150)
    }
  }
}

五、学习总结

通过本次练习，我初步掌握了鸿蒙开发三个基础功能的使用方法。Tab导航可以实现多页面切换，是搭建App框架的基础；Swiper轮播可以轻松实现内容自动滚动展示；相对布局打破了固定排列的限制，能够灵活摆放组件。

作为鸿蒙初学者，拆分模块练习的方式更加容易理解，简单的代码结构也方便后续复习和修改。同时也记住了常见的报错问题，规避了新手常见错误，为后续学习复杂页面布局打下了基础。