鸿蒙 ArkTS 常用基础组件总结

Wmh_1231

50人浏览 · 2026-06-22 15:54:49

Wmh_1231 · 2026-06-22 15:54:49 发布

一、回顾之前全部布局组件

Column：垂直纵向线性布局，元素从上往下排
Row：水平横向线性布局，元素从左往右排
Flex：弹性布局，可横可竖、支持自动换行、自适应均分宽度
RelativeContainer：相对布局，组件依靠锚点互相定位，排版更自由
Stack：层叠布局，组件前后堆叠覆盖摆放
Swiper：轮播滑动组件，左右 / 上下滑动切换页面，可自动轮播
Tabs（选项卡）：标签页布局，点击顶部标签切换不同内容面板

二、新学的常用基础组件

1. Text / TextInput（文字类）

Text：静态文本组件，只用来展示文字，不可编辑输入
TextInput：输入框组件，允许用户手动打字输入内容，常用于登录账号、填写表单

实例：

@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%')
  }
}

2. 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)
  }
}

3. Image 图片组件

用来加载显示本地 / 网络图片
可设置宽高、缩放模式、圆角、透明度等样式
调用的图片路径：打开项目，resources/base/media 目录下。

实例：

@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%')
  }
}

4. 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)
  }
}