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

前言

关于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#?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也会不断地扩展,不断地丰富起来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/189619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCP三次握手过程

什么是TCP tcp是一个面向连接的、可靠的、基于字节流的传输层通信协议 面向连接:TCP连接是一对一的,不能实现一对多或多对一,TCP在通信前要首先建立连接,连接成功后才能开始进行通信可靠的:TCP连接要保证通信过程的可靠…

iOS 版 ONLYOFFICE 文档 v7.4已更新!

iOS 版 ONLYOFFICE 文档 v7.4已更新 全新版本的免费 ONLYOFFICE 文档管理与编辑应用现已在 iOS 设备上推出。继续阅读以了解有关本次更新的信息,也可以在本文中找到应用的下载链接。 关于 ONLYOFFICE 文档 ONLYOFFICE 文档是一款适合手机与平板电脑的移动端应用套件…

springboot中@Builder注解的详细用法实例,跟数据库结合。

在Spring Boot中,Builder注解是Lombok库提供的一个注解,用于生成带有Builder模式支持的构造器方法。通过Builder注解,可以简化对象的创建过程,特别适用于需要设置多个属性的情况。 下面是一个使用Builder注解的示例: …

基于python的FMCW雷达工作原理仿真

这篇文章将介绍如何使用python来实现FMCW工作原理的仿真,第1章内容将介绍距离检测原理,第2章内容会介绍速度检测原理。 第1章 第1部分: 距离检测原理 调制的连续波雷达通常也被叫做调频连续波(FMCW)雷达是一个使用频率调制来测量…

腾讯云避坑——无法远程root登录

因为各种原因,最近需要使用腾讯云来代替阿里云。 但在ubuntu18/20的服务器中,我使用另一个电脑试图用scp命令来拷贝服务器中的一些文件,命令为: scp root服务器ip:文件目录 本地目录但一直显示密码错误。 原因是腾讯云ubuntu系统在创建时并不…

BLIoTLink工业协议转换软件功能和使用教程

1.功能简介 BLIoTLink 是一款各种 PLC 协议、Modbus RTU 、Modbus TCP、DL/T645 等多 种协议转换为 Modbus TCP、OPC UA、MQTT、BACnet IP、华为云 IoT、亚 马逊云 IoT、阿里云 IoT、ThingsBoard、钡铼云 IoT 等协议的软件。 BLIoTLink 下行支持:各种 PLC 协议、Mod…

centos上安装并持久化配置LVS

1 实验背景 1)系统版本:centos7.8 2)虚拟机:3个centos虚拟机,(其中一个做Director Server,另外两个做Real Server) 3) LVS大致有NAT ,DR ,Tun这三种模式,这里搭建一个典型的DR模式的LVS Direc…

【漏洞复现】大华智慧园区综合管理平台deleteFtp接口远程命令执行

漏洞描述 大华智慧园区综合管理平台deleteFtp接口存在远程命令执行,攻击者可利用该漏洞执行任意命令,获取服务器控制权限。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和利益…

C 标准库 <locale.h>

C 标准库 <locale.h> locale.h 头文件定义了特定地域的设置&#xff0c;比如日期格式和货币符号。接下来我们将介绍一些宏&#xff0c;以及一个重要的结构 struct lconv 和两个重要的函数。 库宏 下面列出了头文件 locale.h 中定义的宏&#xff0c;这些宏将在下列的两…

VSC++=》 拆解整数对号入座重组

void 拆解整数对号入座重组(int& 数, bool 选 true) {int 对号[10]{}, j 选 ? 9 : 0, 反 0, 基 1;while (数)对号[数 % 10], 数 / 10;if (选)while (j > 0)if (对号[j])数 * 10, 数 j, (反 ? 基 * 10 : 0), 反 基 * j, --对号[j]; else --j;else while (j < …

VSC++=》 友数对友质数()

void 友数对友质数() {//缘由https://bbs.csdn.net/topics/396498706?page1#post-411382586int aa 2, aaa 20; while (aa * aaa < 119)if (判断质数(aa * aaa - 1))cout << aa << ends << aaa << ends << (aa*aaa - 1) << endl, aaa…

41 - 如何使用缓存优化系统性能?

缓存是我们提高系统性能的一项必不可少的技术&#xff0c;无论是前端、还是后端&#xff0c;都应用到了缓存技术。前端使用缓存&#xff0c;可以降低多次请求服务的压力&#xff1b;后端使用缓存&#xff0c;可以降低数据库操作的压力&#xff0c;提升读取数据的性能。 今天我…

目标检测YOLO系列从入门到精通技术详解100篇-【自动驾驶】激光雷达

目录 前言 几个高频面试题目 为什么毫米波雷达无法识别静态物体? 毫米波雷达传感器融合的困境

nodejs微信小程序+python+PHP金融产品销售系统的设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

R语言30分钟上手

文章目录 1. 环境&安装1.1. rstudio保存工作空间 2. 创建数据集2.1. 数据集概念2.2. 向量、矩阵2.3. 数据框2.3.1. 创建数据框2.3.2. 创建新变量2.3.3. 变量的重编码2.3.4. 列重命名2.3.5. 缺失值2.3.6. 日期值2.3.7. 数据框排序2.3.8. 数据框合并(合并沪深300和中证500收盘…

​LeetCode解法汇总2661. 找出叠涂元素

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给你一个下…

【前端】大文件切片上传性能优化 使用 web worker 多线程

线程代码 worker.js //实例化一个 XMLHttpRequest 对象 let xhr new XMLHttpRequest(); let 延迟关闭线程等待时间毫秒 6000function 取消上传(){try {xhr.abort()}catch (e) {} }addEventListener(message, e > {const { type, data } e.data// console.log(子线程:,d…

自定义Vue的DockPanel-Layout

创作来源 1、在vue项目中需要有停靠、浮动、面板布局等需求&#xff0c;如arcgis的界面布局 2、在npm中搜索了关于vue的docklayout组件&#xff0c;搜索后就一个组件imengyu/vue-dock-layout&#xff0c;截图如下&#xff0c;该组件没有停靠组件&#xff0c;没有浮动组件&…

scrapy爬虫中间件和下载中间件的使用

一、关于中间件 之前文章说过&#xff0c;scrapy有两种中间件&#xff1a;爬虫中间件和下载中间件&#xff0c;他们的作用时间和位置都不一样&#xff0c;具体区别如下&#xff1a; 爬虫中间件&#xff08;Spider Middleware&#xff09; 作用&#xff1a; 爬虫中间件主要负…

浏览器垃圾回收机制的几种回收方法

前言 浏览器垃圾回收机制是指浏览器对内存中不再使用的对象进行自动回收和释放的过程。浏览器垃圾回收机制的目的是为了防止内存泄漏&#xff0c;提高程序的性能和稳定性。 原理 基于可达性的概念&#xff0c;即从一个或多个根对象出发&#xff0c;能够通过引用或指针找到的对…