刚接触鸿蒙开发时，很多人会疑惑页面上的文字、输入框、按钮是怎么有序摆放的，答案就是布局容器。布局相当于页面的 “摆放规则”，规定组件该竖着排、横着排还是叠在一起。今天用最简单通俗的语言，带大家搞懂鸿蒙里最常用的五种基础布局，同时记住所有布局都要遵守的通用规则。

鸿蒙五种常用布局

垂直布局 Column

作用就是让里面所有组件从上到下竖着依次排列。适合场景：登录页、注册页、表单页面，标题、输入框、按钮一竖条整齐摆放，还能统一设置组件之间的间距。（间距设置需要在小括号中加入{space:20}代码）

水平布局 Row

内部组件从左到右横着排成一行。设置间距仍需要在小括号中加入代码

弹性布局 Flex

可以理解成升级版的 Row 和 Column，既能横着排，也能竖着排。 它最大优势是自适应屏幕，能自动分配空白区域，向左就加left，向右就加right

所有布局必须遵守的核心规则

不管上面五种布局用哪一种，有一条硬性规定不能出错：

一个页面只能存在一个根布局 页面最外层不能同时放两个独立布局，比如不能直接并列写两个垂直布局，程序会直接报错。整个页面必须只有一个最外层的大布局，这就是根布局。

一、ArkUI的三要素

1.@Entry：页面入口的装饰器，用于标记当前自定义组件作为页面入口的组件，可以独立运行。  

2.@Component：组件装饰器，用于定义自定义UI组件，被标记的结构体可以用于构建界面视图

3.@build:构建组件的方法，所有的布局内容必须在写这个方法的内部。

二、arkUI布局

1. Column 垂直布局

• space：统一设置子组件间距，官方推荐写法，替代手动margin，界面更规整

• justifyContent：主轴（垂直）对齐，包含居顶、居中、居底、均分对齐

• alignItems：交叉轴（水平）对齐，包含左对齐、居中、右对齐

• width/height：布局容器尺寸，铺满屏幕是页面布局基础

• backgroundColor：布局背景色，用于区分页面模块

2.Row 水平布局

定义：元素从左至右依次排列，主轴为水平方向，交叉轴为垂直方向

3.Stack层叠布局

定义：一个组件嵌套一个组件

@Entry

@Component

struct  StackNestDemo { build() {

Column({ space: 30 }) {

Text("个人主页")

.fontSize(30)

.fontWeight(FontWeight.Bold)

// 内层嵌套：Stack层叠 + Row横向布局

Row({ space: 20 }) { Stack() {

Image($r('app .media.start_icon'))

.width(100)

.height(100)

.borderRadius(50) Text("VIP")

.fontSize(14)

.fontColor(Color.White)

.backgroundColor(0xFF3333)

.padding(4)

.borderRadius(6) }

Column({ space: 10 }) {

Text("鸿蒙开发者").fontSize(22).fontWeight(FontWeight.Medium) Text("专注鸿蒙应用开发实训").fontSize(18).fontColor(Color.Gray)

}

}

}

.width('100%')

.height('100%')

.justifyContent(FlexAlign.Center)

.alignItems(HorizontalAlign.Center)

.backgroundColor(0xFFFFFF) }

}

4.Flex弹性布局

定义：自适应屏幕宽度，子组件超出自动换行，适配不同尺寸设备。

@Entry

@Component

struct FlexBaseDemo { build() {

Flex({ wrap: FlexWrap.Wrap, space: 12 }) { Text("鸿蒙基础")

.padding({ left: 12, right: 12, top: 6, bottom: 6 })

.backgroundColor(0xE8F4FF)

.borderRadius(20)

.fontSize(16) Text("ArkTS语法")

.padding({ left: 12, right: 12, top: 6, bottom: 6 })

.backgroundColor(0xE8F4FF)

.borderRadius(20)

.fontSize(16) Text("ArkUI布局")

.padding({ left: 12, right: 12, top: 6, bottom: 6 })

.backgroundColor(0xE8F4FF)

.borderRadius(20)

.fontSize(16) Text("组件开发")

.padding({ left: 12, right: 12, top: 6, bottom: 6 })

.backgroundColor(0xE8F4FF)

.borderRadius(20)

.fontSize(16) Text("页面跳转")

.padding({ left: 12, right: 12, top: 6, bottom: 6 })

.backgroundColor(0xE8F4FF)

.borderRadius(20)

.fontSize(16) Text("数据存储")

.padding({ left: 12, right: 12, top: 6, bottom: 6 })

.backgroundColor(0xE8F4FF)

.borderRadius(20)

.fontSize(16) }

.width('100%')

.padding(20) }

}

5.相对布局

定义：RelativeLayout 相对布局，是安卓传统五大布局之一，控件位置通过相对关系确定：以父容器、其他控件作为参照物，设置左、右、上、下、居中、对齐等规则摆放控件，无需固定坐标，适配性强。

6.轮播图

定义：是一组多张图片自动循环切换展示的 UI 组件，同时支持手动左右滑动切换图片，常附带指示器小圆点、左右切换箭头。

7.tabs

