鸿蒙开发之ArkUI组件常用组件图片和文本

ArkUI即方舟开发框架是HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

开发文档地址  ： 文档中心

基本概念

  • UI：即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦。 

  • 组件：UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

两种开发范式

针对不同的应用场景及技术背景，方舟开发框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。

  • 声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。 
  • 类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟开发框架应用。 

在开发一款新应用时，推荐采用声明式开发范式来构建UI，主要基于以下几点考虑：

  • 开发效率：声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁。 
  • 应用性能：如下图所示，两种开发范式的UI后端引擎和语言运行时是共用的，但是相比类Web开发范式，声明式开发范式无需JS框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。 
  • 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力。

方舟开发框架示意图：

常用的UI组件

1、Image组件

        声明Image组件并设置图片源

                Image(src:string|PixelMap|Resource        

        ① string格式，通常用来加载网络图片，需要申请网络访问权限：ohos.permission.INTERNET

                Image('https://xxxxx.png')

        ② PixelMap格式，以加载像素图，常用在图片编辑中

                Image(pixelMapObject)

        ③ Resource格式，加载本地图片

                Image($r('app.media.icon'))

                Image($rowfile('icon.png'))

              使用$rowfile  得到的icon图片放在了rawfile里面         

              使用$r 得到的图片在media文件夹下

    

图片属性： width() 高度  ，height()宽度 , borderRadius() 边框圆角 , interpolation()图片插值(弥补像素锯齿)

 Image($rawfile('car.png')).backgroundColor('#fff000').width(200) //宽度.borderRadius(50) //圆角 
Image('http://t14.baidu.com/it/u=3542627100,2757422516&fm=224&app=112&f=JPEG?w=363&h=500').height(300)

效果图  

这是在预览器上显示的，网络图片如果要显示在模拟器或者真机上，需要申请网络权限

官网地址 文档中心

在工程目录中找到如果所示的module.json5文件添加网络权限

这样我们就可以在模拟器和真机上显示网络图片了。

2、文本组件 Text/Span

Text是文本组件，通常用于展示用户的视图，如显示文章的文字。

声明Text组件并设置文本内容

                                Text(content?:string|Resource)

①string格式，直接填写文本内容    Text("文本content")

②Resource格式，读取本地资源文件

                Text($r('app.string.tab_Home'))  //读取tab的首页文本，对应中英文,实现国际化

文本属性  

  lineHeight()行高   fontSize()字体大小    fontColor()字体颜色  fontWeight()字体粗细 padding()内间距,margin()外边距

Text($r('app.string.module_desc')).baselineOffset(0).fontSize(30).border({ width: 1 }).padding(10).width(300).margin(20)
添加子组件

Span只能作为Text组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。

Span组件需要写到Text组件内，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。

创建Span

Text('我是Text') {Span('我是Span')}.padding(10).borderWidth(1).margin(30)

设置文本装饰线及颜色 ， 通过decoration设置文本装饰线及颜色。

Text() {Span('我是Span1，').fontSize(16).fontColor(Color.Grey).decoration({ type: TextDecorationType.LineThrough, color: Color.Red })Span('我是Span2').fontColor(Color.Blue).fontSize(16).fontStyle(FontStyle.Italic).decoration({ type: TextDecorationType.Underline, color: Color.Black })Span('，我是Span3').fontSize(16).fontColor(Color.Grey).decoration({ type: TextDecorationType.Overline, color: Color.Green })}.borderWidth(1).padding(10).margin(30)

通过TextCase设置文字一直保持大写或者小写状态

Text() {Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase)
}

这样文本的字体都是大写的

添加事件

由于Span组件无尺寸信息，事件仅支持点击事件onClick。

Text() {Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase).onClick(()=>{console.info('Span点击了！！！')})}.margin(40)

这样点击span会有点击事件的响应

