轮播图(Swiper)

定义

鸿蒙开发中轮播图核心组件为 Swiper，是 ArkUI 内置原生滑动容器组件，用于在固定可视区域循环切换图片、广告、卡片、页面等内容，适配手机、平板、车机等全鸿蒙设备，常放在首页顶部展示 banner、活动海报。

代码解析

// @Entry：页面入口装饰器，标记该结构体为独立页面，可单独预览、跳转访问
// @Component：自定义组件装饰器，代表当前结构体是ArkUI自定义UI组件
@Entry
@Component
// 定义轮播组件结构体，名称SwiperDemo2
struct SwiperDemo2 {
  // private：私有变量，仅当前组件内部使用，外部无法访问
  // bannerList: Resource[] 定义数组，存放图片资源对象，Resource为鸿蒙资源类型
  private bannerList: Resource[] = [
    // $r('app.media.xxx')：读取本地media文件夹下图片资源
    // app.media.first 对应 entry/src/main/resources/base/media 里名为first的图片
    $r('app.media.first'),
    $r('app.media.Second'),
    $r('app.media.third')
  ]

  // build()：组件渲染入口函数，所有UI布局、组件都必须写在build内部
  build() {
    // Column垂直布局容器，内部元素从上到下垂直排列
    Column() {
      // Swiper 鸿蒙官方原生轮播容器组件，用来实现图片自动滑动切换
      Swiper() {
        // ForEach：ArkUI循环渲染API，遍历bannerList数组批量生成轮播项
        // 参数1：需要遍历的数组 this.bannerList
        // 参数2：回调函数 item代表数组里单个图片资源
        ForEach(this.bannerList, (item: Resource) => {
          // Image图片组件，传入item资源加载对应图片
          Image(item)
            // 图片宽度占满Swiper容器宽度
            .width('100%')
            // 图片高度占满Swiper容器高度
            .height('100%')
            // 图片适配模式：Cover 等比例铺满容器，超出区域裁剪，保证不变形
            .objectFit(ImageFit.Cover)
        })
      }
      // 设置轮播宽度，占父容器Column的100%，铺满屏幕宽度
      .width('100%')
      // 设置轮播高度为屏幕总高度的30%
      .height('30%')
      // autoPlay(true) 开启自动轮播，false则只能手动滑动切换
      .autoPlay(true)
      // interval(1000) 自动切换间隔时间，单位毫秒，1000ms = 1秒切换一张
      .interval(1000)
      // loop(true) 开启无限循环，滑到最后一张会自动切回第一张无缝播放
      .loop(true)
    }
  }
}

运行代码

显示图片 (Image)

开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、jpeg等格式，不支持apng和svga格式，具体支持格式和用法请参考Image组件。

代码解析

// @Entry：页面入口装饰器，标识当前结构体是独立页面，可直接预览运行
// @Component：自定义UI组件装饰器，代表该结构体为ArkUI界面组件
@Entry
@Component
// 定义页面组件，组件名称为ImageDemo1
struct ImageDemo1 {
  // build()：组件渲染核心函数，所有页面UI布局全部编写在该函数内
  build() {
    // Column垂直布局容器，space:20 设置内部所有子组件上下间距为20像素
    Column({ space: 20 }) {
      // 文本组件，展示标题文字
      Text('欢迎来到河北软件职业技术学院')
        .fontSize(30)          // 设置文字字号30
        .fontWeight(FontWeight.Bolder) // 文字加粗
        .width('100%')         // 文本宽度占满父容器Column
        .textAlign(TextAlign.Center)   // 文字水平居中对齐
        .padding(20)           // 文本四周内边距20

      // 图片组件，加载media文件夹下名为first的图片资源
      Image($r('app.media.first'))
        .width('90%')          // 图片宽度占父容器90%，左右留有边距
        .height(200)           // 图片固定高度200px
        .borderRadius(15)      // 图片圆角，圆角半径15px
        // objectFit(ImageFit.Cover)：图片等比例放大铺满容器，超出区域裁剪，不变形
        .objectFit(ImageFit.Cover)

      // Row水平布局容器，内部子元素左右横向排列
      Row(){
        // 嵌套Column垂直布局，放置两段文字
        Column(){
          Text("鸿蒙应用开发")
            .fontSize(24)              // 字号24
            .width('45%')              // 宽度占父Row的45%
            .textAlign(TextAlign.Center) // 文字居中
          Text("ArkUI实战开发")
            .fontSize(20)              // 字号20
            .width('45%')              // 宽度占父Row的45%
            .textAlign(TextAlign.Center) // 文字居中
        }
        // 右侧图片，加载Second图片资源
        Image($r('app.media.Second'))
          .width('40%') // 图片宽度占父Row的40%
      }
    }
    // 最外层Column宽高铺满整个手机屏幕
    .width('100%')
    .height('100%')
  }
}

