HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Span

作为Text组件的子组件,用于显示行内文本的组件。子组件

一、接口

Span(value: string | Resource)

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

参数类型

必填

参数描述

value

string | Resource

文本内容。

二、属性

通用属性方法仅支持通用文本样式

名称

参数类型

描述

decoration

{

type: TextDecorationType,

color?: ResourceColor

}

设置文本装饰线样式及其颜色。

默认值:{

type: TextDecorationType.None

color:Color.Black

}

从API version 9开始,该接口支持在ArkTS卡片中使用。

letterSpacing

number | string

设置文本字符间距。取值小于0,字符聚集重叠,取值大于0且随着数值变大,字符间距越来越大,稀疏分布。

从API version 9开始,该接口支持在ArkTS卡片中使用。

textCase

TextCase

设置文本大小写。

默认值:TextCase.Normal

从API version 9开始,该接口支持在ArkTS卡片中使用。

三、事件

通用事件仅支持点击事件

说明

由于Span组件无尺寸信息,因此点击事件返回的ClickEvent对象的target属性无效。

四、示例

// xxx.ets

@Entry

@Component

struct SpanExample {

  build() {

    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {

      Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC)

      Text() {

        Span('In Line')

        Span(' Component')

        Span(' !')

      }

      Text() {

        Span('This is the Span component').fontSize(12).textCase(TextCase.Normal)

          .decoration({ type: TextDecorationType.None, color: Color.Red })

      }

      // 文本横线添加

      Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)

      Text() {

        Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12)

      }

      Text() {

        Span('I am LineThrough-span')

          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })

          .fontSize(12)

      }

      Text() {

        Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12)

      }

      // 文本字符间距

      Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC)

      Text() {

        Span('span letter spacing')

          .letterSpacing(0)

          .fontSize(12)

      }

      Text() {

        Span('span letter spacing')

          .letterSpacing(-2)

          .fontSize(12)

      }

      Text() {

        Span('span letter spacing')

          .letterSpacing(3)

          .fontSize(12)

      }

      // 文本大小写展示设置

      Text('Text Case').fontSize(9).fontColor(0xCCCCCC)

      Text() {

        Span('I am Lower-span').fontSize(12)

          .textCase(TextCase.LowerCase)

          .decoration({ type: TextDecorationType.None })

      }

      Text() {

        Span('I am Upper-span').fontSize(12)

          .textCase(TextCase.UpperCase)

          .decoration({ type: TextDecorationType.None })

      }

    }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })

  }

}

五、场景

适合做文本特效的各种卡片

本文根据HarmonyOS官方文档整理

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

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

相关文章

c++视觉---中值滤波处理

中值滤波(Median Filter)是一种常用的非线性平滑滤波方法,用于去除图像中的噪声。它不像线性滤波(如均值滤波或高斯滤波)那样使用权重来计算平均值或加权平均值,而是选择滤波窗口内的像素值中的中间值作为输…

docker搭建jenkins

1.拉取镜像 docker pull jenkinsci/blueocean 2.启动容器 docker run -d -u root -p 8666:8080 -p 50000:50000 -v /var/jenkins_home:/var/jenkins_home -v /etc/localtime:/etc/localtime --name MyJenkins jenkinsci/blueocean 3.访问ip:port,就能访问了 4.docker logs 容器…

主从复制的实现方案

读写分离技术架构图 实现读写分离的技术架构选型如上;需要自己去实践主从复制;为了节省资源,当然系统并发量并没有那么大,选择一主一丛;强制读主库,为了解决主从同步延迟带来的影响;对于实时性要求高的强制读主库;GTID 主要是一种事务标识技术…

docker搭建nginx

1.docker pull nginx 2.docker run --name nginx-test -p 8082:80 -d nginx 3.访问ip:8082

Linux 系统性能瓶颈分析(超详细)

Author:rab 目录 前言一、性能指标1.1 进程1.1.1 进程定义1.1.2 进程状态1.1.3 进程优先级1.1.4 进程与程序间的关系1.1.5 进程与进程间的关系1.1.6 进程与线程的关系 1.2 内存1.2.1 物理内存与虚拟内存1.2.2 页高速缓存与页写回机制1.2.3 Swap Space 1.3 文件系统1…

在PicGo上使用github图床解决typora上传csdn图片不显示问题(保姆级教程)

文章目录 在PicGo上使用github图床解决typora上传csdn图片不显示问题(保姆级教程)1、typora上传csdn图片不显示(外链图片转存失败)2、PicGo2.1、PicGo下载2.2、PicGo使用2.2.1、对PicGo完成基本的配置2.2.2、配置github图床2.2.3、…

R实现地图相关图形绘制

