前言

在鸿蒙应用开发中，UI 布局是构建页面的核心基础。ArkUI 作为鸿蒙专属的方舟 UI 框架，提供了一套简单易用、功能强大的布局组件，帮助开发者快速实现各类页面排版效果。无论是简单的文字展示页，还是复杂的功能交互界面，合理运用布局组件都能让开发效率大幅提升。本文结合实战案例，从零讲解 ArkUI 三大核心装饰器以及Column、Row、Stack、Flex四大主流布局，搭配完整可运行代码，适合鸿蒙开发新手入门学习。

一、ArkUI 三大基础装饰器

想要使用 ArkUI 构建界面，首先要掌握三个核心装饰器，这是所有自定义组件和页面的基础。

1. @Entry 页面入口，标记当前组件为可独立运行的页面。
2. @Component 自定义 UI 组件声明，让结构体具备渲染界面能力。
3. build() 界面构建函数，所有 UI 组件必须写在内部。

标准页面结构：

@Entry
@Component
struct Index {
  build() {
    // 所有布局写在这里
  }
}

---

二、线性布局：Column 垂直布局

作用：子组件从上到下垂直排列。 常用属性：space（间距）、justifyContent（垂直对齐）、alignItems（水平对齐）。

@Entry
@Component
struct ColumnDemo {
  build() {
    Column({ space: 20 }) {
      Text("个人中心").fontSize(30).fontWeight(FontWeight.Bold)
      Text("姓名：小明").fontSize(22)
      Text("专业：计算机应用").fontSize(22)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

---

三、线性布局：Row 水平布局

作用：子组件从左到右水平排列。 常用场景：按钮组、导航栏、图文同行。

@Entry
@Component
struct RowDemo {
  build() {
    Row({ space: 25 }) {
      Button("首页").width(80).height(40)
      Button("我的").width(80).height(40)
      Button("设置").width(80).height(40)
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

---

四、层叠布局：Stack

作用：组件叠加显示，后写覆盖先写。 常用场景：水印、角标、头像标签、悬浮按钮。

@Entry
@Component
struct StackDemo {
  build() {
    Stack() {
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
        .borderRadius(50)
      Text("VIP")
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .padding(5)
        .borderRadius(5)
        .position({ right: 0, bottom: 0 })
    }
  }
}

---

五、弹性布局：Flex

作用：自动换行，适配不同屏幕宽度。 核心：wrap: FlexWrap.Wrap 开启换行。

@Entry
@Component
struct FlexDemo {
  build() {
    Flex({ wrap: FlexWrap.Wrap, space: 15 }) {
      ["鸿蒙基础", "ArkTS", "布局", "组件", "轮播", "Tabs"].forEach(item => {
        Text(item)
          .padding(10)
          .backgroundColor(0xE8F4FF)
          .borderRadius(20)
      })
    }
    .width('100%')
    .padding(20)
  }
}

---

六、相对布局：RelativeContainer

1. 作用

实现不规则定位，组件可以互相依赖、上下左右对齐。

2. 核心规则

• 给组件设置 .id('名称') 作为参照物
• 使用 .alignRules({}) 设置对齐关系

3. 完整实战代码

@Entry
@Component
struct RelativeDemo {
  build() {
    RelativeContainer() {
      // 顶部标题（锚点）
      Text("相对布局页面")
        .id('title')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      // 按钮：在标题下方居中
      Button("按钮一")
        .id('btn1')
        .width(200)
        .height(80)
        .alignRules({
          top: { anchor: 'title', align: VerticalAlign.Bottom },
          middle: { anchor: 'title', align: HorizontalAlign.Center }
        })
        .margin({ top: 30 })

      // 文字：在按钮一下方
      Text("依赖按钮定位")
        .id('text')
        .fontSize(26)
        .fontColor(Color.Red)
        .alignRules({
          top: { anchor: 'btn1', align: VerticalAlign.Bottom },
          middle: { anchor: 'btn1', align: HorizontalAlign.Center }
        })
        .margin({ top: 30 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Grey)
  }
}

七、轮播图：Swiper 组件（新增章节）

1. 组件介绍

Swiper 是鸿蒙 ArkUI 提供的轮播容器组件，也是移动端开发高频组件，常用于首页 Banner、校园风光、广告图、图集展示等场景。 它支持手动左右滑动、自动播放、无限循环、底部页码指示器，搭配Image图片组件可快速实现标准轮播效果。

2. 核心工作原理

1. 提前定义图片资源数组，统一管理多张轮播图；
2. 通过ForEach循环遍历数组，批量渲染图片；
3. 依靠Swiper内置属性控制播放逻辑、切换速度、循环效果。

4. 基础版完整实战代码

   @Entry
   @Component
   struct SwiperBannerDemo {
     // 定义图片资源数组，图片放置在 resources/base/media 目录下
     private imgList: Resource[] = [
       $r('app.media.img1'),
       $r('app.media.img2'),
       $r('app.media.img3')
     ]
   
     build() {
       Column() {
         Text("校园风光轮播")
           .fontSize(24)
           .fontWeight(FontWeight.Bold)
           .margin({ bottom: 15 })
   
         // 轮播图容器
         Swiper() {
           // 循环渲染每一张图片
           ForEach(this.imgList, (item: Resource) => {
             Image(item)
               .width('100%')
               .height('100%')
               .objectFit(ImageFit.Cover) // 图片等比铺满，不变形
               .borderRadius(8) // 图片圆角
           })
         }
         .width('100%')
         .height(180)          // 轮播高度
         .autoPlay(true)       // 自动播放
         .interval(2000)       // 2秒切换一张
         .loop(true)           // 无限循环
         .indicator(true)      // 显示底部圆点
         .indicatorColor(Color.Gray)
         .selectedIndicatorColor(Color.Blue)
       }
       .width('100%')
       .padding(15)
     }
   }
   

   5. 轮播图位置调整技巧

   开发中经常需要移动轮播图位置，三种常用调整方式：

5. 整体上下移动：修改外层Column的 space 间距，数值越小，轮播图越靠近上方文字；
6. 精准偏移：给Swiper添加 .margin({top:10, bottom:10})，单独控制上下边距；
7. 左右缩进：给Swiper添加 .margin({left:8, right:8})，让轮播图左右向内收缩。

---

八、Tabs 标签页

1. 作用

实现多页面切换，如：学校简介、系部介绍、班级、个人中心。

2. 核心属性

• barPosition(BarPosition.Start)：标签栏置顶（最常用）
• .tabBar("标签名称")：设置单个标签的文字

3. 完整实战代码（整合轮播图）

@Entry
@Component
struct SchoolPage {
  // 轮播图资源数组
  private bannerList = [$r('app.media.img1'), $r('app.media.img2'), $r('app.media.img3')]

  build() {
    Tabs() {
      // 第一个标签：学校简介
      TabContent() {
        Column({ space: 15 }) {
          Text("欢迎来到河北软件职业技术学院")
            .fontSize(22)
            .fontWeight(FontWeight.Bold)
          
          // 嵌入轮播图
          Swiper() {
            ForEach(this.bannerList, item => {
              Image(item)
                .width('100%')
                .height(180)
                .objectFit(ImageFit.Cover)
                .borderRadius(10)
            })
          }
          .width('100%')
          .height(180)
          .autoPlay(true)
          .interval(2000)
          .loop(true)

          Text("河北软件职业技术学院是河北省公办全日制高职，2003年建校、办学溯源至1972年，坐落于保定，隶属省教育厅，为省内首家独立建制、以信息技术（ICT）为核心的公办高职。")
            .fontSize(16)
            .lineHeight(28)
        }
        .padding(15)
      }
      .tabBar("学校简介")

      // 第二个标签：系部简介
      TabContent() {
        Column({ space: 15 }) {
          Text("计算机应用工程系")
            .fontSize(22)
            .fontWeight(FontWeight.Bold)
          
          Swiper() {
            ForEach(this.bannerList, item => {
              Image(item)
                .width('100%')
                .height(180)
                .objectFit(ImageFit.Cover)
                .borderRadius(10)
            })
          }
          .width('100%')
          .height(180)
          .autoPlay(true)
          .loop(true)

          Text("计算与IDC人才培养核心基地，在校生2000余人。立足京津冀，聚焦云计算、信息安全、区块链等新一代信息技术。")
            .fontSize(16)
            .lineHeight(28)
        }
        .padding(15)
      }
      .tabBar("系部简介")

      // 第三个标签：班级介绍
      TabContent() {
        Text("班级介绍页面").fontSize(24).padding(30)
      }
      .tabBar("班级介绍")

      // 第四个标签：个人中心
      TabContent() {
        Text("个人中心页面").fontSize(24).padding(30)
      }
      .tabBar("个人中心")
    }
    .barPosition(BarPosition.Start)
  }
}

九、布局 & 组件学习总结

1. 垂直排版 → Column
2. 水平排版 → Row
3. 叠加效果 → Stack
4. 自动换行流式布局 → Flex
5. 自由不规则定位 → RelativeContainer
6. 图片轮播 Banner → Swiper
7. 多页面标签切换 → Tabs
8. 间距控制 → space、margin、padding
9. 文字加粗醒目 → fontWeight(FontWeight.Bold)
10. 多行文字优化 → lineHeight(28)

---

十、全文总结

本文从 ArkUI 三大基础装饰器入手，依次讲解了五大基础布局、Swiper 轮播图、Tabs 标签页七大核心 UI 能力，所有代码均可直接复制到 DevEco Studio 中运行测试。

轮播图作为 App 首页标配组件，常与Column、Tabs嵌套组合使用，是实训、作业、毕业设计中的高频考点。掌握本文全部内容，你可以独立完成：注册登录页、个人中心、校园展示页、商品首页、分类页面等绝大多数鸿蒙基础应用界面。

布局和组件学习重在动手练习，建议大家修改代码中的尺寸、颜色、间距、切换时长，直观感受属性变化带来的界面效果，循序渐进夯实开发基础。