运行代码

视频播放 (Video)

Video组件用于播放视频文件并控制其播放状态，常用于短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。具体用法请参考Video。

代码解析

// @Entry 页面入口装饰器，代表当前结构体是独立页面，可直接预览运行
// @Component 自定义组件装饰器，标识这是一个ArkUI界面组件
@Entry
@Component
struct Index {
  // 私有变量：视频资源，$rawfile读取entry/src/main/resources/rawfile目录下sd.mp4视频文件
  private videoSrc: Resource = $rawfile('sd.mp4')
  // 私有变量：视频封面图片资源，读取media文件夹下first图片
  private pict: Resource = $r('app.media.first')
  // 创建视频控制器实例，用来代码控制视频播放、暂停、跳转等操作
  private contorller: VideoController = new VideoController()

  // build函数：页面UI渲染入口，所有布局组件都写在此处
  build() {
    // 外层垂直布局Column，space:50 内部所有子组件上下间距50px
    Column({ space: 50 }) {
      // 文本标题组件
      Text("鸿蒙应用开发视频")
        .fontSize(26)                // 设置文字大小26号
        .fontWeight(FontWeight.Bold) // 文字加粗

      // Video视频播放组件，接收资源、封面、控制器三个参数
      Video({
        // src：绑定播放的视频资源，对应上方videoSrc变量
        src: this.videoSrc,
        // previewUri：视频未播放时展示的封面图片
        previewUri: this.pict,
        // controller：绑定视频控制器，实现代码操控视频
        controller: this.contorller
      })
      .height('45%')    // 视频高度占父容器45%
      .width('90%')     // 视频宽度占父容器90%，左右留白
      .muted(true)      // 开启静音播放，视频无声音
      .loop(true)       // 开启循环播放，播放完毕自动重头播放
      .autoPlay(false)  // 关闭自动播放，进入页面不会自动播放视频
      .controls(true)   // 显示系统自带视频控制条（播放/暂停、进度、音量按钮）

      // 按钮组件，文字为“开始学习”
      Button("开始学习")
        .borderRadius(8)                // 按钮圆角8px
        .width(100)                     // 按钮固定宽度100px
        .height(50)                     // 按钮固定高度50px
        .border({ width: 3, color: Color.Black }) // 边框宽度3px、黑色边框

    }
    .width('100%')                          // 外层Column宽度铺满全屏
    .height('100%')                         // 外层Column高度铺满全屏
    .justifyContent(FlexAlign.Center)       // 内部所有组件垂直居中排布
    .padding(15)                            // 容器整体四周内边距15px
  }
}

运行代码

选项卡 (Tabs)

概念

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

// @Entry：页面入口装饰器，当前结构体为独立页面，可直接预览
// @Component：自定义UI组件装饰器，标识这是ArkUI界面组件
@Entry
@Component
// 定义底部标签页组件，名称TabsBase1
struct TabsBase1{
  // build()：页面UI渲染核心函数，所有布局组件写在内部
  build(){
    // Tabs：鸿蒙原生标签页容器组件，实现多页面切换（底部导航/顶部导航）
    Tabs(){
      // 第一个标签内容块
      TabContent(){
        // 当前标签内展示文本
        Text('首页页面')
          .fontSize(24) // 文字字号24
      }
      .tabBar('首页') // 设置该标签对应的导航文字：首页

      // 第二个标签内容块
      TabContent(){
        Text('分类页面')
          .fontSize(24)
      }
      .tabBar('分类') // 导航栏文字：分类

      // 第三个标签内容块
      TabContent(){
        Text('个人中心页面')
          .fontSize(24)
      }
      .tabBar('个人中心') // 导航栏文字：个人中心

      // 第四个标签内容块
      TabContent(){
        Text('关于我们页面')
          .fontSize(24)
      }
      .tabBar('关于我们') // 导航栏文字：关于我们
    }
    // barPosition(BarPosition.Start)：控制标签导航栏位置
    // BarPosition.Start：导航栏在页面顶部；BarPosition.End：导航栏在页面底部
    .barPosition(BarPosition.Start)
  }
}