定义：是移动端 / 网页常用 UI 组件，由多个标签（Tab）组成，点击不同标签，下方区域切换对应内容，实现同一页面多模块快速切换，不用新开页面。

鸿蒙ArkUI入门：ArkUI常用组件汇总
一.轮播图（Swiper）

定义：Swiper本身是一个容器组件，组件提供滑动轮播显示的作用。

应用：在一些应用首页显示推荐的内容时，需要用到轮播图 。

 核心代码实现需要我们掌握loop（循环播放）

通过loop属性控制是否循环播放，该属性默认值为true。

当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。

实例：创建一个简单页面的轮播展示效果

@Entry
@Component
struct SwiperDemo{
  build() {
    Column(){
      Swiper(){
        Text('0')
          .backgroundColor(Color.Gray)
          .fontSize(30)
        Text('1')
          .backgroundColor(Color.Yellow)
          .fontSize(30)
        Text('2')
          .backgroundColor(Color.Blue)
          .fontSize(30)
        Text('3')
          .backgroundColor(Color.Green)
          .fontSize(30)

      }
      .width('100%')
      .height('30%')
      .autoPlay(true)
      .interval(2000)
      .loop(true)

    }

  }
}

二.视频 (Video)

定义：Video组件用于播放视频文件并控制其播放状态

应用：常用于短视频和应用内部视频的列表页面。

核心代码实现：需要我们先找到一个视频，然后保存在这个目录下

如上图所示，bb.mp4就是我所保存的视频

理解掌握这条视频代码，private  videoSrc:Resource = $rawfile('视频名称.mp4')

先写出代码，然后打开设备管理器里的手机

启动完成后，将写出的代码运行

重新运行代码后

代码展示：

@Entry
@Component
struct Index {
  private videoSrc:Resource = 𝑟𝑎𝑤𝑓𝑖𝑙𝑒(′𝑏𝑏.𝑚𝑝4′)𝑝𝑟𝑖𝑣𝑎𝑡𝑒𝑝𝑖𝑐𝑡:𝑅𝑒𝑠𝑜𝑢𝑟𝑐𝑒=
r('app.media.background')
  private controller:VideoController = new VideoController()
  build() {
    Column() {
      Video({
        src:this.videoSrc,
        previewUri: this.pict,
        controller: this.controller
      })
        .height('50%')
        //是否静音
        .muted(true)
        //循环播放
        .loop(true)
        //自动播放
        .autoPlay(false)
        .controls(true) // 设置是否显示默认控制条
    }
    .width('100%')
    .height('100%')
  }
}
三.图片(Image)

定义：开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等

应用：通常显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、jpeg等格式，不支持apng和svga格式

要点：

Image通过调用接口来创建，接口调用形式如下：

Image(src: PixelMap | ResourceStr | DrawableDescriptor)

存放图片时，我们把图片放到media目录下，如图所示

核心代码：

 Image('images/view.jpg')

 .width(200)

实例代码：

@Entry
@Component
struct imagess{
  build() {
    Column({space:30}){
      Text('鸿蒙应用开发实战课程')
        .fontSize(20)
        .textAlign(TextAlign.Center)
      Stack(){
        Image($r('app.media.sky'))
          .width(320)
          .height(180)
          .borderRadius(15)
          .objectFit(ImageFit.Cover)
      }
        Column(){
          Text('ArkUI实际应用开发课程')
            .fontSize(22)
            .fontColor(Color.White)
            .backgroundColor(0x550e00)
            .padding(10)
            .borderRadius(8)
        }
        Button('开始学习')
          .type(ButtonType.Capsule)
    }
    .width('100%')
    .height('100%')
    .padding({top:50})
  }
}

效果图：

四.按钮

定义：Button是按钮组件，作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

应用：通常用于响应用户的点击操作

类型：Button有四种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）、普通按钮（Normal）和圆角矩形按钮（ROUNDED_RECTANGLE）

实例：

代码如下：