自定义组件
①通过textAlign属性设置文本对齐样式
Text('左对齐').width(300).textAlign(TextAlign.Start).border({ width: 1 }).padding(10)
Text('中间对齐').width(300).textAlign(TextAlign.Center).border({ width: 1 }).padding(10)
Text('右对齐').width(300).textAlign(TextAlign.End).border({ width: 1 }).padding(10)
TextAlign是枚举，有Start、Center、End
②通过textOverflow属性控制文本超长处理

textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。

    Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.').width(250).textOverflow({ overflow: TextOverflow.None }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)Text('我是超长文本，超出的部分显示省略号。I am an extra long text, with ellipses displayed for any excess。').width(250).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)

TextOverflow是枚举，有Clip裁切  Ellipsis省略号 None不裁切

  如果去掉maxLines文本会自动折行

  ③通过lineHeight属性设置文本行高
Text('This is the text with the line height set. This is the text with the line height set.').width(300).fontSize(12).border({ width: 1 }).padding(10)
Text('This is the text with the line height set. This is the text with the line height set.').width(300).fontSize(12).border({ width: 1 }).padding(10).lineHeight(20)
    
④通过decoration属性设置文本装饰线样式及其颜色
Text('This is the text').decoration({type: TextDecorationType.LineThrough,color: Color.Red}).borderWidth(1).padding(10).margin(5)
Text('This is the text').decoration({type: TextDecorationType.Overline,color: Color.Red}).borderWidth(1).padding(10).margin(5)
Text('This is the text').decoration({type: TextDecorationType.Underline,color: Color.Red}).borderWidth(1).padding(10).margin(5)

⑤通过baselineOffset属性设置文本基线的偏移量
Text('This is the text content with baselineOffset 0.').baselineOffset(0).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)
Text('This is the text content with baselineOffset 30.').baselineOffset(30).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)Text('This is the text content with baselineOffset -20.').baselineOffset(-20).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

⑥通过letterSpacing属性设置文本字符间距
Text('This is the text content with letterSpacing 0.').letterSpacing(0).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)
Text('This is the text content with letterSpacing 3.').letterSpacing(3).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)
Text('This is the text content with letterSpacing -1.').letterSpacing(-1).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

⑦通过minFontSize与maxFontSize自适应字体大小
Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为1').width(250).maxLines(1).maxFontSize(30).minFontSize(5).border({ width: 1 }).padding(10).margin(5)
Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为2').width(250).maxLines(2).maxFontSize(30).minFontSize(5).border({ width: 1 }).padding(10).margin(5)
Text('我的最大字号为30，最小字号为15，宽度为250,高度为50').width(250).height(50).maxFontSize(30).minFontSize(15).border({ width: 1 }).padding(10).margin(5)
Text('我的最大字号为30，最小字号为15，宽度为250,高度为100').width(250).height(100).maxFontSize(30).minFontSize(15).border({ width: 1 }).padding(10).margin(5)
⑧通过textCase属性设置文本大小写
Text('This is the text content with textCase set to Normal.').textCase(TextCase.Normal).padding(10).border({ width: 1 }).padding(10).margin(5)// 文本全小写展示
Text('This is the text content with textCase set to LowerCase.').textCase(TextCase.LowerCase).border({ width: 1 }).padding(10).margin(5)// 文本全大写展示
Text('This is the text content with textCase set to UpperCase.').textCase(TextCase.UpperCase).border({ width: 1 }).padding(10).margin(5)
⑨通过copyOption属性设置文本是否可复制粘贴
Text("这是一段可复制文本").fontSize(30).copyOption(CopyOptions.InApp)

CopyOptions是枚举有none不允许拷贝，InApp只允许在app内 ,LocationDevice 本地设备
添加事件

Text组件可以添加通用事件，可以绑定onClick、onTouch等事件来响应操作。

 Text("这个文本可点击").fontSize(30).onClick(()=>{console.log("点击的这个文本")})

 

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

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

相关文章

Docker安装各种组件

Docker安装各种组件

