组件

HarmonyOS ArkUI 常用基础组件总述

组件是页面上所有可展示、可交互的最小单元，布局容器用来规划页面排版，各类功能组件承载图文、交互逻辑。以下为开发中高频使用的 8 类核心组件，包含组件名称、对应 API、功能说明、适用场景与基础示例代码。

1. 轮播图（Swiper）

• 对应组件：Swiper + SwiperItem
• 功能：多张图片 / 页面横向自动滑动切换，自带指示器
• 适用场景：首页校园宣传图、商品海报、活动 banner
• 核心常用属性：
  • autoPlay(true)：开启自动轮播
  • interval(3000)：切换间隔 3 秒
  • loop(true)：循环播放
  • indicator(true)：显示底部小圆点
• 基础示例：

ets

Swiper(){

  Swiper (){ Image($r("app.media.1")) }

  Swiper (){ Image($r("app.media.2")) }

}

.width("100%")

.height(180)

.autoPlay(true)

2. 视频（Video）

注意：要用模拟器打开

• 对应组件：Video
• 功能：播放本地 / 网络视频，支持进度条、播放暂停控制
• 适用场景：校园宣传片、课程视频、媒体播放页面
• 关键配置：需在 module.json5 添加网络权限ohos.permission.INTERNET加载网络视频
• 基础示例：

ets

Video($r("app.media.video"))

  .width("100%")

  .height(220)

  .controls(true) // 显示播放控制器

3. 图片（Image）

• 对应组件：Image
• 功能：加载本地媒体图片、网络图片，支持圆角、拉伸适配
• 资源引用写法：
  • 本地资源：$r("app.media.图片文件名")
  • 网络图片：$rawfile("网络地址")
• 常用适配属性：.objectFit(ImageFit.Cover)（等比铺满裁剪）
• 基础示例：

ets

Image($r("app.media.school"))

  .width(120)

  .height(120)

  .borderRadius(60) // 圆形头像

4. 选项卡（Tabs + TabContent）

• 对应组件：Tabs + TabContent
• 功能：多页面标签切换，顶部 / 底部导航栏
• 强制规则：Tabs直接子组件只能是TabContent，每个 TabContent 必须绑定.tabBar("标签文字")
• 适用场景：校园多模块页面（学校简介、系部、班级、个人中心）
• 基础示例：

ets

Tabs(){

  TabContent(){ Text("学校简介内容") }.tabBar("学校简介")

  TabContent(){ Text("系部介绍内容") }.tabBar("系部介绍")

}

.barPosition(BarPosition.Start)

5. 文本 / 输入框

（1）文本组件 Text

• 作用：展示静态文字、标题、描述内容
• 常用样式：fontSize字号、fontColor文字颜色、lineHeight行高

ets

Text("欢迎来到河北软件职业技术学院")

  .fontSize(24)

  .fontColor(Color.Black)

（2）输入框 TextInput

• 作用：接收用户文字输入，登录、表单填写场景
• 常用属性：placeholder提示文字、type(InputType.Normal)普通文本

ets

TextInput({placeholder:"请输入姓名"})

  .width("90%")

  .height(44)

6. 按钮（Button）

• 对应组件：Button
• 功能：点击交互触发逻辑（页面跳转、提交表单、弹窗）
• 两种创建方式：文字按钮、自定义子组件按钮
• 基础示例：

ets

Button("登录")

  .width(120)

  .height(40)

  .onClick(()=>{

    // 点击后执行逻辑

  })

7. 单选框（Radio + RadioGroup）

• 配套组件：RadioGroup 包裹多个Radio
• 功能：多选一选择功能，性别、单选问卷场景
• 绑定逻辑：通过group属性绑定同一分组，监听选中值
• 基础示例：

ets

  Radio({value:"man",group:"sex"})

  Text("男")

  Radio({value:"woman",group:"sex"})

  Text("女")

8. Toggle（开关组件）

• 对应组件：Toggle
• 功能：布尔状态开关，开启 / 关闭设置项（消息推送、夜间模式）
• 类型：开关样式、复选框样式、按钮样式
• 基础示例：

ets

Toggle({type:ToggleType.Switch,isOn:true})

  .onChange((value:boolean)=>{

    console.info("开关状态：",value)

  })

9.路由跳转

  先创建一个登录按钮，再定义两个变量，注意：这两个变量要写在

build大框架外面

@State a: string = ""
@State b: string = ""

Row({ space: 20 }) {
  Button("登录")
    .height(50)
    .width('45%')
    .fontSize(22)
    .onClick(() => {
      if (this.a != "" && this.b != "") {
        router.pushUrl({
          url: "pages/lll",
          params: {
            a: this.a,
            b: this.b
          }
        })

然后创建一个登录页面

struct lll{
  @State name : string = ""
onPageShow(): void {
  const  params = router.getParams() as Record<string,string>
  if (params) {
    this.name = params.a
  }
}
  build() {
Column(){
  Text(`欢迎你, ${this.name}`)
}
  }
}

在main_pages.json中更改，将你要跳转的文件和你的源文件名字添加上去

然后点击登录便可实现跳转

总结

HarmonyOS ArkUI 常用组件包含轮播图、视频、图片、选项卡、文本输入框、按钮、单选框、Toggle 开关，其中轮播图、视频、图片用于静态内容展示，选项卡实现多标签页面切换，文本框用于接收用户输入，按钮、单选框、Toggle 提供点击、选择类交互能力，所有组件都需放置在布局容器内完成页面搭建。