鸿蒙 ArkUI 实战：图片、按钮、单选组件完整案例教程

小田不甜...

182人浏览 · 2026-06-26 08:35:05

小田不甜... · 2026-06-26 08:35:05 发布

前言

ArkUI 是鸿蒙应用核心 UI 开发框架，日常开发离不开图片展示、按钮交互、单选选择这三类高频组件。本文整合轮播图、登录按钮、Radio 单选、Stack 层叠图文全套可运行 ArkTS 代码，分模块讲解使用场景、核心属性与代码实现，适合鸿蒙开发新手练手。

一、图片相关组件（Image + Swiper + Stack）

1.1 Swiper 轮播图模块

场景：首页广告横幅、banner 自动轮播，支持指示器、自动播放、无限循环。

arkts

@Entry
@Component
struct ImageDemo {
  build() {
    Column({ space: 20 }) {
      Text('这是一个轮播图展示页面')
        .fontSize(30)
        .fontWeight(FontWeight.Bolder)
      Swiper() {
        Image($r('app.media.cover'))
        Image($r('app.media.banner1'))
        Image($r('app.media.banner2'))
      }.width('100%')
      .height(100)
      .indicator(true)       // 开启轮播圆点指示器
      .autoPlay(true)        // 自动播放
      .interval(3000)        // 切换间隔3秒
      .loop(true)            // 循环轮播
    }
    .padding(10)
  }
}

核心属性说明：

autoPlay：是否自动轮播
interval：切换毫秒时长
indicator：底部小圆点指示器
loop：是否首尾循环

1.2 Stack 层叠图文组件

场景：图片上叠加文字标签、封面标题，层叠布局 Stack 实现上下覆盖效果。

arkts

@Entry
@Component
struct ImageStackDemo {
  build() {
    Column() {
      Text("鸿蒙应用开发实战课程")
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({top:30})

      Stack() {
        // 底层背景图
        Image($r('app.media.background'))
          .width(320)
          .height(180)
          .borderRadius(15)
          .objectFit(ImageFit.Cover)
        // 上层悬浮文字
        Text('ArkUI组件练习')
          .fontSize(22)
          .fontColor(Color.White)
          .backgroundColor(0x550000)
          .padding({left: 15, right: 15, top: 6, bottom: 6})
          .borderRadius(8)
      }
      .width('100%')
      .height('40%')

      Button('开始学习')
        .width('180')
        .height('50')
        .fontSize(26)
        .backgroundImage($r('app.media.background'))
        .borderRadius(8)
    }
    .width('100%')
    .height('100%')
  }
}

1.3 圆形头像图片

搭配登录页面使用，通过borderRadius设置圆角实现圆形头像：

arkts

Image($r('app.media.cover'))
  .width(120)
  .height(120)
  .borderRadius(60)

二、Button 按钮组件全套案例

按钮是页面交互核心，分为登录双按钮、多操作按钮、路由返回按钮三类场景。

2.1 简易登录页（登录 / 清空双按钮）

搭配头像、用户名密码输入框，横向排列两个功能按钮：

arkts