列举镜像 docker images // 列举镜像 搜索镜像 docker search jdk 下载镜像： docker pull java 查看镜像： docker images 启动镜像： docker run -it --name jdk1.8 -d java:latest /bin/bash 查看容器： docker ps 查看…
阅读更多...
STM32之HAL开发——系统定时器（SysTick）

STM32之HAL开发——系统定时器（SysTick）

系统定时器（SysTick）介绍 SysTick—系统定时器是属于 CM3 内核中的一个外设，内嵌在 NVIC 中。系统定时器是一个 24bit的向下递减的计数器，计数器每计数一次的时间为 1/SYSCLK，一般我们设置系统时钟 SYSCLK等于 72M。当…
阅读更多...
ChatGPT智能聊天系统源码v2.7.6全开源Vue前后端+后端PHP

ChatGPT智能聊天系统源码v2.7.6全开源Vue前后端+后端PHP

测试环境：Linux系统CentOS7.6、宝塔、PHP7.4、MySQL5.6，根目录public，伪静态thinkPHP，开启ssl证书 具有文章改写、广告营销文案、编程助手、办公达人、知心好友、家庭助手、出行助手、社交平台内容、视频脚本创作、AI绘画、思维导图等功能 ai通道：文心一言、MiniMax、智…
阅读更多...
Qt中QIcon图标设置（标题、菜单栏、工具栏、状态栏图标）

Qt中QIcon图标设置（标题、菜单栏、工具栏、状态栏图标）

1 exe程序图标概述 在 Windows 操作系统中，程序图标一般会涉及三个地方； （1） 可执行程序（以及对应的快捷方式）的图标 （2） 程序界面标题栏图标 （3）程序在任务…
阅读更多...
知攻善防应急靶场-Linux(1)

知攻善防应急靶场-Linux(1)

前言： 堕落了三个月，现在因为被找实习而困扰，着实自己能力不足，从今天开始 每天沉淀一点点 ，准备秋招 加油 注意： 本文章参考qax的网络安全应急响应和知攻善防实验室靶场，记录自己的学习过程&am…
阅读更多...
再仔细品品Elasticsearch的向量检索

再仔细品品Elasticsearch的向量检索

我在es一开始有向量检索，就开始关注这方面内容了。特别是在8.X之后的版本，更是如此。我也已经把它应用在亿级的生产环境中，用于多模态检索和语义检索，以及RAG相关。 也做过很多的优化：ES 8.x 向量检索性能测试 & 把…
阅读更多...
【算法】环形纸牌均分问题

【算法】环形纸牌均分问题

104. 货仓选址 - AcWing题库 有n家商店，求把货仓建在哪能使得货仓到每个点的距离总和最小，输出最短的距离总和。 首先，我们看只有两个点的情况，在这种情况下我们选[1,2]的任何一个位置都是一样的，总和就是这段区间的长…
阅读更多...
【机器学习】包裹式特征选择之序列前向选择法

【机器学习】包裹式特征选择之序列前向选择法

🎈个人主页：豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏：机器学习 🤝希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、交流进…
阅读更多...
证书（公钥）：网络安全的关键

证书（公钥）：网络安全的关键

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
eBMC套件固件烧录及上电过程

eBMC套件固件烧录及上电过程

1 概述 本期讲解 eBMC 套件上电和固件烧录过程。关于 eBMC 套件的开关、接口和芯片位置，可查看前两期文章，里面有详细描述。 2 固件烧录 eBMC 套件烧录涉及以下固件、其芯片位置和烧录口位置： 其中，eBMC-D4 板上固件可…
阅读更多...
『Apisix进阶篇』动态负载均衡：APISIX的实战演练与策略应用

『Apisix进阶篇』动态负载均衡：APISIX的实战演练与策略应用

🚀『Apisix系列文章』探索新一代微服务体系下的API管理新范式与最佳实践 【点击此跳转】 📣读完这篇文章里你能收获到 🎯 掌握APISIX中多种负载均衡策略的原理及其适用场景。📈 学习如何通过APISIX的Admin API和Dashboard进行负…
阅读更多...
软考100-上午题-【信息安全】-网络攻击

