鸿蒙开发-UI-组件3

鸿蒙开发-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: CustomDialogControllercancel: () => voidconfirm: () => voidbuild() {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_Xbuild() {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气泡提示与菜单。