专业的河南网站建设价格,网站设计技术有哪些,推推蛙seo顾问,网站首页图片素材长图鸿蒙开发-UI-组件 鸿蒙开发-UI-组件2 文章目录 前言
一、文本输入
1.创建文本输入框
2.设置输入框类型
3.自定义样式
4.添加事件
5.常用场景
二、自定义弹窗
三、视频播放
1.创建视频组件
2.加载视频资源
1.加载本地视频
2.加载网络视频
3.添加属性
4.事件调用
… 鸿蒙开发-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.pngState 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.pngState curRate: PlaybackSpeed PlaybackSpeed.Speed_Forward_1_00_XState isAutoPlay: boolean falseState showControls: boolean trueState 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气泡提示与菜单。
