ArkTS 常用基础组件汇总

Wmh_1231

242人浏览 · 2026-06-23 10:56:55

Wmh_1231 · 2026-06-23 10:56:55 发布

1. 视频组件 Video

用于播放本地 / 网络视频资源，可控制播放、暂停、进度、循环等属性。

实例：

@Entry
@Component
struct Index {
  private videoSrc: Resource = $rawfile('01.mp4')
  // 视频封面图
  private pict: Resource = $r('app.media.background')
  // 视频控制器
  private controller: VideoController = new VideoController()

  build() {
    Column({space:20}) {
      Text("鸿蒙应用开发视频资源")
        .fontSize(22)
        .margin({ bottom: 15 })
      Video({
        src: this.videoSrc,
        previewUri: this.pict,
        controller: this.controller
      })
        .height('45%')
        .muted(true)            // 静音播放
        .loop(true)             // 循环播放
        .autoPlay(false)        // 进入页面不自动播放
        .controls(true)         // 显示系统播放控制条


      Button("开始学习", { stateEffect: true })
        .fontSize(20)
        .backgroundColor("#409EFF")
        .borderRadius(12)
        .height(50)
        .width('90%')
        .margin({ bottom: 20 })
    }
    .width('100%')
    .height('100%')
  }
}

2. 图片组件 Image

加载展示图片素材，存放路径 resources/base/media；搭配 objectFit 设置图片铺满裁剪 / 完整显示适配模式，常用做头像、页面配图。

实例：

@Entry
@Component
struct ImageDemo1{
  build() {
    Column({space:20}){
      // 顶部欢迎文本
      Text('欢迎来到河北软件职业技术学院')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .textAlign(TextAlign.Center)
        .padding(20)

      // 图片组件
      Image($r('app.media.04'))
        .width('90%')
        .height(200)
        .borderRadius(15)
        .objectFit(ImageFit.Cover)
    }
    .width('100%')
    .height('100%')
  }
}

3. 选项卡 Tabs（标签页）

由 Tabs + TabContent 构成，点击顶部标签切换不同页面内容，常用于分类页面、App 底部导航栏。

实例：

@Entry
@Component
struct TabBase1{
  build() {
    Tabs(){
      TabContent(){
        Text('首页页面')
          .fontSize(24)
      }
      .tabBar('首页')

      TabContent(){
        Text('分类页面')
          .fontSize(24)
      }
      .tabBar('分类')

      TabContent(){
        Text('个人中心页面')
          .fontSize(24)
      }
      .tabBar('个人中心')

      TabContent(){
        Text('关于我们页面')
          .fontSize(24)
      }
      .tabBar('关于我们')
    }
    .barPosition(BarPosition.Start)
  }
}

4. 文本 Text / 输入框 TextInput

Text：静态展示文字，不可编辑，可设置字号、颜色、对齐样式
TextInput：可输入交互框，用户填写账号密码；配合 @State 实现输入内容实时同步

实例：

@Entry
@Component
struct TextDemo{
  build() {
    Column(){
      Text('这是一段文本！')
        .fontSize(30)
        .fontColor(0xd5d5d5)
        .fontWeight(FontWeight.Bolder)
        .textAlign(TextAlign.Center)
        .width('100%')

      TextInput({placeholder:"请输入账号:"})
        .type(InputType.Normal)
        .height(70)
        .width(200)
        .backgroundColor(0xd5d5d5)
        .borderRadius(24)
    }
    .height('100%')
    .width('100%')
  }
}

5. 按钮 Button

点击交互控件，绑定 onClick 点击事件；可自定义宽高、背景色、圆角，用来提交、切换状态、页面跳转。

实例：

@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)
        .width(150)
        .backgroundColor(0xf53f3f)
        .fontSize(26)
        .borderRadius(35)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

6. 单选框 Radio

配合 RadioGroup 分组使用，同一组内只能选中一个选项，适用于性别选择、单选题场景。

实例：

@Entry
@Component
struct RadioDemo1 {
  // 三组独立选中状态
  @State ans1: string = 'Radio2'
  @State ans2: string = 'B'
  @State sex: string = '男'

  build() {
    Column() {
      // 第一题
      Text('第一题')
        .fontSize(20)
        .margin({ bottom: 8 })
      Radio({ value: 'Radio1', group: 'g1' })
        .checked(this.ans1 === 'Radio1')
        .onChange(b => b && (this.ans1 = 'Radio1'))
      Radio({ value: 'Radio2', group: 'g1' })
        .checked(this.ans1 === 'Radio2')
        .onChange(b => b && (this.ans1 = 'Radio2'))
      Radio({ value: 'Radio3', group: 'g1' })
        .checked(this.ans1 === 'Radio3')
        .onChange(b => b && (this.ans1 = 'Radio3'))
      Radio({ value: 'Radio4', group: 'g1' })
        .checked(this.ans1 === 'Radio4')
        .onChange(b => b && (this.ans1 = 'Radio4'))

      // 第二题
      Text('第二题')
        .fontSize(20)
        .margin({ top: 15, bottom: 8 })
      Radio({ value: 'A', group: 'g2' })
        .checked(this.ans2 === 'A')
        .onChange(b => b && (this.ans2 = 'A'))
      Radio({ value: 'B', group: 'g2' })
        .checked(this.ans2 === 'B')
        .onChange(b => b && (this.ans2 = 'B'))

      // 性别行布局
      Row() {
        Text('性别：')
          .fontSize(24)
        Radio({ value: '男', group: 'g3' })
          .width(30)
          .height(30)
          .checked(this.sex === '男')
          .onChange(b => b && (this.sex = '男'))
        Text('男')
          .fontSize(20)
          .margin({ right: 20 })
        Radio({ value: '女', group: 'g3' })
          .width(30)
          .height(30)
          .checked(this.sex === '女')
          .onChange(b => b && (this.sex = '女'))
        Text('女')
          .fontSize(20)
      }
      .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .padding(30)
    .alignItems(HorizontalAlign.Center)
  }
}

7. Toggle 开关组件

自带滑动开关样式，布尔值控制开启 / 关闭状态，和按钮状态切换逻辑类似，多用于设置类开关功能。

实例：

@Entry
@Component
struct ToggleDemo{
  // 定义状态变量绑定开关状态
  @State switchState: boolean = true
  @State checkState: boolean = false

  build() {
    Column() {
      Toggle({
        type: ToggleType.Switch,
        isOn: this.switchState
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .id('n1')
        // 监听开关切换事件
        .onChange((isOn: boolean)=>{
          this.switchState = isOn
          console.info("滑动开关状态：", isOn ? "开启" : "关闭")
        })

      Toggle({
        type: ToggleType.Checkbox,
        isOn: this.checkState
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .id('n2')
        // 监听复选框切换事件
        .onChange((isOn: boolean)=>{
          this.checkState = isOn
          console.info("复选框状态：", isOn ? "勾选" : "未勾选")
        })
    }
    .width('100%')
    .height('100%')
    .padding(30)
  }
}