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

主要实现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. ……

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

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

相关文章

如何通过内网穿透实现远程访问Linux SVN服务

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

Python之Appium 2自动化测试(Android篇)

一、环境搭建及准备工作 1、Appium 2 环境搭建 请参考另一篇文章: Windows系统搭建Appium 2 和 Appium Inspector 环境 2、安装 Appium-Python-Client,版本要求3.0及以上 pip install Appium-Python-ClientVersion: 3.1.03、手机连接电脑,并在dos窗口…

人机协同

人机协同是指人和机器之间进行合作和协同工作的方式,人机协同是人工智能技术发展的一个重要方向,通过人机协同的方式,可以充分利用机器的智能和人的智慧,共同实现更高效、更智能的工作和生活方式。人机协同可以应用于各种领域和场…

第0篇红队笔记-APT-HTB

nmap 80 port-web尝试 searchploit-无结果 资源隐写查看-无结果 135 port rpcclient rpcinfo.py rpcdump.py rpcmap.py rpcmap.py爆破UUID 查看该UUID的表代表的服务能搜到UUID的漏洞 IOXIDResolver提取IPv6地址 IPV6-nmap smb smb探测目录 文件下载 测试其他目录 zip文件…

Grammarly premium语法检测工具使用方法,及删除检测记录

科研写作神器:Grammarly—语法,标点,单词拼写错误修改。 一、背景 在写英文论文时,作为母语不是英语的我们,不可避免的存在语法错误或笔误,这时就需要Grammarly语法修改软件帮助我们进行修正&#xff0c…

【参数估计】---点估计之矩估计

点估计之矩估计 👻什么是参数估计👻引例---理解参数估计🐟点估计🍭引例🍭点估计问题 🐟矩估计🍭预备知识🍭矩估计的求解步骤🍭矩估计例题 👻什么是参数估计 在…

软件磁盘阵列(software RAID)

RAID-0 等量模式(各个磁盘平均存放文件) RAID-1 镜像模式(一个文件存放两个磁盘) RAID 01 RAID 10 组合模式 RAID 5 三块以上磁盘,记录文件和同位码(存放不通磁盘,通过同…

9.整数转换为布尔值【2023.12.1】

1.问题描述 整数转换为布尔值。 2.解决思路 输入一个整数。 输出布尔值并输出。 3.代码实现 numint(input("请输入一个数字")) boolnumbool(num) print(boolnum)4.运行结果

完美的输出打印 SQL 及执行时长[MyBatis-Plus系列]

导读 Hi,大家好,我是悟纤。过着爱谁谁的生活,活出不设限的人生。 在我们日常开发工作当中,避免不了查看当前程序所执行的SQL语句,以及了解它的执行时间,方便分析是否出现了慢SQL问题。 MyBatis-Plus提供了两种SQL分析打印的方式,用于输出每条SQL语句及其执行时间,针…

C/C++ 通过HTTP实现文件上传下载

WinInet(Windows Internet)是 Microsoft Windows 操作系统中的一个 API 集,用于提供对 Internet 相关功能的支持。它包括了一系列的函数,使得 Windows 应用程序能够进行网络通信、处理 HTTP 请求、FTP 操作等。WinInet 提供了一套…

R语言期末考试复习二

上篇文章的后续!!!! http://t.csdnimg.cn/sqvYD 1.给向量vec1设置名为"A","B","C","D","E","F","G"。 2.将矩阵mat1的行名设置为"Row1"&#…

powershell获取微软o365 21v日志

0x00 背景 o365 21v为o365的大陆版本,主要给国内用户使用。微软提供了powershell工具和接口获取云上日志。微软o365国内的代理目前是世纪互联。本文介绍如何用powershell和配置证书拉取云上日志。 0x01 实践 第一步,ip权限开通: 由世纪互联…

SQL Server 2016(为数据表Porducts添加数据)

1、实验环境。 某公司有一台已经安装了SQL Server 2016的服务器,并已经创建了数据库PM。 2、需求描述。 在数据库PM中创建表products,"编号"列的值自动增长并为主键。然后使用T-SQL语句为表格插入如下数据。 3、实验步骤。 1、使用SSMS管理工…

网络安全应急响应-Server2228(环境+解析)

网络安全应急响应 任务环境说明: 服务器场景:Server2228(开放链接)用户名:root,密码:p@ssw0rd123

【爬虫逆向分析实战】某笔登录算法分析——本地替换分析法

前言 作者最近在做一个收集粉币的项目,可以用来干嘛这里就不展开了😁,需要进行登录换算token从而达到监控收集的作用,手机抓包发现他是通过APP进行计算之后再请求接口的,通过官网分析可能要比APP逆向方便多&#xff0…

如何解决SSL证书部署后未生效或网站显示不安全

本文介绍SSL证书部署后未生效或网站显示不安全的排查方法。 浏览器提示“您与此网站建立的连接不安全” 浏览器提示“无法访问此页面” 浏览器提示“这可能是因为站点使用过期或者不全的TLS安全设置” 浏览器提示“此页面上部分内容不安全(例如图像)”…

Python datetime 字符串 相互转 datetime

字符串转 datetime from datetime import datetime# 定义要转换的日期时间字符串 dt_str "2021-09-30 15:48:36"# 使用datetime.strptime()函数进行转换 dt_obj datetime.strptime(dt_str, "%Y-%m-%d %H:%M:%S") print(dt_obj)datetime 转字符串 from …

c语言练习13周(1~5)

输入任意整数n求以下公式和的平方根。 读取一系列的整数 X,对于每个 X,输出一个 1,2,…,X 的序列。 编写double fun(int a[M][M])函数,返回二维数组周边元素的平均值,M为定义好的符号常量。 编写double fun(int a[M])函…

Spinnaker 基于 jenkins 触发部署

jenkins job 触发部署 将 Jenkins 设置为 Spinnaker 中的持续集成 (CI) 系统可让您使用 Jenkins 触发管道、向管道添加 Jenkins 阶段或向管道添加脚本阶段。 前置要求: 已在kubernetes中部署spinnaker已准备可用的jenkins实例 启用 jenkins触发器 官方文档&…

电源控制系统架构(PCSA)之系统控制处理器组件

目录 6.4 系统控制处理器 6.4.1 SCP组件 SCP处理器Core SCP处理器Core选择 SCP处理器核内存 系统计数器和通用计时器 看门狗 电压调节器控制 时钟控制 系统控制 信息接口 电源策略单元 传感器控制 外设访问 系统访问 6.4 系统控制处理器 系统控制处理器(SCP)是…