HarmonyOS ArkUI(基于ArkTS) 常用组件

一 Button 按钮

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

css 复制代码
 Button('我是button')
      
 Button(){
    Text('我是button')
  }

type 按钮类型

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

css 复制代码
 Button({type:ButtonType.Normal})
     .backgroundColor('#ff6700')
 Button({type:ButtonType.Capsule})
     .backgroundColor('#ff6700')
 Button({type:ButtonType.Circle})
     .backgroundColor('#ff6700')

二 Radio 单选框

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

css 复制代码
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 图片

加载方式

  • 本地资源
css 复制代码
Image('images/view.jpg')
.width(200)
  • 网络资源
css 复制代码
Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址
  • Resource资源

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

css 复制代码
Image($r('app.media.icon'))
  • rawfile
css 复制代码
Image($rawfile('example1.png'))

设置缩放属性

Image().objectFit(ImageFit.属性)

重复样式

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

设置图片渲染模式

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

.syncLoad(true) 同步加载

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

六 Video 视频

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

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

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

八 菜单

创建默认菜单

javascript 复制代码
Button('click for Menu')
  .bindMenu([
    {
      value: 'Menu1',
      action: () => {
        console.info('handle Menu1 select')
      }
    }
  ])
相关推荐
树上有只程序猿3 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥3 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸3 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin4 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊4 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆4 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术4 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆4 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙4 小时前
GIT 配置别名&脚本自动化执行
前端·git