代码运行

文本/输入框（Test/TestInput）

概念

TextInput、TextArea是输入框组件，用于响应用户输入，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法请参考TextInput和TextArea组件的API文档。Search是特殊的输入框组件，称为搜索框，默认样式包含搜索图标。具体用法请参考Search组件的API文档。

代码解析

// @Entry：页面入口装饰器，标记当前结构体为独立页面，可直接预览运行
// @Component：自定义UI组件装饰器，代表该结构体是ArkUI界面组件
@Entry
@Component
// 定义页面组件名称 TextDemo
struct TextDemo {
  // build()：页面渲染核心函数，所有UI布局、组件都写在该函数内
  build() {
    // Column垂直布局容器，space:20 设置内部所有子组件上下间距20像素
    Column({ space: 20 }) {
      // 标题文本组件
      Text('个人信息采集页面')
        .fontSize(30)                    // 文字大小30
        .fontColor(Color.Black)          // 文字颜色黑色
        .fontWeight(FontWeight.Bolder)   // 文字加粗
        .textAlign(TextAlign.Center)     // 文字水平居中
        .width('100%')                   // 文本宽度占满父容器

      // 输入框组件，placeholder为输入框默认灰色提示文字
      TextInput({placeholder:"输入姓名："})
        .type(InputType.Normal)          // 输入类型：普通文本，可输入汉字、数字、字母
        .height(70)                      // 输入框固定高度70px
        .width(280)                      // 输入框固定宽度280px
        .backgroundColor(0xd5d5d5)       // 背景浅灰色十六进制色值
        .borderRadius(24)                // 输入框圆角24px，圆角大更柔和

      // 年龄输入框
      TextInput({placeholder:"输入年龄："})
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(0xd5d5d5)
        .borderRadius(24)

      // 手机号输入框
      TextInput({placeholder:"输入手机号："})
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(0xd5d5d5)
        .borderRadius(24)

      // 邮箱输入框
      TextInput({placeholder:"输入电子邮件："})
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(0xd5d5d5)
        .borderRadius(24)

      // 班级输入框
      TextInput({placeholder:"输入所在班级："})
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(0xd5d5d5)
        .borderRadius(24)

    }
    .height('100%')                          // 外层垂直容器高度铺满全屏
    .width('100%')                           // 外层垂直容器宽度铺满全屏
    .justifyContent(FlexAlign.Center)        // 内部所有组件整体垂直居中
  }
}

运行代码

按钮 (Button)

概述

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮、圆角矩形按钮。Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。

// @Entry：页面入口装饰器，当前结构体为独立页面，可直接预览运行
// @Component：自定义UI组件装饰器，标识该结构体是ArkUI界面组件
@Entry
@Component
// 组件名称ButtonDemo1，用来展示四种不同样式按钮
struct ButtonDemo1 {
  // build()：页面渲染核心函数，所有UI组件写在此函数内
  build() {
    // Column垂直布局容器，space:20 设置内部按钮上下间距20px
    Column({ space: 20 }) {
      // 按钮1：默认样式提交按钮
      Button('确认提交')
        .height(50)          // 按钮高度50px
        .width(150)          // 按钮宽度150px
        .fontSize(26)        // 按钮文字字号26
        .borderRadius(35)    // 圆角35，接近胶囊按钮样式

      // 按钮2：灰色取消按钮，自定义背景色
      Button('取消操作')
        .height(50)
        .backgroundColor(0x999999) // 十六进制灰色背景
        .width(150)
        .fontSize(26)
        .borderRadius(35)

      // 按钮3：红色危险删除按钮
      Button('确认删除')
        .height(50)
        .width(150)
        .backgroundColor(0xf53f3f) // 红色背景，代表危险操作
        .fontSize(26)
        .borderRadius(35)

      // 按钮4：透明背景描边登录按钮
      Button('登录')
        .height(50)
        .width(150)
        .backgroundColor(Color.Transparent) // 背景完全透明
        .fontColor(Color.Black)             // 文字黑色
        .border({width:7, color:0x007DFF})  // 蓝色边框，粗细7px
        .fontSize(26)
        .borderRadius(35)
    }
    .width('100%')                          // 外层Column宽度铺满全屏
    .height('100%')                         // 外层Column高度铺满全屏
    .justifyContent(FlexAlign.Center)       // 内部所有按钮整体垂直居中显示
  }
}

