ArkUI（视频/按钮）组件介绍

Video组件用于播放视频文件并控制其播放状态，常用于短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。具体用法请参考Video。

创建视频组件

Video通过调用接口来创建，接口调用形式如下：

Video(value: VideoOptions)

加载视频资源

Video组件支持加载本地视频和网络视频。具体的数据源配置请参考VideoOptions对象说明。

加载本地视频

• 普通本地视频。

  加载本地视频时，需在工程资源的rawfile目录中放置视频文件，如下图所示。

  再使用资源访问符$rawfile()引用视频资源。

  1. // xxx.ets
  2. // ...
  3. @Component
  4. export struct LocalVideo {
  5. private controller: VideoController = new VideoController();
  6. // $r('app.media.preview')需要替换为开发者所需的图像资源文件
  7. private previewUris: Resource = $r('app.media.preview');
  8. // $rawfile('videoTest.mp4')需要替换为开发者所需的影像资源文件
  9. private innerResource: Resource = $rawfile('videoTest.mp4');
  10. build() {
  11. Column() {
  12. Video({
  13. src: this.innerResource, // 设置视频源
  14. previewUri: this.previewUris, // 设置预览图
  15. controller: this.controller // 设置视频控制器，可以控制视频的播放状态
  16. })
  17. }
  18. }
  19. }

  LocalVideo.ets

• Data Ability提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在。

  1. // xxx.ets
  2. // ···
  3. @Component
  4. export struct LocalVideoTwo {
  5. private controller: VideoController = new VideoController();
  6. private previewUris: Resource = $r('app.media.preview');
  7. private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10';
  8. build() {
  9. Column() {
  10. Video({
  11. src: this.videoSrc,
  12. previewUri: this.previewUris,
  13. controller: this.controller
  14. })
  15. }
  16. }
  17. }

  DataAbility.ets

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮、圆角矩形按钮。Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。

创建按钮

Button通过调用接口来创建，接口调用有以下两种形式：

• 通过label和ButtonOptions创建不包含子组件的按钮。以ButtonOptions中的type和stateEffect为例。

  1. Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

  其中，label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

  1. Button('Ok', { type: ButtonType.Normal, stateEffect: true })
  2. .borderRadius(8)
  3. .backgroundColor(0x317aff)
  4. .width(90)
  5. .height(40)

  CreateButton.ets

• 通过ButtonOptions创建包含子组件的按钮。以ButtonOptions中的type和stateEffect为例。

  1. Button(options?: {type?: ButtonType, stateEffect?: boolean})

  只支持包含一个子组件，子组件可以是基础组件或者容器组件。

  1. Button({ type: ButtonType.Normal, stateEffect: true }) {
  2. Row() {
  3. // 请将$r('app.media.loading')替换为实际资源文件
  4. Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })
  5. Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
  6. }.alignItems(VerticalAlign.Center)
  7. }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

  CreateButton.ets

设置按钮类型

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

• 胶囊按钮（默认类型）。

  此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

  1. Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
  2. .backgroundColor(0x317aff)
  3. .width(90)
  4. .height(40)

  SetButtonType.ets

• 圆形按钮。

  此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

  1. Button('Circle', { type: ButtonType.Circle, stateEffect: false })
  2. .backgroundColor(0x317aff)
  3. .width(90)
  4. .height(90)

  SetButtonType.ets

• 普通按钮。

  此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

  1. Button('Ok', { type: ButtonType.Normal, stateEffect: true })
  2. .borderRadius(8)
  3. .backgroundColor(0x317aff)
  4. .width(90)
  5. .height(40)

  SetButtonType.ets

• 圆角矩形按钮。

  当controlSize为NORMAL时，默认圆角大小为20vp，controlSize为SMALL时，圆角大小为14vp，支持通过borderRadius属性重新设置圆角。

  1. Button('Disable', { type: ButtonType.ROUNDED_RECTANGLE, stateEffect: true })
  2. .backgroundColor(0x317aff)
  3. .width(90)
  4. .height(40)

  SetButtonType.ets

自定义样式

• 设置边框弧度。

  使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。

  1. Button('circle border', { type: ButtonType.Normal })
  2. .borderRadius(20)
  3. .height(40)

  ButtonCustomStyle.ets

• 设置文本样式。

  通过添加文本样式设置按钮文本的展示样式。

  1. Button('font style', { type: ButtonType.Normal })
  2. .fontSize(20)
  3. .fontColor(Color.Pink)
  4. .fontWeight(800)

  ButtonCustomStyle.ets

• 设置背景颜色。

  添加backgroundColor属性设置按钮的背景颜色。

  1. Button('background color').backgroundColor(0xF55A42)

  ButtonCustomStyle.ets

添加事件

Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为。

1. Button('Ok', { type: ButtonType.Normal, stateEffect: true })
2. .onClick(()=>{
3. hilog.info(DOMAIN, 'testTag', 'Button onClick');
4. }).margin(10)

以上内容均参考于视频播放 (Video)-媒体展示-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

按钮 (Button)-按钮与选择-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

ButtonCaseLogin.ets

实战演示

video组件（需使用模拟器才能正常运行）

button组件