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——【坚果派-红目香薰】
41 0
|
5月前
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
24 0
|
5月前
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
28 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
33 0
|
5月前
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
30 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
36 0
|
7天前
|
Android开发
鸿蒙开发:自定义一个简单的标题栏
本身就是一个很简单的标题栏组件,没有什么过多的技术含量,有一点需要注意,当使用沉浸式的时候,注意标题栏的位置,需要避让状态栏。
鸿蒙开发:自定义一个简单的标题栏
|
7天前
|
API
鸿蒙开发:切换至基于rcp的网络请求
本文的内容主要是把之前基于http封装的库,修改为当前的Remote Communication Kit(远场通信服务),无非就是通信的方式变了,其他都大差不差。
鸿蒙开发:切换至基于rcp的网络请求
|
12天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
43 8
|
12天前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
33 7
下一篇
无影云桌面