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

Video组件用于播放视频文件并控制其播放状态常用于短视频和应用内部视频的列表页面。当视频完整出现时会自动播放用户点击视频区域则会暂停播放同时显示播放进度条通过拖动播放进度条指定视频播放到具体位置。具体用法请参考Video。创建视频组件Video通过调用接口来创建接口调用形式如下Video(value: VideoOptions)加载视频资源Video组件支持加载本地视频和网络视频。具体的数据源配置请参考VideoOptions对象说明。加载本地视频普通本地视频。加载本地视频时需在工程资源的rawfile目录中放置视频文件如下图所示。再使用资源访问符$rawfile()引用视频资源。// xxx.ets// ...Componentexport struct LocalVideo {private controller: VideoController new VideoController();// $r(app.media.preview)需要替换为开发者所需的图像资源文件private previewUris: Resource $r(app.media.preview);// $rawfile(videoTest.mp4)需要替换为开发者所需的影像资源文件private innerResource: Resource $rawfile(videoTest.mp4);build() {Column() {Video({src: this.innerResource, // 设置视频源previewUri: this.previewUris, // 设置预览图controller: this.controller // 设置视频控制器可以控制视频的播放状态})}}}LocalVideo.etsData Ability提供的视频路径带有dataability://前缀使用时确保对应视频资源存在。// xxx.ets// ···Componentexport struct LocalVideoTwo {private controller: VideoController new VideoController();private previewUris: Resource $r(app.media.preview);private videoSrc: string dataability://device_id/com.domainname.dataability.videodata/video/10;build() {Column() {Video({src: this.videoSrc,previewUri: this.previewUris,controller: this.controller})}}}DataAbility.etsButton是按钮组件通常用于响应用户的点击操作其类型包括胶囊按钮、圆形按钮、普通按钮、圆角矩形按钮。Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。创建按钮Button通过调用接口来创建接口调用有以下两种形式通过label和ButtonOptions创建不包含子组件的按钮。以ButtonOptions中的type和stateEffect为例。Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })其中label用来设置按钮文字type用于设置Button类型stateEffect属性设置Button是否开启点击效果。Button(Ok, { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90).height(40)CreateButton.ets通过ButtonOptions创建包含子组件的按钮。以ButtonOptions中的type和stateEffect为例。Button(options?: {type?: ButtonType, stateEffect?: boolean})只支持包含一个子组件子组件可以是基础组件或者容器组件。Button({ type: ButtonType.Normal, stateEffect: true }) {Row() {// 请将$r(app.media.loading)替换为实际资源文件Image($r(app.media.loading)).width(20).height(40).margin({ left: 12 })Text(loading).fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })}.alignItems(VerticalAlign.Center)}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)CreateButton.ets设置按钮类型Button有四种可选类型分别为胶囊类型Capsule、圆形按钮Circle、普通按钮Normal和圆角矩形按钮ROUNDED_RECTANGLE通过type进行设置。胶囊按钮默认类型。此类型按钮的圆角自动设置为高度的一半不支持通过borderRadius属性重新设置圆角。Button(Disable, { type: ButtonType.Capsule, stateEffect: false }).backgroundColor(0x317aff).width(90).height(40)SetButtonType.ets圆形按钮。此类型按钮为圆形不支持通过borderRadius属性重新设置圆角。Button(Circle, { type: ButtonType.Circle, stateEffect: false }).backgroundColor(0x317aff).width(90).height(90)SetButtonType.ets普通按钮。此类型的按钮默认圆角为0支持通过borderRadius属性重新设置圆角。Button(Ok, { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90).height(40)SetButtonType.ets圆角矩形按钮。当controlSize为NORMAL时默认圆角大小为20vpcontrolSize为SMALL时圆角大小为14vp支持通过borderRadius属性重新设置圆角。Button(Disable, { type: ButtonType.ROUNDED_RECTANGLE, stateEffect: true }).backgroundColor(0x317aff).width(90).height(40)SetButtonType.ets自定义样式设置边框弧度。使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。Button(circle border, { type: ButtonType.Normal }).borderRadius(20).height(40)ButtonCustomStyle.ets设置文本样式。通过添加文本样式设置按钮文本的展示样式。Button(font style, { type: ButtonType.Normal }).fontSize(20).fontColor(Color.Pink).fontWeight(800)ButtonCustomStyle.ets设置背景颜色。添加backgroundColor属性设置按钮的背景颜色。Button(background color).backgroundColor(0xF55A42)ButtonCustomStyle.ets添加事件Button组件通常用于触发某些操作可以绑定onClick事件来响应点击操作后的自定义行为。Button(Ok, { type: ButtonType.Normal, stateEffect: true }).onClick((){hilog.info(DOMAIN, testTag, Button onClick);}).margin(10)以上内容均参考于视频播放 (Video)-媒体展示-UI开发 (ArkTS声明式开发范式)-ArkUI方舟UI框架-应用框架 - 华为HarmonyOS开发者按钮 (Button)-按钮与选择-UI开发 (ArkTS声明式开发范式)-ArkUI方舟UI框架-应用框架 - 华为HarmonyOS开发者ButtonCaseLogin.ets实战演示video组件需使用模拟器才能正常运行button组件