鸿蒙开发笔记(二十): 常用组件 TextInput/TextArea, 弹窗,视频播放Video

1. 文本输入 TextInput/TextArea

TextInput为单行输入框、TextArea为多行输入框。通过以下接口来创建。

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

多行输入框文字超出一行时会自动折行。

1.1 TextInput

除支持通用属性外，还支持以下属性：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2 TextInputController

controller: TextInputController = new TextInputController()

在这里插入图片描述

1.3 TextArea

在这里插入图片描述

2. 弹窗

2.1 警告弹窗

AlertDialog.show()

// xxx.ets
@Entry
@Component
struct AlertDialogExample {build() {Column({ space: 5 }) {Button('one button dialog').onClick(() => {AlertDialog.show({title: 'title',message: 'text',autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -20 },gridCount: 3,confirm: {value: 'button',action: () => {console.info('Button-clicking callback')}},cancel: () => {console.info('Closed callbacks')}})}).backgroundColor(0x317aff)Button('two button dialog').onClick(() => {AlertDialog.show({title: 'title',message: 'text',autoCancel: true,alignment: DialogAlignment.Bottom,gridCount: 4,offset: { dx: 0, dy: -20 },primaryButton: {value: 'cancel',action: () => {console.info('Callback when the first button is clicked')}},secondaryButton: {value: 'ok',action: () => {console.info('Callback when the second button is clicked')}},cancel: () => {console.info('Closed callbacks')}})}).backgroundColor(0x317aff)}.width('100%').margin({ top: 5 })}
}

2.2 列表选择弹窗

ActionSheet.show()

@Entry
@Component
struct ActionSheetExample {build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Button('Click to Show ActionSheet').onClick(() => {ActionSheet.show({title: 'ActionSheet title',message: 'message',autoCancel: true,confirm: {value: 'Confirm button',action: () => {console.log('Get Alert Dialog handled')}},cancel: () => {console.log('actionSheet canceled')},alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -10 },sheets: [{title: 'apples',action: () => {console.log('apples')}},{title: 'bananas',action: () => {console.log('bananas')}},{title: 'pears',action: () => {console.log('pears')}}]})})}.width('100%').height('100%')}
}

2.3 日期滑动选择器弹窗

DatePickerDialog.show()

