HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】

简介: HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】

摘要

作者:红目香薰

团队:坚果派

团队介绍:坚果派由坚果创建,团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

Span

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

接口

Span(value: string | Resource)

参数:

参数名

参数类型

必填

参数描述

value

string | Resource


属性

通用属性方法仅支持通用文本样式,不支持触摸热区设置。

名称

参数类型

描述

decoration

{

type: TextDecorationType,

color?: ResourceColor

}

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

默认值:{

type: TextDecorationType.None

color:Color.Black

}

letterSpacing

number | string

设置文本字符间距。

textCase

TextCasse

设置文本大小写。

默认值:Normal

事件

通用事件仅支持点击事件。

代码示例

build() {

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

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

     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 })

 }

实际效果:

相关文章
|
5月前
|
数据安全/隐私保护
HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
37 0
|
5月前
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
22 0
|
5月前
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
26 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
32 0
|
5月前
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
29 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
35 0
|
1天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
18 8
|
1天前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
18 7
|
1天前
|
监控 开发者
鸿蒙next版开发:使用HiDebug获取调试信息(ArkTS)
在HarmonyOS 5.0中,HiDebug是一个强大的应用调试工具,可帮助开发者获取系统的CPU使用率、内存信息等关键性能数据。本文详细介绍了如何在ArkTS中使用HiDebug,并提供了示例代码,帮助开发者进行性能分析和问题诊断。
16 7
|
1天前
|
前端开发 API
鸿蒙next版开发:相机开发-预览(ArkTS)
在HarmonyOS 5.0中,使用ArkTS进行相机预览是核心功能之一。本文详细介绍了如何使用ArkTS实现相机预览,包括导入相机接口、创建Surface、获取相机输出能力、创建会话并开始预览,以及监听预览输出状态等步骤,并提供了代码示例。通过本文,读者可以掌握在HarmonyOS 5.0中使用ArkTS进行相机预览的基本方法。
16 6

热门文章

最新文章