主要实现UI组件文本和图片的常见效果查看，本身功能特别的简单，其目的也是很明确，方便大家根据效果查看相关代码实现，可以很方便的进行复制使用，当然了，这些所谓的小功能都是开胃小菜，脚手架的最终成型，势必可以惊艳到大家，大家可以持续关注。

效果呢如下所示，左边是常见效果，点击后，右边展示效果代码：

下图是录制的一个GIF，大家可以直观的查看。

还是按照以往的案例，先说下基本实现，在说下脚手架的实现方式。

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#?w=470&h=314&s=1171503&e=gif&f=32&b=d0c0a4").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也会不断地扩展，不断地丰富起来。

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术，这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看：https://qr21.cn/FV7h05

1. 应用开发导读(ArkTS)
2. 应用开发导读(Java)

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系统定义
2. 技术架构
3. 技术特性
4. 系统安全

如何快速入门：https://qr21.cn/FV7h05

1. 基本概念
2. 构建第一个ArkTS应用
3. 构建第一个JS应用
4. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……