@Entry
@Component
struct ButtonDemo1{
  build() {
    Column({space:20}){
      Button('确认提交')
        .height(50)
        .width(150)
        .fontSize(26)
        .borderRadius(35)
      Button('取消操作')
        .height(50)
        .backgroundColor(0x999999)
        .width(150)
        .fontSize(26)
        .borderRadius(35)
      Button('确认删除')
        .height(50)
        .backgroundColor(Color.Red)
        .width(150)
        .fontSize(26)
        .borderRadius(35)

      Button('登录')
        .height(50)
        .backgroundColor(Color.Gray)
        .width(150)
        .border({width:7,color:0x007DFF})
        .fontSize(26)
        .borderRadius(35)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}
五.选项卡(Tabs)

定义：Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

应用：当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。

效果图：

核心代码展示：

@Entry
@Component
struct TabsBase3{
  private bannerList:Resource[]=[//新建变量读取内容
    𝑟(′𝑎𝑝𝑝.𝑚𝑒𝑑𝑖𝑎.𝑓𝑖𝑟𝑠𝑡′),
r('app.media.second'),
    𝑟(′𝑎𝑝𝑝.𝑚𝑒𝑑𝑖𝑎.𝑡ℎ𝑖𝑟𝑑′)]𝑝𝑟𝑖𝑣𝑎𝑡𝑒𝑏𝑎𝑛𝑛𝑒𝑟𝐿𝑖𝑠𝑡2:𝑅𝑒𝑠𝑜𝑢𝑟𝑐𝑒[]=[//新建变量读取内容
r('app.media.second'),
    𝑟(′𝑎𝑝𝑝.𝑚𝑒𝑑𝑖𝑎.𝑓𝑖𝑟𝑠𝑡′),
r('app.media.third')
  ]
  build(){
    Tabs(){
      TabContent(){
        Column({space:30}){
          Text('欢迎来到河北软件职业技术学院')
            .fontSize(22)
            .fontWeight(FontWeight.Bolder)

          Swiper(){
            ForEach(this.bannerList,(item:Resource)=>{
              Image(item)
                .width('98%')
                .height('100%')
                .objectFit(ImageFit.Cover)
                .borderRadius(20)
            })
          }
          .width('100%')
          .height('30%')
          .autoPlay(true) //自动播放
          .interval(1000) //自动播放的间隔
          .loop(true) //是否循环播

          Text('河北软件职业技术学院是河北省公办全日制高职，2003 年建校、办学溯源至 1972 年，坐落于保定，隶属省教育厅，为省内首家独立建制、以信息技术（ICT） 为核心的公办高职，是国家 “双高计划” 建设单位、国家优质专科、国家示范性软件职业技术学院河北软件职业技术学院')
            .fontSize(20)
        }
        .width('100%')
        .height('100%')
        .padding(20)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)

      }.tabBar('学校简介')
      TabContent(){
        Column({space:30}){
          Text('欢迎来到计算机应用工程系')
            .fontSize(24)
            .fontWeight(FontWeight.Bolder)
          Swiper(){
            ForEach(this.bannerList2,(item:Resource)=>{
              Image(item)
                .width('98%')
                .height('100%')
                .objectFit(ImageFit.Cover)
                .borderRadius(20)
            })
          }
          .width('100%')
          .height('30%')
          .autoPlay(true) //自动播放
          .interval(1000) //自动播放的间隔
          .loop(true) //是否循环播

          Text('计算机应用工程系成立于2002年，是学院重点系部、河北省云计算与IDC人才培养核心基地，在校生2000余人河北软件职业技术学院。立足京津冀，聚焦云计算、信息安全、区块链等新一代信息技术，办学实力与就业质量位居省内同类院校前列河北软件职业技术学院。')
            .fontSize(20)
        }
        .width('100%')
        .height('100%')
        .padding(20)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }.tabBar('系部简介')
      TabContent(){Text('个人中心页面').fontSize(24)}.tabBar('专业简介')
      TabContent(){Text('关于我们页面').fontSize(24)}.tabBar('班级简介')
    }
    .barPosition(BarPosition.Start)
  }
}
六.文本/输入框

定义：主要用于显示静态文本

           TextInput是单行输入框，TextArea是多行输入框

应用：当需要在单行输入框（TextInput）或多行输入框（TextArea）中输入纯文本时，应优先考虑使用此文本组件。

例如：请做一个个人信息采集页面

效果图如下：

@Entry
@Component
struct TextDemo{
  build() {
    Column({space:35}){
      Text('个人信息采集!')
        .fontSize(30)
        .fontColor(Color.Blue)
        .fontWeight(FontWeight.Bolder)
        .textAlign(TextAlign.Center)
        .width('100%')

      TextInput({placeholder:"姓名"})
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(Color.Gray)
        .borderRadius(24)

      TextInput({placeholder:"年龄"})
        .type(InputType.Number)
        .height(70)
        .width(280)
        .backgroundColor(Color.Gray)
        .borderRadius(24)

      TextInput({placeholder:"手机"})
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(Color.Grey)
        .borderRadius(24)

      TextInput({placeholder:"电子邮箱"})
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(Color.Gray)
        .borderRadius(24)

      TextInput({placeholder:"所在班级"})
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(Color.Gray)
        .borderRadius(24)
    }
    .height('100%')
    .width('100%')
  }
}
七.单选框(Radio)

定义：Radio是单选框组件

应用：通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中

添加事件
除支持通用事件外，Radio还用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。

Radio({ value: 'Radio1', group: 'radioGroup' })
  .onChange((isChecked: boolean) => {
    if(isChecked) {
      //需要执行的操作
    }
  })
Radio({ value: 'Radio2', group: 'radioGroup' })
  .onChange((isChecked: boolean) => {
    if(isChecked) {
      //需要执行的操作
    }
  })

八.Toggle

定义：Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换.

核心代码展示：

@Entry
@Component
struct ToggleDemo{
  build() {
    Column(){
      Toggle({
        type: ToggleType.Switch,
        isOn: true
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .id('n1')

      Toggle({
        type: ToggleType.Checkbox,
        isOn: false
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .id('n1')
    }
    .width('100%')
    .height('100%')
  }
}
 
————————————————
版权声明：本文为CSDN博主「Orfeolightnin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Orfeolightnin/article/details/162405598