大家好,我是带我去滑雪! 地图相关图形绘制具有许多优点,这些优点使其在各种领域和应用中非常有用。例如:地图相关图形提供了一种直观的方式来可视化数据,使数据更容易理解和分析。通过地图,可以看到数据的空…

UE4 Unlua 初使用小记

function M:Construct()print(Hello World)print(self.Va)local mySubsystem UE4.UHMSGameInstanceSubsystemUE4.UKismetSystemLibrary.PrintString(self,"Get Click Msg From UnLua ")end unlua中tick不能调用的问题: 把该类的Event Tick为灰色显示的删…

【数据库审计】2023年数据库审计厂家汇总

我们大家都知道数据库审计的重要意义,不仅可以满足等保合规,还能进行风险告警,保障数据安全。那你知道目前市面上数据库审计厂家有哪些吗?这里小编就给大家汇总一下。 2023年数据库审计厂家汇总 1、行云管家 2、安恒信息 3、…

MongoDB-介绍与安装部署

介绍与安装部署 1.MongoDB简介a) 体系结构b) 数据模型c) MongoDB的特点c.1) 高性能c.2) 高性可用性c.3) 高拓展性c.4) 丰富的查询支持 2.单机部署a) Windows系统中的安装启动b) Shell连接(mongo命令)c) Linux系统中的安装启动和连接 1.MongoDB简介 MongoDB是一个开源、高性能、…

多头注意力机制

1、什么是多头注意力机制 从多头注意力的结构图中,貌似这个所谓的多个头就是指多组线性变换,但是并不是,只使用了一组线性变换层,即三个变换张量对 Q、K、V 分别进行线性变换,这些变化不会改变原有张量的尺寸&#xf…

MyBatisPlus(十六)逻辑删除

说明 实际生产中的数据,一般不采用物理删除,而采用逻辑删除,也就是将一条记录的状态改为已删除。 逻辑删除,本质上是更新操作。 MyBatis Plus 框架,提供了逻辑删除功能。在配置了逻辑删除后,增删改查和统…

在Remix中编写你的第一份智能合约

智能合约简单来讲就是:部署在去中心化区块链上的一个合约或者一组指令,当这个合约或者这组指令被部署以后,它就不能被改变了,并会自动执行,每个人都可以看到合约里面的条款。更深层次的理解就是:这些代码会…

亚马逊电子产品日本站PSE认证,TELEC认证如何办理?

日本市场准入认证——PSE认证,TELEC认证 日本作为第三大经济体国家,是中国商品对外出口的最多的国家之一,无论是在日本亚马逊销售还是在日本当地销售,都需要符合日本市场准入许可。需要注意的是日本的电气安全标准都是自主特色的…

R语言 一种功能强大的数据分析、统计建模 可视化 免费、开源且跨平台 的编程语言

R语言是一种广泛应用于数据分析、统计建模和可视化的编程语言。它由新西兰奥克兰大学的罗斯伊哈卡和罗伯特杰特曼开发,并于1993年首次发布。R语言是一个免费、开源且跨平台的语言,它在统计学和数据科学领域得到了广泛的应用。 R语言具有丰富的数据处理、…

基于docker+Keepalived+Haproxy高可用前后的分离技术

基于dockerKeepalivedHaproxy高可用前后端分离技术 架构图 服务名docker-ip地址docker-keepalived-vip-iphaproxy-01docker-ip自动分配 未指定ip192.168.31.252haproxy-02docker-ip自动分配 未指定ip192.168.31.253 安装haproxy 宿主机ip 192.168.31.254 宿主机keepalived虚…

《DevOps 精要:业务视角》- 读书笔记(三)

DevOps 精要:业务视角(三) 第3章 原则3.1 价值流3.2 部署流水线3.3 一切都应存储在版本控制系统中3.4 自动化配置管理3.5 完成的定义3.6 小结 第3章 原则 将原则从实践中分离出来,这是一种很有用的做法。当然了,这两个词分别有着…

前后端分离计算机毕设项目之基于SpringBoot的无人智慧超市管理系统的设计与实现《内含源码+文档+部署教程》

博主介绍:✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业✌ 🍅由于篇幅限制,想要获取完整文章或者源码,或者代做&am…

Flutter环境搭建及新建项目

一、下载安装压缩包 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.10.6-stable.zip 二、解压缩 解压之后,将里面的flutter整体拿出来 三、配置环境变量 将flutter/bin全路径配置到系统环境变量里面 四、运行…

LLMs 蒸馏, 量化精度, 剪枝 模型优化以用于部署 Model optimizations for deployment

现在,您已经了解了如何调整和对齐大型语言模型以适应您的任务,让我们讨论一下将模型集成到应用程序中需要考虑的事项。 在这个阶段有许多重要的问题需要问。第一组问题与您的LLM在部署中的功能有关。您需要模型生成完成的速度有多快?您有多…