一级域名的网站制作广州百度推广优化排名
鸿蒙开发-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气泡提示与菜单。