@Entry
@Component
struct ImageDemo {
  build() {
    Column({space:30}) {
      Image($r('app.media.cover'))
        .width(120)
        .height(120)
        .borderRadius(60)

      Text("账号登录")
        .fontSize(30)
        .width('100%')
        .textAlign(TextAlign.Center)

      Row({}) {
        TextInput({ placeholder: "请输入用户名" })
          .width(260)
          .height(60)
          .backgroundColor(0xf5f5f5)
          .fontSize(40)
          .borderRadius(10)
      }
      Row({}) {
        TextInput({ placeholder: "请输入密码" })
          .type(InputType.Password)
          .width(260)
          .height(60)
          .backgroundColor(0xf5f5f5)
          .fontSize(40)
          .borderRadius(10)
      }
      // 横向两个按钮
      Row({space:15}) {
        Button('登录')
          .width('140')
          .height('50')
          .fontSize(26)
          .backgroundImage($r('app.media.background'))
          .borderRadius(8)

        Button('清空')
          .width('140')
          .height('50')
          .fontSize(26)
          .backgroundImage($r('app.media.background'))
          .borderRadius(8)
      }
    }.width('100%')
    .height('100%')
    .padding(15)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

2.2 多操作按钮（确认 / 取消 / 注册）

区分不同业务按钮配色，主按钮通栏展示，次要按钮横向并排：

arkts

@Entry
@Component
struct ButtonDemo1 {
  build() {
    Column({ space: 30 }) {
      Text('用户登录')
        .fontSize(38)
        .fontWeight(FontWeight.Bolder)
        .margin({ bottom: 20 })

      TextInput({ placeholder: "请输入学号/手机号码" })
        .width(320)
        .height(60)
        .backgroundColor(0xf5f5f5)
        .fontSize(40)
        .borderRadius(10)

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

      // 主操作按钮
      Button("确认")
        .width(300)
        .height(50)
        .backgroundColor(0x007DFF)
        .fontSize(20)
        .borderRadius(18)

      // 次要操作按钮组
      Row({ space: 25 }) {
        Button("取消操作")
          .width(140)
          .height(50)
          .backgroundColor(0x999999)
          .fontSize(20)
          .borderRadius(18)

        Button("立即注册")
          .width(140)
          .height(50)
          .backgroundColor(0xf53f3f)
          .fontSize(20)
          .borderRadius(18)
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

2.3 路由返回按钮（页面跳转交互）

引入router实现页面返回，按钮绑定onClick点击事件：

arkts

import { router } from '@kit.ArkUI';

@Entry
@Component
struct ButtonDemo2 {
  build() {
    Column() {
      Text('进入主界面')
        .fontSize(30)
        .margin({ bottom: 20 })

      Button('返回登录')
        .onClick(() => {
          router.back(); // 返回上一页
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

Button 核心知识点：

onClick：绑定点击触发事件，支持路由、弹窗、表单提交等逻辑
backgroundColor：纯色按钮背景
backgroundImage：图片背景按钮
borderRadius：圆角美化按钮样式

三、Radio 单选选择组件（表单填写）

Radio 为单选框组件，通过相同group属性实现互斥选择，多用于性别、学历、选择题表单。

完整个人信息填写页面

arkts

@Entry
@Component
struct RadioDemo{
  build() {
    Column(){
      Text('填写个人信息')
        .fontSize(45)
      Row() {
        Text('姓名:')
          .fontSize(20)
        TextInput({ placeholder: "请输入姓名" })
          .width(240)
          .height(60)
          .backgroundColor(0xf5f5f5)
          .fontSize(40)
          .borderRadius(10)
      }
      // 性别单选组 group统一为sex
      Row(){
        Text('性别:         ')
          .fontSize(20)
        Radio({value:'boy',group:'sex'})
          .height(30)
          .width(30)
          .checked(true) // 默认选中男
        Text('男       ')
          .fontSize(16)
          .margin({right:50})
        Radio({value:'gril',group:'sex'})
          .height(30)
          .width(30)
        Text('女')
          .fontSize(16)
      }
      Row() {
        Text('年龄:')
          .fontSize(20)
        TextInput({ placeholder: "请输入年龄" })
          .width(240)
          .height(60)
          .backgroundColor(0xf5f5f5)
          .fontSize(40)
          .borderRadius(10)
      }
      // 学历单选组
      Column() {
        Row() {
          Text('学历:          ')
            .fontSize(20)
          Radio({ value: 'benke', group: 'edu' })
            .height(30)
            .width(30)
            .checked(true)
          Text(' 本科 ')
            .fontSize(16)
            .margin({ right: 30 })
          Radio({ value: 'zhuan', group: 'edu' })
            .height(30)
            .width(30)
          Text('专科')
            .fontSize(16)
        }
      }
      // 提交按钮
      Button('提交')
        .width('180')
        .height('50')
        .fontSize(26)
        .backgroundImage($r('app.media.background'))
        .borderRadius(8)
    }
    .width('100%')
    .height('100%')
  }
}

Radio 关键规则：

同一组单选框group名称必须完全一致，才能互斥单选
value区分选中项，用于后续表单取值
checked(true)设置默认选中选项

四、组件开发总结

图片组件
- Image：展示本地媒体资源，支持圆角、填充适配
- Swiper：实现轮播横幅，首页必备
- Stack：层叠布局，实现图片叠加文字效果
Button 按钮组件
- 支持纯色 / 图片两种背景样式
- onClick绑定点击事件，可配合 router 完成页面跳转
- 多按钮使用 Row 横向排列，区分主次按钮配色
Radio 单选组件
- 依靠 group 分组实现单选互斥
- 多用于表单、选择题、选项筛选场景

全部代码复制到鸿蒙项目 pages 页面即可直接运行，仅需自行在 media 目录放入对应图片资源，适合新手完成 ArkUI 基础组件实训作业。

HarmonyOS开发者社区

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

更多推荐

智能修图：AI消除、超分、扩图功能实现（285）

在鸿蒙（HarmonyOS）生态中实现 AI 智能修图（如 AI 消除、超分、扩图），主要分为面向普通用户的和面向开发者的两个维度。

HarmonyOS开发者社区

文档摘要：长文档自动提炼核心观点（288）

对于涉及商业机密或个人隐私的文档处理，鸿蒙支持将轻量化大模型部署在设备端，实现完全离线的文档摘要。核心特性数据不出端：文档解析与摘要生成均在本地 NPU 隔离区域内完成，从底层保障数据隐私安全。秒级响应：结合鸿蒙分布式文件系统与端侧摘要模型，冗长的合同或报告可在秒级内提炼出核心要点（如生成 500 字精简版）。智能文件管理：结合本地大模型驱动的文档摘要功能，系统可实现“文件找人”，根据关键词自动聚