// xxx.ets
@Entry
@Component
struct DatePickerDialogExample {selectedDate: Date = new Date("2010-1-1")build() {Column() {Button("DatePickerDialog").margin(20).onClick(() => {DatePickerDialog.show({start: new Date("2000-1-1"),end: new Date("2100-12-31"),selected: this.selectedDate,onAccept: (value: DatePickerResult) => {// 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期this.selectedDate.setFullYear(value.year, value.month, value.day)console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))},onCancel: () => {console.info("DatePickerDialog:onCancel()")},onChange: (value: DatePickerResult) => {console.info("DatePickerDialog:onChange()" + JSON.stringify(value))}})})Button("Lunar DatePickerDialog").margin(20).onClick(() => {DatePickerDialog.show({start: new Date("2000-1-1"),end: new Date("2100-12-31"),selected: this.selectedDate,lunar: true,onAccept: (value: DatePickerResult) => {this.selectedDate.setFullYear(value.year, value.month, value.day)console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))},onCancel: () => {console.info("DatePickerDialog:onCancel()")},onChange: (value: DatePickerResult) => {console.info("DatePickerDialog:onChange()" + JSON.stringify(value))}})})}.width('100%')}
}

2.4 时间滑动选择器弹窗

TimePickerDialog.show()

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {private selectTime: Date = new Date('2020-12-25T08:30:00')build() {Column() {Button("TimePickerDialog 12小时制").margin(20).onClick(() => {TimePickerDialog.show({selected: this.selectTime,onAccept: (value: TimePickerResult) => {// 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间this.selectTime.setHours(value.hour, value.minute)console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))},onCancel: () => {console.info("TimePickerDialog:onCancel()")},onChange: (value: TimePickerResult) => {console.info("TimePickerDialog:onChange()" + JSON.stringify(value))}})})Button("TimePickerDialog 24小时制").margin(20).onClick(() => {TimePickerDialog.show({selected: this.selectTime,useMilitaryTime: true,onAccept: (value: TimePickerResult) => {this.selectTime.setHours(value.hour, value.minute)console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))},onCancel: () => {console.info("TimePickerDialog:onCancel()")},onChange: (value: TimePickerResult) => {console.info("TimePickerDialog:onChange()" + JSON.stringify(value))}})})}.width('100%')}
}

2.5 文本滑动选择器弹窗

TextPickerDialog.show()

// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {private select: number | number[] = 2private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']build() {Row() {Column() {Button("TextPickerDialog").margin(20).onClick(() => {TextPickerDialog.show({range: this.fruits,selected: this.select,onAccept: (value: TextPickerResult) => {// 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项this.select = value.indexconsole.info("TextPickerDialog:onAccept()" + JSON.stringify(value))},onCancel: () => {console.info("TextPickerDialog:onCancel()")},onChange: (value: TextPickerResult) => {console.info("TextPickerDialog:onChange()" + JSON.stringify(value))}})})}.width('100%')}.height('100%')}
}

2.6 自定义弹窗（CustomDialog）

  1. 使用@CustomDialog装饰器装饰自定义弹窗。

  2. @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。

  3. 创建构造器，与装饰器呼应相连。CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效，具体用法可看下方示例。CustomDialogController参数如下

在这里插入图片描述

// xxx.ets
@CustomDialog
struct CustomDialogExample {@Link textValue: string@Link inputValue: stringcontroller: CustomDialogController// 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后cancel: () => voidconfirm: () => voidbuild() {Column() {Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%').onChange((value: string) => {this.textValue = value})Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })Flex({ justifyContent: FlexAlign.SpaceAround }) {Button('cancel').onClick(() => {this.controller.close()this.cancel()}).backgroundColor(0xffffff).fontColor(Color.Black)Button('confirm').onClick(() => {this.inputValue = this.textValuethis.controller.close()this.confirm()}).backgroundColor(0xffffff).fontColor(Color.Red)}.margin({ bottom: 10 })}// dialog默认的borderRadius为24vp，如果需要使用border属性，请和borderRadius属性一起使用。}
}@Entry
@Component
struct CustomDialogUser {@State textValue: string = ''@State inputValue: string = 'click me'dialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogExample({cancel: this.onCancel,confirm: this.onAccept,textValue: $textValue,inputValue: $inputValue}),cancel: this.existApp,autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -20 },gridCount: 4,customStyle: false})// 在自定义组件即将析构销毁时将dialogController置空aboutToDisappear() {this.dialogController = undefined // 将dialogController置空}onCancel() {console.info('Callback when the first button is clicked')}onAccept() {console.info('Callback when the second button is clicked')}existApp() {console.info('Click the callback in the blank area')}build() {Column() {Button(this.inputValue).onClick(() => {if (this.dialogController != undefined) {this.dialogController.open()}}).backgroundColor(0x317aff)}.width('100%').margin({ top: 5 })}
}

3. 视频播放 Video

3.1 组件创建

Video通过调用接口来创建，接口调用形式如下：

Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 视频加载

  • 加载本地视频时，首先在本地rawfile目录指定对应的文件，如下图所示。

在这里插入图片描述
再使用资源访问符$rawfile()引用视频资源。

@Component
export 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})}}
}
  • Data Ability提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在即可。
@Component
export struct VideoPlayer{private controller: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})}}
}
  • 加载沙箱路径视频
    支持file:///data/storage路径前缀的字符串，用于读取应用沙箱路径内的资源。需要保证应用沙箱目录路径下的文件存在并且有可读权限。
@Component
export struct VideoPlayer {private controller: VideoController;private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'build() {Column() {Video({src: this.videoSrc,controller: this.controller})}}
}
  • 加载网络视频
    加载网络视频时，需要申请权限ohos.permission.INTERNET，具体申请方式请参考权限申请声明。此时，Video的src属性为网络视频的链接。
@Component
export struct VideoPlayer{private controller:VideoController;private previewUris: Resource = $r ('app.media.preview');private videoSrc: string= 'https://www.example.com/example.mp4' // 使用时请替换为实际视频加载网址build(){Column() {Video({src: this.videoSrc,previewUri: this.previewUris,controller: this.controller})}}
}

3.3 VideoController

一个VideoController对象可以控制一个或多个video

controller: VideoController = new VideoController()

提供了start(), stop(), pause(),setCurrentTime()指定视频播放的进度位置(单位为s), requestFullscreen(), exitFullscreen(), setCurrentTime(value: number, seekMode: SeekMode)控制方法.

在这里插入图片描述

// xxx.ets
@Entry
@Component
struct VideoCreateComponent {@State videoSrc: Resource = $rawfile('video1.mp4')@State previewUri: Resource = $r('app.media.poster1')@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X@State isAutoPlay: boolean = false@State showControls: boolean = truecontroller: VideoController = new VideoController()build() {Column() {Video({src: this.videoSrc,previewUri: this.previewUri,currentProgressRate: this.curRate,controller: this.controller}).width('100%').height(600).autoPlay(this.isAutoPlay).controls(this.showControls).onStart(() => {console.info('onStart')}).onPause(() => {console.info('onPause')}).onFinish(() => {console.info('onFinish')}).onError(() => {console.info('onError')}).onPrepared((e) => {console.info('onPrepared is ' + e.duration)}).onSeeking((e) => {console.info('onSeeking is ' + e.time)}).onSeeked((e) => {console.info('onSeeked is ' + e.time)}).onUpdate((e) => {console.info('onUpdate is ' + e.time)})Row() {Button('src').onClick(() => {this.videoSrc = $rawfile('video2.mp4') // 切换视频源}).margin(5)Button('previewUri').onClick(() => {this.previewUri = $r('app.media.poster2') // 切换视频预览海报}).margin(5)Button('controls').onClick(() => {this.showControls = !this.showControls // 切换是否显示视频控制栏}).margin(5)}Row() {Button('start').onClick(() => {this.controller.start() // 开始播放}).margin(5)Button('pause').onClick(() => {this.controller.pause() // 暂停播放}).margin(5)Button('stop').onClick(() => {this.controller.stop() // 结束播放}).margin(5)Button('setTime').onClick(() => {this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置}).margin(5)}Row() {Button('rate 0.75').onClick(() => {this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放}).margin(5)Button('rate 1').onClick(() => {this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放}).margin(5)Button('rate 2').onClick(() => {this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放}).margin(5)}}}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/639311.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

小型洗衣机怎么用？实用的迷你洗衣机推荐

小型洗衣机怎么用？实用的迷你洗衣机推荐

由于我们的内衣、内裤和袜子等等贴身小件衣物的清洁频率比一般的衣物要高。而且，如果我们人工手洗的话，不仅会大大浪费了我们的时间，而且还不能进行对这些贴身的以为进行深层消毒和除菌。这种情况下，就得需要一台专门用于清洗内衣…
阅读更多...
数据结构·顺序表应用

数据结构·顺序表应用

本节应用是要用顺序表实现一个通讯录，收录联系人的姓名、性别、电话号码、住址、年龄 ​​​​​​​ 顺序表的实现在上一节中已经完成了，本节的任务其实就是应用上节写出来的代码的那些接口函数功能，做出来一个好看的，可…
阅读更多...
晨控CK-FR03-EC与欧姆龙NX系列EtherCAT通讯连接说明手册

晨控CK-FR03-EC与欧姆龙NX系列EtherCAT通讯连接说明手册

晨控CK-FR03-EC与欧姆龙NX系列EtherCAT通讯连接说明手册 晨控CK-FR03-EC是一款基于射频识别技术的高频RFID标签读卡器，读卡器工作频率为13.56MHZ，支持对I-CODE 2、I-CODE SLI等符合ISO15693国际标准协议格式标签的读取。 读卡器同时支持标准工业通讯协…
阅读更多...
【Linux C | 进程】进程环境 | 什么是进程？进程的开始、终止、存储空间布局、命令行参数、环境变量

【Linux C | 进程】进程环境 | 什么是进程？进程的开始、终止、存储空间布局、命令行参数、环境变量

😁博客主页😁：🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑：🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…
阅读更多...
OPC UA网关BL121 支持Modbus转OPC UA协议转换

OPC UA网关BL121 支持Modbus转OPC UA协议转换

随着物联网技术的迅猛发展，人们深刻认识到在智能化生产和生活中，实时、可靠、安全的数据传输至关重要。在此背景下，高性能的物联网数据传输解决方案——协议转换网关应运而生，广泛应用于工业自动化和数字化工厂应用环境中。 钡铼…
阅读更多...
从心理学角度看海外网红营销：品牌与消费者的心理互动

从心理学角度看海外网红营销：品牌与消费者的心理互动

近年来，随着社交媒体的蓬勃发展，海外网红营销成为品牌推广的一种独特而有效的手段。这种新型营销方式不仅仅依赖于产品本身的特性，更加注重通过网红与消费者之间的心理互动来建立品牌形象，激发购买欲望。本文Nox聚星将和大家从心理…
阅读更多...
17.用户身份与能力

17.用户身份与能力

Linux系统的管理员之所以是root，并不是因为它的名字叫root，而是因为该用户的身 份号码即UID（User IDentification）的数值为 0。在 Linux 系统中，UID就像我们的身份证号 码一样具有唯一性，因此可通过用户的U…
阅读更多...
【明道云】学习笔记1-了解APaaS

【明道云】学习笔记1-了解APaaS

【背景】 APaaS (Application Platform As A Service) ，即应用程序平台即服务，这是基于PaaS（平台即服务）的一种解决方案，支持应用程序在云端的开发、部署和运行，提供软件开发中的基础工具给用户&#xff0…
阅读更多...
基于XG24-EK2703A的BLE HID蓝牙键盘+鼠标复合设备功能开发(BLE+HID+FreeRTOS+Gecko SDK)

基于XG24-EK2703A的BLE HID蓝牙键盘+鼠标复合设备功能开发(BLE+HID+FreeRTOS+Gecko SDK)

目录 项目介绍硬件介绍项目设计开发环境及工程参考总体流程图硬件基本配置应用初始化按键中断回调定时器回调按键响应任务蓝牙事件回调BLE HIDReport Map及报文键盘设备鼠标设备复合设备 发送字符串上/下滚动 功能展示项目总结 👉 【Funpack3-1】基于XG24-EK2703A的…
阅读更多...
Java streamFile

Java streamFile

1.Stream流 1.1体验Stream流【理解】 案例需求 按照下面的要求完成集合的创建和遍历 创建一个集合，存储多个字符串元素 把集合中所有以"张"开头的元素存储到一个新的集合 把"张"开头的集合中的长度为3的元素存储到一个新的集合 遍历上一步得…
阅读更多...
使用Scrapy 爬取“http://tuijian.hao123.com/”网页中左上角“娱乐”、“体育”、“财经”、“科技”、历史等名称和URL

使用Scrapy 爬取“http://tuijian.hao123.com/”网页中左上角“娱乐”、“体育”、“财经”、“科技”、历史等名称和URL

一、网页信息 二、检查网页，找出目标内容 三、根据网页格式写正常爬虫代码 from bs4 import BeautifulSoup import requestsheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/53…
阅读更多...
每天10个前端小知识 ＜Day 12＞

每天10个前端小知识 ＜Day 12＞

前端面试基础知识题 1. Promise中，resolve后面的语句是否还会执行？ 会被执行。如果不需要执行，需要在 resolve 语句前加上 return。 2. 什么是内存泄漏？什么原因会导致呢？ 内存泄露的解释：程序中己动态…
阅读更多...
酒店网络SIP融合对讲系统联动110方案

酒店网络SIP融合对讲系统联动110方案

酒店网络SIP融合对讲系统联动110方案 酒店对讲系统设计采用了基于网络传输的对讲系统，利用网络平台，把管理中心和前端各个求助点连接起来，所有的通讯信号和控制协议通过网络进行传输，采用基于网络数字SIP网络对讲系统&#xff0c…
阅读更多...
【数据结构】 双链表的基本操作 （C语言版）

【数据结构】 双链表的基本操作 （C语言版）

目录 一、双链表 1、双链表的定义： 2、双链表表的优缺点： 二、双链表的基本操作算法（C语言） 1、宏定义 2、创建结构体 3、双链表的初始化 4、双链表表插入 5、双链表的查找 6、双链表的取值 7、求双链表长度 8、双链表…
阅读更多...
Linux shell编程学习笔记41：lsblk命令

Linux shell编程学习笔记41：lsblk命令

边缘计算的挑战和机遇 边缘计算面临着数据安全与隐私保护、网络稳定性等挑战，但同时也带来了更强的实时性和本地处理能力，为企业降低了成本和压力，提高了数据处理效率。因此，边缘计算既带来了挑战也带来了机遇，需要我…
阅读更多...
阿里云国外服务器价格购买与使用策略

阿里云国外服务器价格购买与使用策略

阿里云国外服务器优惠活动「全球云服务器精选特惠」，国外服务器租用价格24元一个月起，免备案适合搭建网站，部署独立站等业务场景，阿里云服务器网aliyunfuwuqi.com分享阿里云国外服务器优惠活动： 全球云服务器精选特惠…
阅读更多...
学习笔记-李沐动手学深度学习（二）（08-09、线性回归、优化算法、Softmax回归、损失函数、图片分类）

学习笔记-李沐动手学深度学习（二）（08-09、线性回归、优化算法、Softmax回归、损失函数、图片分类）

总结 以_结尾的方法，好像是原位替换（即 原地修改，就地修改变量）如 fill_() 感恩的心：（沐神的直播环境） 08-线性回归基础优化算法 引言（如何在美国买房） 根据现在行…
阅读更多...
用ChatGPT教学、科研！亚利桑那州立大学与OpenAI合作

用ChatGPT教学、科研！亚利桑那州立大学与OpenAI合作

亚利桑那州立大学（简称“ASU”）在官网宣布与OpenAI达成技术合作。从2024年2月份开始，为所有学生提供ChatGPT企业版访问权限，主要用于学习、课程作业和学术研究等。 为了帮助学生更好地学习ChatGPT和大语言模型产品，AS…
阅读更多...
unicloud 云对象 schema

unicloud 云对象 schema

目录 云对象 创建云对象 客户端调用 二、Schema（表结构） 什么是Schema？ 如何编写DB Schema Schema的一级节点 客户端直连数据库 字段属性 字段类型bsonType 默认值defaultValue/forceDefaultValue 云对象 创建云对象 云对象&#…
阅读更多...
HarmonyOS鸿蒙应用开发 (一、环境搭建及第一个Hello World)

HarmonyOS鸿蒙应用开发 (一、环境搭建及第一个Hello World)

万事开头难。难在迈出第一步。心无旁骛，万事可破。没有人一开始就能想清楚，只有做起来，目标才会越来越清晰。--马克.扎克伯格 前言 2024年1月16日，华为目前开启已HarmonyOS NEXT开发者预览版Beta招募，报名周期为1月15…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023