软考100-上午题-【信息安全】-网络攻击

一、常见的网络攻击 拒绝服务攻击(Dos攻击)：目的是使计算机或网络无法提供正常的服务 拒绝服务攻击是不断向计算机发起请求来实现的，是一种网络攻击手段。 攻击者通过向目标服务器发送大量的无效请求，如TCP连接请求、HTTP请求等&#xff0…
阅读更多...
IS-IS路由

IS-IS路由

概览： Intermediate System-to-Intermediate System，中间系统到中间系统协议 IS-IS--IGP--链路状态协议--AD值：115 IS--中间系统（路由器） ES--终端系统（PC） 在早期IS-IS的开发并不是为了IP…
阅读更多...
Matlab|基于隐式Zbus高斯法的三相不平衡潮流计算【可设定变压器数量和位置】【Yy、Yd两种绕组方式】

Matlab|基于隐式Zbus高斯法的三相不平衡潮流计算【可设定变压器数量和位置】【Yy、Yd两种绕组方式】

目录 主要内容 部分代码 结果一览 主要内容 该模型基于隐式高斯法实现对配电网的三相不平衡潮流计算，通过选项可实现【不含变压器】和【含变压器】两种方式下的潮流计算，并且通过参数设置可实现多个变压器接入，该程序可计算【IE…
阅读更多...
AI视频风格转换动漫风：Stable Diffusion+TemporalKit

AI视频风格转换动漫风：Stable Diffusion+TemporalKit

话不多说，直接开干。 基本方法 首先通过 Temporal-Kit 这个插件提取视频中的关键帧图片，然后使用 Stable Diffusion WebUI 重绘关键帧图片，然后再使用 Temporal-Kit 处理转换后的关键帧图片，它会自动补充关键帧之间的图片&#…
阅读更多...
C++ STL - 优先级队列及其模拟实现

C++ STL - 优先级队列及其模拟实现

目录 0. 引言 1. priority_queue 介绍 1.1 构造函数 1.2 priority_queue 接口函数使用 1.3 仿函数 1.4 题目练习 2. priority_queue 模拟实现 2.1基本框架： 2.2 默认构造函数 2.3 基本函数 2.4 堆的向上以及向下调整 0. 引言 优先队列 (priority_queu…
阅读更多...
分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测

分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测

分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测 目录 分类预测 | Matlab实现CNN-LSTM-Mutilhead-Attention卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测分类效果基本介绍模型描述程序设计参…
阅读更多...
计算机网络（二）物理层

计算机网络（二）物理层

物理层 一、通信基础1.奈氏准则、香农定理2.编码与调制3.电路交换、报文交换、分组交换 二、 传输介质、设备1.导向性传输介质：1.1双绞线1.2 同轴电缆1.3光纤 2.非导向性传输介质： 一、通信基础 信道带宽：信道能通过的最高频率和最低频率之差…
阅读更多...
Python爬虫学习完整版

Python爬虫学习完整版

一、什么是爬虫 网络爬虫，是一种按照一定规则，自动抓取互联网信息的程序或者脚本。由于互联网数据的多样性和资源的有限性，根据用户需求定向抓取相关网页并分析也成为如今主流的爬取策略。 1 爬虫可以做什么 你可以爬取网络上的的图片&#…
阅读更多...
鸿蒙雄起！风口就在当下，你如何抉择？

鸿蒙雄起！风口就在当下，你如何抉择？

近年来，华为自主研发的鸿蒙操作系统（HarmonyOS）引起了广泛的关注和讨论。鸿蒙系统不仅标志着华为在软件领域的一次重大突破，也预示着全球智能设备市场格局的潜在变化。本文将深入探讨鸿蒙系统的兴起、其在市场上的表现以及对程序员…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023