代码运行

单选框 (Radio)

Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考Radio。

代码解析

// @Entry：页面入口装饰器，当前结构体可作为独立页面直接预览
// @Component：自定义ArkUI组件装饰器，标识这是UI页面组件
@Entry
@Component
// 组件名称RadioDemo，单选框表单页面
struct RadioDemo {
  // build()：页面渲染主函数，所有界面组件都写在该方法内
  build() {
    // Column垂直布局容器，space:20 内部组件上下间距20px
    Column({ space: 20 }) {
      // 页面标题文本
      Text('填写个人信息')
        .fontSize(28)                // 文字大小28
        .fontWeight(FontWeight.Bold) // 文字加粗

      // 第一行：姓名输入区域，Row水平布局实现文字+输入框横向排列
      Row() {
        Text('姓名：')
          .fontSize(22)
        // 单行输入框，无默认提示文字
        TextInput({ placeholder: '' })
          .width(200)
          .height(40)
      }

      // 第二行：性别单选框组
      Row() {
        Text('性别：')
          .fontSize(22)
        // 单选框组件，value为选中值，group分组名sex
        // 同一group下的Radio互斥，只能选一个
        Radio({ value: '男', group: 'sex' })
          .height(30)
          .width(30)
        Text('男')
          .fontSize(20)
          .margin({ right: 20 }) // 右侧外边距20，和下一个单选框隔开
        Radio({ value: '女', group: 'sex' })
          .height(30)
          .width(30)
        Text('女')
          .fontSize(20)
      }

      // 第三行：年龄输入框
      Row() {
        Text('年龄：')
          .fontSize(22)
        TextInput({ placeholder: '' })
          .width(200)
          .height(40)
      }

      // 第四行：学历单选框组，分组名education，与性别分组隔离互不干扰
      Row() {
        Text('学历：')
          .fontSize(22)
        Radio({ value: '本科', group: 'education' })
          .height(30)
          .width(30)
        Text('本科')
          .fontSize(20)
          .margin({ right: 30 })
        Radio({ value: '专科', group: 'education' })
          .height(30)
          .width(30)
        Text('专科')
          .fontSize(20)
      }

      // 表单提交按钮
      Button('提交')
        .width(120)
        .height(45)
        .fontSize(20)
        .margin({ top: 20 }) // 按钮上方额外间距20px
    }
    .width('100%')  // 外层垂直容器宽度铺满屏幕
    .height('100%') // 外层垂直容器高度铺满屏幕
    .padding({ top: 50 }) // 容器顶部内边距50，整体内容向下偏移
  }
}

运行代码

切换按钮 (Toggle)

Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。具体用法请参考Toggle。

代码解析

// @Entry 页面入口装饰器，该结构体可独立预览运行
// @Component ArkUI自定义组件装饰器
@Entry
@Component
// 组件名 ToggleDemo，用于演示开关、复选框两种切换组件
struct ToggleDemo{
  // build 页面渲染函数，所有UI组件在此定义
  build(){
    // Column 垂直布局容器，内部组件上下排列
    Column(){
      // 第一个Toggle：滑动开关样式
      Toggle({
        type: ToggleType.Switch, // 组件类型：滑动开关
        isOn: true               // 默认选中开启状态
      })
        .width(150)                // 宽度150px
        .height(50)                // 高度50px
        .selectedColor(Color.Red)  // 开启后的高亮颜色设为红色
        .id('n1')                  // 给组件设置唯一标识id，用于获取组件实例

      // 第二个Toggle：复选框样式
      Toggle({
        type: ToggleType.Checkbox, // 组件类型：复选框方框
        isOn: false                // 默认未勾选关闭状态
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)  // 勾选后方框填充红色
        .id('n2')                  // 唯一标识id
    }
    .width('100%')  // 垂直容器宽度铺满屏幕
    .height('100%') // 垂直容器高度铺满屏幕
  }
}

运行代码