打开网站后直接做跳转页面,装修在线设计平台,网站开发和app开发的区别,WordPress搭建社区网站语雀知识库地址#xff1a;语雀HarmonyOS知识库 飞书知识库地址#xff1a;飞书HarmonyOS知识库 本文示例代码地址#xff1a;Gitee 仓库地址 嗨#xff0c;各位好呀#xff0c;我是小白
上一篇文章我为大家介绍了如何使用 ArkTS 开发鸿蒙应用#xff0c;对 HarmonyOS 项… 语雀知识库地址语雀HarmonyOS知识库 飞书知识库地址飞书HarmonyOS知识库 本文示例代码地址Gitee 仓库地址 嗨各位好呀我是小白
上一篇文章我为大家介绍了如何使用 ArkTS 开发鸿蒙应用对 HarmonyOS 项目代码结构做了初步的介绍 还没看过的小伙伴可以先复习一下对接下来的内容会有很大的帮助 浅析HarmonyOS开发语言ArkTS 从上面的案例中很容易就能看出开发一个鸿蒙应用实际上就是使用 ArkTS 提供的各个组件来组合成一个页面 那么要熟练的使用 ArkTS 提供的组件就显得尤为重要 这篇文章就向大家介绍一些 ArkTS 常用的基础组件
Image——图片组件
Image 为图片组件常用于在应用中显示图片
Image 支持加载 PixelMap、ResourceStr 和 DrawableDescriptor 类型的数据源支持 png、jpg、bmp、svg 和 gif 类型的图片格式
定义方式
Image(src: string | Resource | media.PixelMap)其入参需要传入一个图片源参数名为 src 参数类型是 union 联合类型支持字符串地址、像素图以及本地图片
参数使用
string该方式通常用来加载网络图片也可以加载本地资源比如下面这种写法
// 加载网络资源
Image(https://developer.huawei.com/images/logo-developer-header.svg)
// 加载本地资源 创建文件夹将本地图片放入ets文件夹下的任意位置Image组件引入本地图片路径即可显示图片根目录为ets文件夹
Image(images/view.jpg)效果如下 在这里需要注意的是当使用该方式获取网络上的图片资源时在本地预览是可以进行展示的但是当使用模拟器进行调试时使用该方式获取的网络资源是无法展示的这是因为该方式需要使用网络权限所以我们可以在当前模块的 module.json5 配置文件的 module 标签下加入以下代码即可
requestPermissions: [{name: ohos.permission.INTERNET}
]PixelMap这种方式可以用来加载像素图常用于图片编辑的场景Resource加载本地图片使用资源格式可以跨包/跨模块引入图片resources文件夹下的图片都可以通过 $r 资源接口读取到并转换到 Resource 格式推荐使用
Image($r(app.media.icon))
Image($rawfile(icon.png))可以看到使用 Resource 类型加载图片时有两种写法这两种写法所读取的文件目录是不同的
使用 $r() 方式所读取的目录是 src/main/resources/base/media 该目录下的文件这种方式不需要写文件的后缀名使用 $rawfile() 方式读取的目录是 src/main/resources/rawfile 该目录下的文件这种方式必须将文件的后缀名写上否则就会报错 (如果没有这个文件夹手动创建即可)
媒体库文件即手机内部文件支持file://路径前缀的字符串用于访问通过媒体库提供的图片路径base64路径格式为 data:image/[png | jpeg | bmp | webp]; base64,[base64 data]其中 [base64 data] 为 Base64 字符串数据。Base64 格式字符串可用于存储图片的像素数据在网页上使用较为广泛
效果如下
设置属性
Image 作为基本组件除了有通用属性 width()、height()、padding() 等还有其自身所拥有的属性
Image($r(app.media.car)).alt($r(app.media.icon)).width(50%).height(70).borderRadius(10).interpolation(ImageInterpolation.High)其中
alt 为图片加载时显示的占位图支持本地图片png、jpg、bmp、svg 和 gif 类型不支持网络图片borderRadius 为图片设置圆角数值越大图片的圆角就越大interpolation 设置图片的插值效果即减轻低清晰度图片在放大显示时出现的锯齿问题可以为数值也可以使用枚举值 设置事件
onComplete图片数据加载成功和解码成功时均触发该回调返回成功加载的图片尺寸
onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) void)loadingStatus 参数用于返回图片加载成功的状态值。返回的状态值为0时表示图片数据加载成功。返回的状态值为1时表示图片解码成功
onError图片加载异常时触发该回调
onError(callback: (event?: { componentWidth: number, componentHeight: number , message: string }) void)onFinish当加载的源文件为带动效的 svg 格式图片时svg 动效播放完成时会触发这个回调。如果动效为无限循环动效则不会触发这个回调。仅支持svg格式的图片
onFinish(event: () void)Text/Span——文本组件
定义方式
Text(content?: string | Resource)
Span(value: string | Resource)在 Text 中套用 Span 组件时Span 的内容会覆盖掉 Text 的内容 参数使用
string传入的内容即为所显示的内容
Text(Hello World)Resource该方式传入的内容为当前系统语言所对应文件中的数据值
Text($r(app.string.module_desc))这里需要注意的是$r 方式默认是根据系统的语言来匹配读取对应语言文件夹下 /element/string.json 文件中对应的值如果都匹配不到的话则读取的是 /resources/base/element/string.json因此在使用此方式读取值的时候需要在每种系统语言对应的目录文件中都添加相同 key 的数据否则会报错 设置属性
Text 除了通用的属性外其自身也有许多属性可以设置
示例 1
// 单行文本
Text(textAlign).fontSize(15).fontColor(#36D).fontWeight(FontWeight.Bold).padding({top:5, bottom:5})
Text(TextAlign set to Center.).textAlign(TextAlign.Center).fontSize(12).border({ width: 1 }).padding(10).width(100%)
Text(TextAlign set to Start.).textAlign(TextAlign.Start).fontSize(12).border({ width: 1 }).padding(10).width(100%)
Text(TextAlign set to End.).textAlign(TextAlign.End).fontSize(12).border({ width: 1 }).padding(10).width(100%)// 多行文本
Text(This is the text content with textAlign set to Center.).textAlign(TextAlign.Center).fontSize(12).border({ width: 1 }).padding(10).width(100%)
Text(This is the text content with textAlign set to Start.).textAlign(TextAlign.Start).fontSize(12).border({ width: 1 }).padding(10).width(100%)
Text(This is the text content with textAlign set to End.).textAlign(TextAlign.End).fontSize(12).border({ width: 1 }).padding(10).width(100%)// 文本超长时显示方式
Text(TextOverflowmaxLines).fontSize(15).fontColor(#36D).fontWeight(FontWeight.Bold).padding({top:5, bottom:5})
// 超出maxLines截断内容展示
Text(This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.).textOverflow({ overflow: TextOverflow.Clip }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)// 超出maxLines展示省略号
Text(This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content..split().join(\u200B)).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)Text(lineHeight).fontSize(15).fontColor(#36D).fontWeight(FontWeight.Bold).padding({top:5, bottom:5})
Text(This is the text with the line height set. This is the text with the line height set.).fontSize(12).border({ width: 1 }).padding(10)
Text(This is the text with the line height set. This is the text with the line height set.).fontSize(12).border({ width: 1 }).padding(10).lineHeight(20)效果如下 其中
textAlign设置文本段落在水平方向的对齐方式默认值TextAlign.Start可选值TextAlign.Start、TextAlign.Center、TextAlign.EndtextOverflow设置文本超长时的显示方式。默认值{overflow: TextOverflow.Clip}lineHeight设置文本的文本行高设置值不大于 0 时不限制文本行高自适应字体大小Length 为 number 类型时单位为fp
示例 2 Text(decoration).fontSize(15).fontColor(#36D).fontWeight(FontWeight.Bold).padding({top:5, bottom:5})Text(This is the text content with the decoration set to LineThrough and the color set to Red.).decoration({type: TextDecorationType.LineThrough,color: Color.Red}).fontSize(12).border({ width: 1 }).padding(10).width(100%)Text(This is the text content with the decoration set to Overline and the color set to Red.).decoration({type: TextDecorationType.Overline,color: Color.Red}).fontSize(12).border({ width: 1 }).padding(10).width(100%)Text(This is the text content with the decoration set to Underline and the color set to Red.).decoration({type: TextDecorationType.Underline,color: Color.Red}).fontSize(12).border({ width: 1 }).padding(10).width(100%)// 文本基线偏移Text(baselineOffset).fontSize(15).fontColor(#36D).fontWeight(FontWeight.Bold).padding({top:5, bottom:5})Text(This is the text content with baselineOffset 0.).baselineOffset(0).fontSize(12).border({ width: 1 }).padding(10).width(100%)Text(This is the text content with baselineOffset 30.).baselineOffset(30).fontSize(12).border({ width: 1 }).padding(10).width(100%)Text(This is the text content with baselineOffset -20.).baselineOffset(-20).fontSize(12).border({ width: 1 }).padding(10).width(100%)// 文本字符间距Text(letterSpacing).fontSize(15).fontColor(#36D).fontWeight(FontWeight.Bold).padding({top:5, bottom:5})Text(This is the text content with letterSpacing 0.).letterSpacing(0).fontSize(12).border({ width: 1 }).padding(10).width(100%)Text(This is the text content with letterSpacing 3.).letterSpacing(3).fontSize(12).border({ width: 1 }).padding(10).width(100%)Text(This is the text content with letterSpacing -1.).letterSpacing(-1).fontSize(12).border({ width: 1 }).padding(10).width(100%)Text(textCase).fontSize(15).fontColor(#36D).fontWeight(FontWeight.Bold).padding({top:5, bottom:5})Text(This is the text content with textCase set to Normal.).textCase(TextCase.Normal).fontSize(12).border({ width: 1 }).padding(10).width(100%)// 文本全小写展示Text(This is the text content with textCase set to LowerCase.).textCase(TextCase.LowerCase).fontSize(12).border({ width: 1 }).padding(10).width(100%)// 文本全大写展示Text(This is the text content with textCase set to UpperCase.).textCase(TextCase.UpperCase).fontSize(12).border({ width: 1 }).padding(10)效果如下 其中
decoration设置文本装饰线样式及其颜色。默认值{type: TextDecorationType.None,colorColor.Black}baselineOffset设置文本基线的偏移量默认值0。设置该值为百分比时按默认值显示letterSpacing设置文本字符间距。默认值0。设置该值为百分比时按默认值显示textCase设置文本大小写。默认值TextCase.Normal
TextInput/TextArea——文本输入
定义方式
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})参数使用
placeholder
TextInput({placeholder:placeholder 占位语})
TextArea({placeholder:placeholder占位语placeholder占位语placeholder占位语})text
TextInput({text:为TextInput设置默认值})
TextArea({text:我是TextArea我是TextArea我是TextArea我是TextArea})当 placeholder 与 text 同时存在时placeholder 的值将会被 text 的内容所覆盖
设置属性
TextInput({ text: this.text, placeholder: input your word..., controller: this.controller }).placeholderColor(Color.Grey).placeholderFont({ size: 14, weight: 400 }).caretColor(Color.Blue).width(400).height(40).margin(20).fontSize(14).fontColor(Color.Black).inputFilter([a-z], (e) {console.log(JSON.stringify(e))}).onChange((value: string) {this.text value})
Text(this.text)
Button(Set caretPosition 1).margin(15).onClick(() {// 将光标移动至第一个字符后this.controller.caretPosition(1)})
// 密码输入框
TextInput({ placeholder: input your password... }).width(400).height(40).margin(20).type(InputType.Password).maxLength(9).showPasswordIcon(true)
// 内联风格输入框
TextInput({ placeholder: inline style }).width(400).height(50).margin(20).borderRadius(0).style(TextInputStyle.Inline).copyOption(CopyOptions.LocalDevice).textAlign(TextAlign.Start)其中
placeholderColor设置placeholder文本颜色placeholderFont设置placeholder文本样式caretColor设置输入框光标颜色inputFilter正则表达式匹配表达式的输入允许显示不匹配的输入将被过滤。目前仅支持单个字符匹配不支持字符串匹配。其中 value 设置正则表达式error 设置正则匹配失败时返回被过滤的内容type输入框的类型默认是 InputType.NormalmaxLength设置文本的最大输入字符数showPasswordIcon当 type 属性为 InputType.Password 时输入框末尾的图标是否显示style设置输入框为默认风格或内联输入风格copyOption设置输入的文本是否可复制textAlign设置输入文本在输入框中的对齐方式
设置事件
onChange(callback: (value: string) void)输入内容发生变化时的回调函数onSubmit(callback: (enterKey: EnterKeyType) void)按下输入法回车键触发该回调返回值为当前输入法回车键的类型onCopy(callback:(value: string) void)长按输入框内部区域弹出剪贴板后点击剪切板复制按钮触发该回调
Button——按钮
定义方式
Button(options?: {type?: ButtonType, stateEffect?: boolean})
Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })参数使用
label按钮文本内容
Button(按钮文本内容 label)Button(这是一个按钮-正常, { type: ButtonType.Normal, stateEffect: true })
Button(这是一个按钮-胶囊, { type: ButtonType.Capsule, stateEffect: true })
Button(Ok-圆, { type: ButtonType.Circle, stateEffect: true })options-type描述按钮显示样式options-stateEffect按钮按下时是否开启按压态显示效果当设置为 false 时按压效果关闭。当开启按压态显示效果设置状态样式时会基于状态样式设置完成后的背景色再进行颜色叠加 设置属性
Button 组件的属性在通用属性中均已支持
设置事件
Button 组件的事件在通用事件中均已支持
结语
除了以上所列举的 Image、Text/Span、TextInput/TextArea、Button 组件外ArkTS 还支持了 Menu(菜单)、Slider(滑块)、Radio(单选)、CheckBox(复选框)、Progress(进度条) 等我们在手机上所能看到的组件这些组件的使用方式大同小异无需特殊记忆在需要使用时查阅官方文档即可
