鸿蒙开发-UI-组件
鸿蒙开发-UI-组件2
文章目录
前言
一、文本输入
1.创建文本输入框
2.设置输入框类型
3.自定义样式
4.添加事件
5.常用场景
二、自定义弹窗
三、视频播放
1.创建视频组件
2.加载视频资源
1.加载本地视频
2.加载网络视频
3.添加属性
4.事件调用
5.Video控制器
1.默认控制器
2.自定义控制器
总结
前言
上文详细学习了鸿蒙开发UI常用组件(进度条、文本显示)的创建方式、自定义样式、事件监听以及常用场景,下文将学习鸿蒙开发UI其它常用组件。
一、文本输入
TextInput、TextArea是输入框组件,通常用于响应用户的输入操作,比如评论区的输入、聊天框的输入、表格的输入等,也可以结合其它组件构建功能页面
1.创建文本输入框
TextInput为单行输入框,创建接口:
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
TextArea为多行输入框,创建接口:
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
注:TextArea多行输入框文字超出一行时会自动折行。
2.设置输入框类型
TextInput有5种可选类型,分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式。通过type属性进行设置
以密码输入为例:
代码:
TextInput() .type(InputType.Password)
UI渲染:
3.自定义样式
样式 | 代码示例 |
设置无输入时的提示文本 | TextInput({placeholder:'我是提示文本'}) UI渲染 |
设置输入框当前的文本内容 | TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}) UI渲染 |
添加backgroundColor改变输入框的背景颜色 | TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}).backgroundColor(Color.Pink) UI渲染 |
4.添加事件
文本框主要用于获取用户输入的信息,把信息处理成数据进行上传,绑定onChange事件可以获取输入框内改变的内容。用户也可以使用通用事件来进行相应的交互操作
代码示例
TextInput() .onChange((value: string) => { console.info(value); }) .onFocus(() => { console.info('获取焦点'); })
5.常用场景
用于表单的提交,在用户登录/注册页面,用户的登录或注册的输入操作
二、自定义弹窗
自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗
代码示例:一个自定义弹窗需要 step1-step2-step3三步操作
//step1:使用@CustomDialog装饰器装饰自定义弹窗,此装饰器内进行自定义内容(也就是弹框内容) @CustomDialog struct CustomDialogExample { controller: CustomDialogController cancel: () => void confirm: () => void build() { Column() { Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 }) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('cancel') .onClick(() => { this.controller.close() this.cancel() }).backgroundColor(0xffffff).fontColor(Color.Black) Button('confirm') .onClick(() => { this.controller.close() this.confirm() }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }) } } } @Entry @Component struct DialogExample { //step2:在页面内创建对话框控制器,绑定对话框装饰器,同时页面中定义函数并绑定到对话框中相对应的函数 dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept, }), alignment: DialogAlignment.Default, //注:可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示 }) onCancel() { console.info('Callback when the first button is clicked') } onAccept() { console.info('Callback when the second button is clicked') } build() { Flex({ justifyContent: FlexAlign.Center }) { //step3:点击与onClick事件绑定的组件使弹窗弹出,对话框组件与对话框组件控制器是一一对应关系,对话框组件的打开、关闭是由对话框控制器来操作 Button('click me') .onClick(() => { this.dialogController.open() }) }.width('100%') } }
三、视频播放
Video组件用于播放视频文件并控制其播放状态,常用于为短视频应用和应用内部视频的列表页面。当视频完整出现时会自动播放,用户点击视频区域则会暂停播放,同时显示播放进度条,通过拖动播放进度条指定视频播放到具体位置
1.创建视频组件
video创建接口:
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
src指定视频播放源的路径
currentProgressRate用于设置视频播放倍速
previewUri指定视频未播放时的预览图片路径
controller设置视频控制器,用于自定义控制视频
2.加载视频资源
Video组件支持加载本地视频和网络视频
1.加载本地视频
1.1 普通本地视频
加载本地视频时,首先在本地rawfile目录指定对应的文件,如下图所示
@Component export struct VideoPlayer{ private controller:VideoController; private previewUris: Resource = $r ('app.media.preview'); //注:使用资源访问符$rawfile()引用视频资源 private innerResource: Resource = $rawfile('videoTest.mp4'); build(){ Column() { Video({ src: this.innerResource, previewUri: this.previewUris, controller: this.controller }) } } }
2.加载网络视频
加载网络视频时,需要申请权限ohos.permission.INTERNET,此时,Video的src属性为网络视频的链接
@Component export struct VideoPlayer{ private controller:VideoController; private previewUris: Resource = $r ('app.media.preview'); // 注:videoSrc值为资源网络访问地址 private videoSrc: string= 'https://www.example.com/example.mp4' build(){ Column() { Video({ src: this.videoSrc, previewUri: this.previewUris, controller: this.controller }) } } }
3.添加属性
Video组件属性主要用于设置视频的播放形式。例如设置视频播放是否静音、播放时是否显示控制条等。具体属性设置如下代码所示
@Component export struct VideoPlayer { private controller: VideoController; build() { Column() { Video({ controller: this.controller }) .muted(false) //1.设置是否静音 .controls(false) //2.设置是否显示默认控制条 .autoPlay(false) //3.设置是否自动播放 .loop(false) //4.设置是否循环播放 .objectFit(ImageFit.Contain) //5.设置视频适配模式 } } }
4.事件调用
Video组件回调事件主要为播放开始、暂停结束、播放失败、视频准备和操作进度条等事件,除此之外,Video组件也支持通用事件的调用,如点击、触摸等事件的调用。具体事件使用如下代码所示
@Entry @Component struct VideoPlayer{ private controller:VideoController; private previewUris: Resource = $r ('app.media.preview'); private innerResource: Resource = $rawfile('videoTest.mp4'); build(){ Column() { Video({ src: this.innerResource, previewUri: this.previewUris, controller: this.controller }) .onUpdate((event) => { //1.更新事件回调 console.info("Video update."); }) .onPrepared((event) => { //2.准备事件回调 console.info("Video prepared."); }) .onError(() => { //3.失败事件回调 console.info("Video error."); }) } } }
5.Video控制器
1.默认控制器
默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能
@Entry @Component struct VideoGuide { @State videoSrc: Resource = $rawfile('videoTest.mp4') @State previewUri: string = 'common/videoIcon.png' @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X build() { Row() { Column() { Video({ src: this.videoSrc, previewUri: this.previewUri, currentProgressRate: this.curRate }) } .width('100%') } .height('100%') } }
2.自定义控制器
使用自定义的控制器,先将默认控制器关闭掉,之后可以使用button以及slider等组件进行自定义的控制与显示,适合自定义较强的场景下使用
@Entry @Component struct VideoGuide { @State videoSrc: Resource = $rawfile('videoTest.mp4') @State previewUri: string = 'common/videoIcon.png' @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X @State isAutoPlay: boolean = false @State showControls: boolean = true @State sliderStartTime: string = ''; @State currentTime: number = 0; @State durationTime: number = 0; @State durationStringTime: string =''; //step1:定义视频播放控制器 controller: VideoController = new VideoController() build() { Row() { Column() { //step2:定义视频播放组件,绑定视频播放控制器 Video({ src: this.videoSrc, previewUri: this.previewUri, currentProgressRate: this.curRate, controller: this.controller }).controls(false).autoPlay(true) .onPrepared((event)=>{ this.durationTime = event.duration }) .onUpdate((event)=>{ this.currentTime =event.time }) Row() { Text(JSON.stringify(this.currentTime) + 's') //step3:定义滑动条组件,通过滑动条组件的事件执行控制器相关操作,控制视频播放组件行为 Slider({ value: this.currentTime, min: 0, max: this.durationTime }) .onChange((value: number, mode: SliderChangeMode) => { this.controller.setCurrentTime(value); }).width("90%") Text(JSON.stringify(this.durationTime) + 's') } .opacity(0.8) .width("100%") } .width('100%') } .height('40%') } }
注:Video组件已经封装好了视频播放的基础能力,开发者无需进行视频实例的创建,视频信息的设置获取,只需要设置数据源以及基础信息即可播放视频,相对扩展能力较弱。
总结
本文主要学习了鸿蒙开发UI组件(文本输入、自定义弹窗、视频播放)的使用,详细学习了文本输入组件的样式定义以及事件添加,简单学习了默认弹窗以及模式视频播放器组件的使用,详细学习了自定义弹窗的使用步骤以及自定义视频播放的开发步骤。下文将学习鸿蒙开发UI气泡提示与菜单。
猜你喜欢
网友评论
- 搜索
- 最新文章
- 热门文章