鸿蒙ArkUI入门：ArkUI常用组件汇总

duudb

29人浏览 · 2026-06-22 15:38:10

duudb · 2026-06-22 15:38:10 发布

一.轮播图（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 = $rawfile('bb.mp4')
  private pict:Resource=$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.first'),
    $r('app.media.second'),
    $r('app.media.third')
  ]
  private bannerList2:Resource[]=[//新建变量读取内容
    $r('app.media.second'),
    $r('app.media.first'),
    $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%')
  }
}

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

为什么 Redux 思想可能不再适合 HarmonyOS PC？

HarmonyOS开发者社区

集成 HUAWEI HiPlay 认证方案，抓住千万鸿蒙终端增量订单

当前哈曼、KEF、丹拿、惠威、艾索洛、LinkPlay 等一线品牌新品全部标配 HiPlay 功能，整机厂商采购模块时，优先筛选自带 HiPlay 合规能力的方案商。集成 HiPlay 官方认证的高端模块，可向整机厂商收取合理技术溢价，客户愿意为鸿蒙生态、无损音质卖点买单，单品利润显著提升。很多整机工厂缺少 HiPlay 认证对接渠道，方案商若联合授权实验室提供模块预测试、整机认证代办打包服务，可