当前位置：首页 > news >正文

HarmonyOS ArkUI(基于ArkTS) 常用组件

news 2025/11/6 7:20:08

一 Button 按钮

Button是按钮组件，通常用于响应用户的点击操作,可以加子组件

Button('我是button')Button(){Text('我是button')}

type 按钮类型

Button有三种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）和普通按钮（Normal），通过type进行设置。

 Button({type:ButtonType.Normal}).backgroundColor('#ff6700')Button({type:ButtonType.Capsule}).backgroundColor('#ff6700')Button({type:ButtonType.Circle}).backgroundColor('#ff6700')

二 Radio 单选框

Radio是单选框组件，通常用于提供相应的用户交互选择项，同组的Radio中只有一个可以被中。

Radio({ value: 'Radio1', group: 'radioGroup' }).checked(false)
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(true)

三 Toggle 切换按钮

如下，type为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态

Toggle({ type: ToggleType.Checkbox, isOn: false })

四 Progress 进度条

Progress是进度条显示组件，显示内容通常为目标操作的当前进度。具体用法请参考Progress。

设置进度条样式

Progress有5种可选类型，通过ProgressType可以设置进度条样式，ProgressType类型包括：ProgressType.Linear（线性样式）、 ProgressType.Ring（环形无刻度样式）、ProgressType.ScaleRing（环形有刻度样式）、ProgressType.Eclipse（圆形样式）和ProgressType.Capsule（胶囊样式）。

五 Image 图片

加载方式

本地资源

Image('images/view.jpg')
.width(200)

网络资源

Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址

Resource资源

使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。

Image($r('app.media.icon'))

rawfile

Image($rawfile('example1.png'))

设置缩放属性

Image().objectFit(ImageFit.属性)

重复样式

.objectRepeat(ImageRepeat.XY) XY还可以是 X , Y

设置图片渲染模式

.renderMode(ImageRenderMode.Template) 将图片设置为黑白

.syncLoad(true) 同步加载

一般情况下，图片加载流程会异步进行，以避免阻塞主线程，影响UI交互。但是特定情况下，图片刷新时会出现闪烁，这时可以使用syncLoad属性，使图片同步加载，从而避免出现闪烁。不建议图片加载较长时间时使用，会导致页面无法响应。

六 Video 视频

Video({src: '',  // 视频地址previewUri: '' //视频未播放图片}).muted(false) //设置是否静音.controls(false) //设置是否显示默认控制条.autoPlay(false) //设置是否自动播放.loop(false) //设置是否循环播放.objectFit(ImageFit.Contain) //设置视频适配模式

七 Popup 气泡提示

文本提示气泡常用于只展示带有文本的信息提示，不带有任何交互的场景。Popup属性需绑定组件，当bindPopup属性中参数show为true时会弹出气泡提示。

@Entry
@Component
struct PopupExample {@State handlePopup: boolean = falsebuild() {Column() {Button('PopupOptions').onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {message: 'This is a popup with PopupOptions',})}.width('100%').padding({ top: 5 })}
}

八菜单

创建默认菜单

Button('click for Menu').bindMenu([{value: 'Menu1',action: () => {console.info('handle Menu1 select')}}])