网页设计和网站开发的区别,网站开发服务器配置,环球贸易网国际站,中山建设信息网前言 关于HarmonyOS脚手架#xff0c;本篇是系列的第二篇#xff0c;主要实现UI组件文本和图片的常见效果查看#xff0c;本身功能特别的简单#xff0c;其目的也是很明确#xff0c;方便大家根据效果查看相关代码实现#xff0c;可以很方便的进行复制使用#xff0c;当…前言 关于HarmonyOS脚手架本篇是系列的第二篇主要实现UI组件文本和图片的常见效果查看本身功能特别的简单其目的也是很明确方便大家根据效果查看相关代码实现可以很方便的进行复制使用当然了这些所谓的小功能都是开胃小菜脚手架的最终成型势必可以惊艳到大家大家可以持续关注。 效果呢如下所示左边是常见效果点击后右边展示效果代码 下图是录制的一个GIF大家可以直观的查看。 还是按照以往的案例先说下基本实现在说下脚手架的实现方式。 脚手架地址 https://github.com/AbnerMing888/HarmonyScaffolding 1、常见文本效果代码
2、常见图片效果代码
3、脚手架实现分析
4、相关总结 一、常见文本效果代码
1、普通文字 Text(普通文字) 2、文字加粗 Text(文字加粗).fontWeight(FontWeight.Bold) 3、文字倾斜 Text(文字倾斜).fontStyle(FontStyle.Italic) 4、文字颜色 Text(文字颜色).fontColor(#ff0000) 5、文字大小 Text(文字大小).fontSize(23) 5、文字背景 Text(文字背景).fontColor(Color.White).backgroundColor(Color.Red) 6、圆角文字背景 Text(圆角文字背景).fontColor(Color.White).backgroundColor(Color.Red).borderRadius(5) 7、圆背景 Text(圆).width(30).height(30).textAlign(TextAlign.Center).fontColor(Color.White).backgroundColor(Color.Red).borderRadius(30) 8、省略文字 Text(我是一段很长的文字当超出一行时就会展示出省略号).maxLines(1).margin({ left: 20, right: 20 }).textOverflow({ overflow: TextOverflow.Ellipsis }) 9、文字点击事件 Text(文字点击事件).onClick(() {promptAction.showToast({message: 我点击了文字,duration: 2000,})}) 10、富文本效果 Text() {Span(富文本效果)Span(《用户协议》).fontColor(Color.Red).decoration({ type: TextDecorationType.Underline, color: Color.Red }).onClick(() {promptAction.showToast({message: 《用户协议》,duration: 2000,})})Span( 和 )Span(《隐私政策》).fontColor(Color.Red).decoration({ type: TextDecorationType.Underline, color: Color.Red }).onClick(() {promptAction.showToast({message: 《隐私政策》,duration: 2000,})})} 11、文字左侧带图片 Row() {Text(文字左侧带图片)Image($r(app.media.app_icon)).width(20).height(20)} 12、文字右侧带图片 Row() {Image($r(app.media.app_icon)).width(20).height(20)Text(文字右侧带图片)} 13、文字上侧带图片 Column() {Image($r(app.media.app_icon)).width(20).height(20)Text(文字上侧带图片)}14、文字下侧带图片 Column() {Text(文字下侧带图片)Image($r(app.media.app_icon)).width(20).height(20)} 二、常见图片效果代码
1、普通图片 Image($r(app.media.hos_logo)).height(100).margin({ top: 20 })2、加载动图 Image(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a35a1eff167c4a6b85455469e2be1dba~tplv-k3u1fbpfcp-jj:135:90:0:0:q75.awebp#?w470h314s1171503egiff32bd0c0a4).height(100)3、网络图片 Image(https://www.vipandroid.cn/ming/image/gan.png).height(100).alt($r(app.media.icon)) 4、圆角图片 Image($r(app.media.hos_logo)).height(100).borderRadius(10)5、圆形图片clip设置 Image($r(app.media.hos_logo)).width(100).height(100).clip(new Circle({ width: 100, height: 100 }))6、圆形图片borderRadius设置 Image($r(app.media.hos_logo)).width(100).height(100).borderRadius(100) 7、圆角图片边线链式调用 Image($r(app.media.hos_logo)).height(100).borderRadius(10).borderWidth(1).borderColor(Color.Red) 8、圆角图片边线border调用 Image($r(app.media.hos_logo)).height(100).border({ width: 1, color: Color.Red, radius: 10 }) 9、圆形图片边线border调用 Image($r(app.media.hos_logo)).width(100).height(100).border({ width: 1, color: Color.Red, radius: 100 })10、圆形图片边线链式调用 Image($r(app.media.hos_logo)).width(100).height(100).borderRadius(100).borderWidth(1).borderColor(Color.Red) 11、占位图片设置 Image($r(app.media.hos_logo)).height(100).alt($r(app.media.icon)).margin({ top: 20 })12、图片加载错误设置 Image(this.errorImage).height(100).alt($r(app.media.icon)).margin({ top: 20 }).onError(() {//图片加载错误,重新赋值this.errorImage https://www.vipandroid.cn/ming/image/zao.png})13、获取图片的宽高 Image($r(app.media.hos_logo)).height(100).margin({ top: 20 }).onComplete((msg: {width: number,height: number}) {this.widthValue msg.widththis.heightValue msg.height})14、黑白渲染模式图片 Image($r(app.media.hos_logo)).height(100).margin({ top: 20 }).renderMode(ImageRenderMode.Template) 15、图片填充效果Cover Image($r(app.media.hos_logo)).width(100).height(100).margin({ top: 20 }).objectFit(ImageFit.Cover)16、图片填充效果Fill Image($r(app.media.hos_logo)).width(100).height(100).margin({ top: 20 }).objectFit(ImageFit.Fill) 17、图片填充效果Contain Image($r(app.media.hos_logo)).width(100).height(100).margin({ top: 20 }).objectFit(ImageFit.Contain) 三、脚手架实现分析 前两篇关于脚手架已经做过解读目前是用web语言开发的所以在写脚手架的时候我会把实际的效果用ArkUI写一套对应的效果也会在脚手架用js写一套确实相对于之前的Flutter脚手架复杂了一些只能期待后续鸿蒙支持PC端开发了相信也快。 左侧是用html绘制的相关效果每一个效果都对应一段ArkUI代码就是这么简单[捂脸哭] 四、相关总结 目前仅仅完成了文本和图片的效果和代码展示本身并没有技术含量后续关于相关UI也会不断地扩展不断地丰富起来。
