HarmonyOS脚手架：UI组件之文本和图片

前言

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

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

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

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

脚手架地址：

github.com/AbnerMing88...

1、常见文本效果代码

2、常见图片效果代码

3、脚手架实现分析

4、相关总结

一、常见文本效果代码

1、普通文字

TypeScript 复制代码

Text("普通文字")

2、文字加粗

TypeScript 复制代码

    Text("文字加粗")
        .fontWeight(FontWeight.Bold)

3、文字倾斜

TypeScript 复制代码

  Text("文字倾斜")
        .fontStyle(FontStyle.Italic)

4、文字颜色

TypeScript 复制代码

   Text("文字颜色")
        .fontColor("#ff0000")

5、文字大小

TypeScript 复制代码

      Text("文字大小")
        .fontSize(23)

5、文字背景

TypeScript 复制代码

      Text("文字背景")
        .fontColor(Color.White)
        .backgroundColor(Color.Red)

6、圆角文字背景

TypeScript 复制代码

      Text("圆角文字背景")
        .fontColor(Color.White)
        .backgroundColor(Color.Red)
        .borderRadius(5)

7、圆背景

TypeScript 复制代码

      Text("圆")
        .width(30)
        .height(30)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .backgroundColor(Color.Red)
        .borderRadius(30)

8、省略文字

TypeScript 复制代码

      Text("我是一段很长的文字，当超出一行时，就会展示出省略号")
        .maxLines(1)
        .margin({ left: 20, right: 20 })
        .textOverflow({ overflow: TextOverflow.Ellipsis })

9、文字点击事件

TypeScript 复制代码

      Text("文字点击事件")
        .onClick(() => {
          promptAction.showToast({
            message: '我点击了文字',
            duration: 2000,
          })
        })

10、富文本效果

TypeScript 复制代码

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、文字左侧带图片

TypeScript 复制代码

      Row() {
        Text("文字左侧带图片")
        Image($r("app.media.app_icon"))
          .width(20)
          .height(20)
      }

12、文字右侧带图片

TypeScript 复制代码

      Row() {
        Image($r("app.media.app_icon"))
          .width(20)
          .height(20)
        Text("文字右侧带图片")
      }

13、文字上侧带图片

TypeScript 复制代码

      Column() {
        Image($r("app.media.app_icon"))
          .width(20)
          .height(20)
        Text("文字上侧带图片")
      }

14、文字下侧带图片

TypeScript 复制代码

      Column() {
        Text("文字下侧带图片")
        Image($r("app.media.app_icon"))
          .width(20)
          .height(20)
      }

二、常见图片效果代码

1、普通图片

TypeScript 复制代码

Image($r("app.media.hos_logo"))
            .height(100)
            .margin({ top: 20 })

2、加载动图

TypeScript 复制代码

 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、网络图片

TypeScript 复制代码

Image("https://www.vipandroid.cn/ming/image/gan.png")
            .height(100)
            .alt($r("app.media.icon"))

4、圆角图片

TypeScript 复制代码

 Image($r("app.media.hos_logo"))
            .height(100)
            .borderRadius(10)

5、圆形图片clip设置

TypeScript 复制代码

Image($r("app.media.hos_logo"))
            .width(100)
            .height(100)
            .clip(new Circle({ width: 100, height: 100 }))

6、圆形图片borderRadius设置

TypeScript 复制代码

 Image($r("app.media.hos_logo"))
            .width(100)
            .height(100)
            .borderRadius(100)

7、圆角图片边线链式调用

TypeScript 复制代码

Image($r("app.media.hos_logo"))
            .height(100)
            .borderRadius(10)
            .borderWidth(1)
            .borderColor(Color.Red)

8、圆角图片边线border调用

TypeScript 复制代码

Image($r("app.media.hos_logo"))
            .height(100)
            .border({ width: 1, color: Color.Red, radius: 10 })

9、圆形图片边线border调用

TypeScript 复制代码

Image($r("app.media.hos_logo"))
            .width(100)
            .height(100)
            .border({ width: 1, color: Color.Red, radius: 100 })

10、圆形图片边线链式调用

TypeScript 复制代码

Image($r("app.media.hos_logo"))
            .width(100)
            .height(100)
            .borderRadius(100)
            .borderWidth(1)
            .borderColor(Color.Red)

11、占位图片设置

TypeScript 复制代码

Image($r("app.media.hos_logo"))
            .height(100)
            .alt($r("app.media.icon"))
            .margin({ top: 20 })

12、图片加载错误设置

TypeScript 复制代码

          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、获取图片的宽高

TypeScript 复制代码

          Image($r("app.media.hos_logo"))
            .height(100)
            .margin({ top: 20 })
            .onComplete((msg: {
              width: number,
              height: number
            }) => {
              this.widthValue = msg.width
              this.heightValue = msg.height
            })

14、黑白渲染模式图片

TypeScript 复制代码

 Image($r("app.media.hos_logo"))
            .height(100)
            .margin({ top: 20 })
            .renderMode(ImageRenderMode.Template)

15、图片填充效果Cover

TypeScript 复制代码

 Image($r("app.media.hos_logo"))
            .width(100)
            .height(100)
            .margin({ top: 20 })
            .objectFit(ImageFit.Cover)

16、图片填充效果Fill

TypeScript 复制代码

   Image($r("app.media.hos_logo"))
            .width(100)
            .height(100)
            .margin({ top: 20 })
            .objectFit(ImageFit.Fill)

17、图片填充效果Contain

TypeScript 复制代码

          Image($r("app.media.hos_logo"))
            .width(100)
            .height(100)
            .margin({ top: 20 })
            .objectFit(ImageFit.Contain)

三、脚手架实现分析

前两篇关于脚手架已经做过解读，目前是用web语言开发的，所以在写脚手架的时候，我会把实际的效果用ArkUI写一套，对应的效果，也会在脚手架用js写一套，确实相对于之前的Flutter脚手架，复杂了一些，只能期待后续鸿蒙支持PC端开发了，相信也快。

左侧是用html绘制的相关效果，每一个效果都对应一段ArkUI代码，就是这么简单[捂脸哭]

四、相关总结

目前仅仅完成了文本和图片的效果和代码展示，本身并没有技术含量，后续关于相关UI也会不断地扩展，不断地丰富起来。