一、图片 Image

Image 组件用于在界面中展示图片资源，是 UI 开发中最常用的组件之一。

插入自定义图片，在DevEco Studio软件，main文件下,resources文件下，base中media下，拖拽重构即可插入图片。

案例：圆形头像

Image($r('app.media.2'))
  .width(100)
  .height(100)
  .borderRadius(50)              // 图片弧度，数值等于宽高一半，即为正圆
  .objectFit(ImageFit.Cover)     // 等比裁剪填充，防止变形

 5.图片轮播

配合 Swiper 实现自动轮播的图片banner，常用于广告、课程推荐等页面。

private bannerList: Resource[] = [
  $r('app.media.02'),
  $r('app.media.2'),
  $r('app.media.startIcon')
]

Swiper() {
  ForEach(this.bannerList, (item: Resource) => {
    Image(item).objectFit(ImageFit.Cover)
  })
}
  .width('100%')
  .height(180)
  .indicator(true)
  .autoPlay(true)
  .interval(3000)
  .loop(true)

二、文本 Text 与输入框 TextInput

2.1 固定文本 Text

Text 组件用于显示静态文字内容。

Text('欢迎来到河北软件职业技术学院')
  .fontSize(38)
  .fontWeight(FontWeight.Bolder)

2.2 单行输入框 TextInput

TextInput 用于接收用户输入，是登录、注册、表单页面的核心组件。

TextInput({ placeholder: "手机号码" })
  .width(320)
  .height(60)
  .backgroundColor(0xf5f5f5)
  .fontSize(20)
  .borderRadius(10)
TextInput({ placeholder: "请输入密码" })
  .type(InputType.Password)
  .width(320)
  .height(60)
  .backgroundColor(0xf5f5f5)
  .borderRadius(10)

三、按钮 Button

3.1 基础按钮

Button('登录')
  .height(50)
  .width(200)
  .fontSize(25)
  .backgroundColor(Color.Blue)
  .borderRadius(20)

3.2 胶囊按钮

Button('点我一下')
  .type(ButtonType.Capsule)    // 胶囊样式
  .backgroundColor('#FF0000')
  .width('30%')
  .height('10%')
  .margin({ top: 20 })

四、单选框 Radio

Radio 单选框用于从多个选项中选择唯一一项，同一 group 内的选项互斥。

案例：性别和学历选项

// 性别组
Row() {
  Text('性别：').fontSize(28)
  Radio({ value: 'boy', group: 'sex' }).checked(true)
  Text('男').fontSize(16).margin({ right: 50 })
  Radio({ value: 'girl', group: 'sex' })
  Text('女').fontSize(16)
}

// 学历组
Row() {
  Text('学历：').fontSize(28)
  Radio({ value: 'dazhuan', group: 'xueli' })
  Text('大专').fontSize(16).margin({ right: 50 })
  Radio({ value: 'benke', group: 'xueli' }).checked(true)
  Text('本科').fontSize(16)
}

五、切换 Toggle

Toggle 是一种开关控件，用于开启/关闭某个状态。

案例：Switch 开关

Toggle({
  type: ToggleType.Switch,
  isOn: this.isShow
})
  .height(38)
  .width(80)
  .selectedColor(Color.Blue)
  .onChange((value: boolean) => {
    this.isShow = value
  })

六、综合实战：个人信息展示

@Entry
@Component
struct PersonPage {
  @State isShow: boolean = false

  build() {
    Column({ space: 20 }) {
      // 头像区域
      Stack() {
        Image($r('app.media.2'))
          .width(100).height(100)
          .borderRadius(50)
          .objectFit(ImageFit.Cover)
        Text("VIP")
          .fontSize(24).fontColor(Color.White)
          .backgroundColor(0xff3333)
          .padding(5).borderRadius(7)
      }

      // 用户信息
      Column() {
        Text('鸿蒙开发者：张三').fontSize(22).fontWeight(FontWeight.Medium)
        Text('计算机软件工程系').fontSize(22).fontColor(Color.Green)
      }

      // 功能按钮
      Row({ space: 20 }) {
        Button('开始学习').backgroundColor(Color.Pink)
        Button('开始考试').backgroundColor(Color.Pink)
      }
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

六、总结

常用基础组件 文本 Text：展示静态文字，设置字号、颜色、对齐 输入框 TextInput：接收用户输入

 按钮 Button：点击交互控件

 Toggle 滑动开关：布尔状态选择器，样式 ToggleType.Switch Radio

单选框：多选一选项组

Image 图片：加载本地 / 网络图片资源 。

Swiper 轮播图、Tabs 选项卡请看，鸿蒙 ArkTS 常用五大布局组件实战总结｜Tabs、Swiper、RelativeContainer 、Flex、Stack从原理到例子。

Video 视频请看ArkUI Video 组件。

如有雷同，请勿追责！！！