(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，还请三连支持一波哇ヾ(＠^∇^＠)ノ）
目录
图标小符号 (SymbolGlyph/SymbolSpan)
文本输入 (TextInput/TextArea)
TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法请参考TextInput、TextArea。
创建输入框
TextInput为单行输入框、TextArea为多行输入框。通过以下接口来创建。
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})单行输入框
TextInput()
多行输入框
TextArea()
多行输入框文字超出一行时会自动折行。
TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)
设置输入框类型
TextInput有9种可选类型，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式。通过type属性进行设置：
基本输入模式（默认类型）
TextInput() .type(InputType.Normal)
密码输入模式
TextInput() .type(InputType.Password)
自定义样式
设置无输入时的提示文本。
TextInput({placeholder:'我是提示文本'})
设置输入框当前的文本内容。
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})添加backgroundColor改变输入框的背景颜色。
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}) .backgroundColor(Color.Pink)
显示图片 (Image)
开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考Image组件。
Image通过调用接口来创建，接口调用形式如下：
Image(src: PixelMap | ResourceStr | DrawableDescriptor)该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考加载图片资源。
加载图片资源
Image支持加载存档图、多媒体像素图两种类型。
存档图类型数据源
存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库资源和base64。
本地资源
创建文件夹，将本地图片放入ets文件夹下的任意位置。
Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。
Image('images/view.jpg') .width(200)网络资源
引入网络图片需申请权限ohos.permission.INTERNET，具体申请方式请参考声明权限。此时，Image组件的src参数为网络图片的链接。
Image组件首次加载网络图片时，需要请求网络资源，非首次加载时，默认从缓存中直接读取图片，更多图片缓存设置请参考setImageCacheCount、setImageRawDataCacheSize、setImageFileCacheSize。
Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址Resource资源
使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读 取到并转换到Resource格式。
图1 resources
调用方式：
Image($r('app.media.icon'))媒体库file://data/storage
支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。
- 调用接口获取图库的照片url。
Image('file://media/Photos/5') .width(200)
多媒体像素图
PixelMap是图片解码后的像素图，具体用法请参考图片开发指导。以下示例将加载的网络图片返回的数据解码成PixelMap格式，再显示在Image组件上，
创建PixelMap状态变量。
@State image: PixelMap | undefined = undefined;引用多媒体。
请求网络图片，解码编码PixelMap。
- 引用网络权限与媒体库权限。
import { http } from '@kit.NetworkKit'; import { image } from '@kit.ImageKit'; import { BusinessError } from '@kit.BasicServicesKit';- 填写网络图片地址
let OutData: http.HttpResponse http.createHttp().request("https://www.example.com/xxx.png", (error: BusinessError, data: http.HttpResponse) => { if (error) { console.error(`http request failed with. Code: ${error.code}, message: ${error.message}`); } else { OutData = data } } )- 将网络地址成功返回的数据，编码转码成pixelMap的图片格式。
let code: http.ResponseCode | number = OutData.responseCode if (http.ResponseCode.OK === code) { let imageData: ArrayBuffer = OutData.result as ArrayBuffer; let imageSource: image.ImageSource = image.createImageSource(imageData); class tmp { height: number = 100 width: number = 100 } let si: tmp = new tmp() let options: Record<string, number | boolean | tmp> = { 'alphaType': 0, // 透明度 'editable': false, // 是否可编辑 'pixelFormat': 3, // 像素格式 'scaleMode': 1, // 缩略值 'size': { height: 100, width: 100 } } // 创建图片大小 class imagetmp { image: PixelMap | undefined = undefined set(val: PixelMap) { this.image = val } } imageSource.createPixelMap(options).then((pixelMap: PixelMap) => { let im = new imagetmp() im.set(pixelMap) }) }- 显示图片。
class htp{ httpRequest: Function | undefined = undefined set(){ if(this.httpRequest){ this.httpRequest() } } } Button("获取网络图片") .onClick(() => { let sethtp = new htp() sethtp.set() }) Image(this.image).height(100).width(100)
自定义弹窗 (CustomDialog)
CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。
创建自定义弹窗
使用@CustomDialog装饰器装饰自定义弹窗。
@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。
@CustomDialog struct CustomDialogExample { controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({}), }) build() { Column() { Text('我是内容') .fontSize(20) .margin({ top: 10, bottom: 10 }) } } }创建构造器，与装饰器呼应相连。
@Entry @Component struct CustomDialogUser { dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample(), }) }点击与onClick事件绑定的组件使弹窗弹出。
@Entry @Component struct CustomDialogUser { dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample(), }) build() { Column() { Button('click me') .onClick(() => { this.dialogController.open() }) }.width('100%').margin({ top: 5 }) } }
视频播放 (Video)
Video组件用于播放视频文件并控制其播放状态，常用于为短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。具体用法请参考Video。
创建视频组件
Video通过调用接口来创建，接口调用形式如下：
Video(value: VideoOptions)
VideoOptions对象包含参数src、currentProgressRate、previewUri、controller。其中，src指定视频播放源的路径，加载方式请参考加载视频资源，currentProgressRate用于设置视频播放倍速，previewUri指定视频未播放时的预览图片路径，controller设置视频控制器，用于自定义控制视频。具体用法请参考VideoOptions对象说明。
加载视频资源
Video组件支持加载本地视频和网络视频。
加载本地视频
普通本地视频。
加载本地视频时，首先在本地rawfile目录指定对应的文件，如下图所示。
再使用资源访问符$rawfile()引用视频资源。
@Component export struct VideoPlayer{ private controller:VideoController | undefined; 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 | undefined; 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 | undefined;
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 | undefined;
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
})
}
}
}图标小符号 (SymbolGlyph/SymbolSpan)
SymbolGlyph是图标小符号组件，便于使用精美的图标，如渲染多色图标。具体用法请参考SymbolGlyph。
创建图标
SymbolGlyph通过引用Resource资源来创建，资源引用类型可以通过$r创建Resource类型对象。
SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
.fontSize(96)
.renderingStrategy(SymbolRenderingStrategy.SINGLE)
.fontColor([Color.Black, Color.Green, Color.White])
添加到文本中
SymbolSpan能作为Text的子组件显示图标小符号。可以在一个Text内添加多个SymbolSpan来显示一串图标。
创建SymbolSpan
SymbolSpan组件需要写到Text组件内，单独的SymbolSpan组件不会显示。
Text() { SymbolSpan($r('sys.symbol.ohos_trash')) .fontWeight(FontWeight.Normal) .fontSize(96) }
通过fontSize属性设置SymbolSpan的大小
Row() { Column() { Text("48") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(48) .renderingStrategy(SymbolRenderingStrategy.SINGLE) .fontColor([Color.Black, Color.Green, Color.White]) } } Column() { Text("72") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(72) .renderingStrategy(SymbolRenderingStrategy.SINGLE) .fontColor([Color.Black, Color.Green, Color.White]) } } Column() { Text("96") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .renderingStrategy(SymbolRenderingStrategy.SINGLE) .fontColor([Color.Black, Color.Green, Color.White]) } } }
通过fontWeight属性设置SymbolSpan组件的粗细。
Row() { Column() { Text("Light") Text() { SymbolSpan($r('sys.symbol.ohos_trash')) .fontWeight(FontWeight.Lighter) .fontSize(96) } } Column() { Text("Normal") Text() { SymbolSpan($r('sys.symbol.ohos_trash')) .fontWeight(FontWeight.Normal) .fontSize(96) } } Column() { Text("Bold") Text() { SymbolSpan($r('sys.symbol.ohos_trash')) .fontWeight(FontWeight.Bold) .fontSize(96) } } }
通过fontColor属性设置SymbolSpan的颜色。
Row() { Column() { Text("Black") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .fontColor([Color.Black]) } } Column() { Text("Green") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .fontColor([Color.Green]) } } Column() { Text("Pink") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .fontColor([Color.Pink]) } } }
通过renderingStrategy属性设置SymbolSpan的渲染策略。
Row() { Column() { Text("单色") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .renderingStrategy(SymbolRenderingStrategy.SINGLE) .fontColor([Color.Black, Color.Green, Color.White]) } } Column() { Text("多色") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) .fontColor([Color.Black, Color.Green, Color.White]) } } Column() { Text("分层") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) .fontColor([Color.Black, Color.Green, Color.White]) } } }
通过effectStrategy属性设置SymbolSpan的动效策略。
Row() { Column() { Text("无动效") Text() { SymbolSpan($r('sys.symbol.ohos_wifi')) .fontSize(96) .effectStrategy(SymbolEffectStrategy.NONE) } } Column() { Text("整体缩放动效") Text() { SymbolSpan($r('sys.symbol.ohos_wifi')) .fontSize(96) .effectStrategy(SymbolEffectStrategy.SCALE) } } Column() { Text("层级动效") Text() { SymbolSpan($r('sys.symbol.ohos_wifi')) .fontSize(96) .effectStrategy(SymbolEffectStrategy.HIERARCHICAL) } } }
Native XComponent
场景介绍
Native XComponent是XComponent组件提供在Native层的实例，可作为JS层和Native层XComponent绑定的桥梁。XComponent所提供的NDK接口都依赖于该实例。接口能力包括获取Native Window实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。针对Native XComponent，主要的开发场景如下：
- 利用Native XComponent提供的接口注册XComponent的生命周期和事件回调。
- 在这些回调中进行初始化环境、获取当前状态、响应各类事件的开发。
- 利用Native Window和EGL接口开发自定义绘制内容以及申请和提交Buffer到图形队列。
生命周期说明
开发者在ArkTS侧使用如下代码即可用XComponent组件进行利用EGL/OpenGLES渲染的开发。
@Builder
function myComponent() {
XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' })
.onLoad((context) => {})
.onDestroy(() => {})
}onLoad事件
触发时刻：XComponent准备好surface后触发。
参数context：其上面挂载了暴露在模块上的Native方法，使用方法类似于利用 import context from "libnativerender.so" 直接加载模块后获得的context实例。
时序：onLoad事件的触发和surface相关，其和Native侧的OnSurfaceCreated的时序如下图：
onDestroy事件
触发时刻：XComponent组件被销毁时触发与一般ArkUI的组件销毁时机一致，其和Native侧的OnSurfaceDestroyed的时序如下图：
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
