HarmonyOS（鸿蒙）——Text（文本）组件介绍

最新推荐文章于 2025-02-25 09:54:16 发布
最新推荐文章于 2025-02-25 09:54:16 发布
阅读量938 收藏 23
点赞数 16
CC 4.0 BY-SA版权
分类专栏： 程序员 文章标签： harmonyos java 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/FZBH_Q/article/details/137560233
本文详细介绍了HarmonyOS中Text组件的各种属性，包括text_size、text_color、text_font、italic、text_weight等，涵盖了字体大小、颜色、字体样式、字重等方面，通过代码示例展示了如何设置和使用这些属性，帮助开发者更好地理解和应用Text组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

| text_size | 文本大小 | float类型 | 表示字体大小的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。 | ohos:text_size=“30"ohos:text_size=“16fp"ohos:text_size=”$float:size_value” |

代码演示：

<Text

ohos:id=“$+id:text”

ohos:height=“match_content”

ohos:width=“match_content”

ohos:text=“150px”

ohos:text_size=“150px”/>

显示效果：

在这里插入图片描述

在这里插入图片描述

2.3 text_color

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |

| — | — | — | — | — |

| text_color | 文本颜色 | color类型 | 可以直接设置色值，也可以引用color资源。 | ohos:text_color=“#A8FFFFFF"ohos:text_color=”$color:black" |

代码演示：

<Text

ohos:id=“$+id:text”

ohos:height=“match_content”

ohos:width=“match_content”

ohos:text=“blue”

ohos:text_size=“100px”

ohos:text_color=“blue”

/>

演示效果：

在这里插入图片描述

使用HEX效果：

在这里插入图片描述

2.4 text_font

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |

| — | — | — | — | — |

| text_font | 字体 | sans-serif | 可以设置的字体如表中所列。 | ohos:text_font=“HwChinese-medium” |

| | | sans-serif-medium | | |

| | | HwChinese-medium | | |

| | | sans-serif-condensed | | |

| | | sans-serif-condensed-medium | | |

| | | monospace | | |

代码演示：

<Text

ohos:id=“$+id:text”

ohos:height=“match_content”

ohos:width=“match_content”

ohos:text=“李子捌”

ohos:text_size=“100px”

ohos:text_color=“#000000”

ohos:text_font=“HwChinese-medium”

/>

演示效果：

在这里插入图片描述

2.5 italic

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |

| — | — | — | — | — |

| italic | 文本是否斜体字体 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源。 | ohos:italic=“true"ohos:italic=”$boolean:true" |

代码演示：

<Text

ohos:id=“$+id:text”

ohos:height=“match_content”

ohos:width=“match_content”

ohos:text=“李子捌”

ohos:text_size=“100px”

ohos:text_color=“#000000”

ohos:text_font=“sans-serif”

ohos:italic=“true”

/>

演示效果：

在这里插入图片描述

2.6 text_weight

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |

| — | — | — | — | — |

| text_weight | 字重 | integer类型 | 表示字体大小的integer类型。也可以引用integer资源。 | ohos:text_weight=“100"ohos:text_weight=”$integer:100" |

代码演示：

<Text

ohos:id=“$+id:text”

ohos:height=“match_content”

ohos:width=“match_content”

ohos:text=“Liziba”

ohos:text_size=“100px”

ohos:text_color=“#0000FF”

ohos:text_font=“serif”

ohos:italic=“true”

ohos:text_weight=“100”

/>

演示效果：

text_weight = 100

在这里插入图片描述

text_weight = 600

在这里插入图片描述

2.7 background_element

常用的背景如常见的文本背景、按钮背景，可以采用XML格式放置在graphic目录下。

在Project窗口，打开“entry > src > main > resources > base”，右键点击“graphic”文件夹，选择“New > File”，命名为“background_text.xml”，在background_text.xml中定义文本的背景。

​

代码演示：

<?xml version="1.0" encoding="UTF-8" ?>

<shape xmlns:ohos=“http://schemas.huawei.com/res/ohos”

ohos:shape=“rectangle”>

演示效果：

在这里插入图片描述

2.8 text_alignment

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |

| — | — | — | — | — |

| text_alignment | 文本对齐方式 | left | 表示文本靠左对齐。 | 可以设置取值项如表中所列，也可以使用“ |

| | | top | 表示文本靠顶部对齐。 | |

| | | right | 表示文本靠右对齐。 | |

| | | bottom | 表示文本靠底部对齐。 | |

| | | horizontal_center | 表示文本水平居中对齐。 | |

| | | vertical_center | 表示文本垂直居中对齐。 | |

| | | center | 表示文本居中对齐。 | |

| | | start | 表示文本靠起始端对齐。 | |

| | | end | 表示文本靠结尾端对齐。 | |

代码演示：

<Text

ohos:id=“$+id:text”

ohos:width=“300vp”

ohos:height=“100vp”

ohos:text=“Liziba”

ohos:text_size=“100px”

ohos:text_color=“#0000FF”

ohos:text_font=“serif”

ohos:italic=“true”

ohos:text_weight=“100”

ohos:left_margin=“15vp”

ohos:bottom_margin=“15vp”

ohos:right_padding=“15vp”

ohos:left_padding=“15vp”

ohos:text_alignment=“bottom|horizontal_center”

ohos:background_element=“$graphic:background_text”

/>

演示效果：

在这里插入图片描述

2.9 multiple_lines

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |

| — | — | — | — | — |

| multiple_lines | 多行模式设置 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源。 | ohos:multiple_lines=“true"ohos:multiple_lines=”$boolean:true" |

代码演示：

<Text

ohos:id=“$+id:text”

ohos:width=“300px”

ohos:height=“match_content”

ohos:text=“LizibaLiziba”

ohos:text_size=“100px”

ohos:text_color=“#0000FF”

ohos:text_font=“serif”

ohos:italic=“true”

ohos:text_weight=“100”

ohos:max_text_lines=“2”

ohos:multiple_lines=“true”

ohos:background_element=“$graphic:background_text”

/>

演示效果：

在这里插入图片描述

2.10 max_text_lines

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |

| — | — | — | — | — |

| max_text_lines | 文本最大行数 | integer类型 | 可以直接设置整型数值，也可以引用integer资源。 | ohos:max_text_lines=“2"ohos:max_text_lines=”$integer:two" |

代码演示：

<Text

ohos:id=“$+id:text”

ohos:width=“300px”

ohos:height=“match_content”

ohos:text=“LizibaLizibaLiziba”

ohos:text_size=“100px”

ohos:text_color=“#0000FF”

ohos:text_font=“serif”

ohos:italic=“true”

ohos:text_weight=“100”

ohos:multiple_lines=“true”

ohos:max_text_lines=“2”

ohos:background_element=“$graphic:background_text”

/>

演示效果：

在这里插入图片描述

2.11 auto_font_size

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |

| — | — | — | — | — |

| auto_font_size | 是否支持文本自动调整文本字体大小 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源。 | ohos:auto_font_size=“true"ohos:auto_font_size=”$boolean:true" |

代码演示：

方法一：

<Text

ohos:id=“$+id:text”

ohos:width=“300px”

ohos:height=“match_content”

ohos:text=“LizibaLizibaLiziba”

ohos:text_size=“100px”

ohos:text_color=“#0000FF”

ohos:text_font=“serif”

ohos:italic=“true”

ohos:text_weight=“100”

ohos:max_text_lines=“1”

ohos:auto_font_size=“true”

ohos:background_element=“$graphic:background_text”

/>

演示效果：

在这里插入图片描述

方法二：

HarmonyOS鸿蒙开发指南:基础组件 text开发指导
sybh的博客
01-09 908
Text是文本组件，用于呈现一段文本信息。具体用法请参考Text API。
鸿蒙NEXT版实战开发：UI框架-如何加载和使用自定义字体？
qq_39652397的博客
11-03 417
如何加载和使用自定义字体........
【鸿蒙软件开发】文本显示（Text/Span）
m0_62599305的博客
10-23 4302
Text是文本组件，通常用于展示用户的视图，如显示文章的文字。具体用法可参考Text。通过textAlign属性设置文本对齐样式。Text('左对齐')Text('中间对齐')Text('右对齐')textAlign属性设置即可文本显示Text/Span。
HarmonyOS鸿蒙学习基础篇 - Text文本组件
2303_76218115的博客
01-24 5319
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。是可以显示一段文本的组件。该组件从API Version 7开始支持，从API version 9开始，该接口支持在ArkTS卡片中使用。
Harmony OS — Text文本框
qq_27494201的博客
06-25 996
文章目录1、Text（文本框）2、点击时：自动调节字体大小+动态增加文字3、跑马灯效果4、实战：一个标题栏和详细内容的界面5、Text 更多 1、Text（文本框） 2、点击时：自动调节字体大小+动态增加文字 MainAbilitySlice.java Text text = (Text) findComponentById(ResourceTable.Id_text); // 设置自动调整规则 text.setAutoFontSizeRule(30, 100, 1); // 设置点击一次增多一个"T"
第九节HarmonyOS 常用基础组件1-Text
yyxhzdm的博客
12-01 1783
组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声名式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件时视图层的基本组成单位，包括Text、Image、TextInput、Buttton、LoadingProgress等。TextText组件用于在界面上展示一段文本信息，可以包含子组件Span。文本样式针对包含文本元素。
鸿蒙(HarmonyOS)应用开发实战——Text实现部分文本高亮和超链接样式
CTrup的博客
10-15 1049
本示例通过自定义Span类型，在Text组件中使用ForEach遍历，根据不同的Span类型生成不同样式和功能的Span组件，实现部分文本高亮和超链接。
HarmonyOS Next开发学习手册——添加组件（文本显示 (Text/Span)）
maniuT的博客
07-11 1583
通过textAlign属性设置文本对齐样式。Text('左对齐')Text('中间对齐')Text('右对齐')通过textOverflow属性控制文本超长处理，textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。Text('我是超长文本，超出的部分显示省略号。')Text('当文本溢出其尺寸时，文本将滚动显示。通过lineHeight属性设置文本行高。通过decoration属性设置文本装饰线样式及其颜色。})})})
HarmonyOS Next开发学习手册——基础组件(text开发）
maniuT的博客
07-16 1303
text是文本组件，用于呈现一段文本信息。
HarmonyOS Next开发学习手册——添加组件（文本输入 (TextInput/TextArea)）
maniuT的博客
07-11 1269
设置无输入时的提示文本。TextInput({placeholder:'我是提示文本'})设置输入框当前的文本内容。TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})添加backgroundColor改变输入框的背景颜色。TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})更丰富的样式可以结合 通用属性 实现。
HarmonyOS（三）之 Text组件
junjie_zhang的专栏
03-21 5139
HarmonyOS的基础组件使用，本章介绍的是Text组件的数据源、设置文本大小、粗细、颜色、对齐方式等。
03. 快速上手！HarmonyOS4.0 Text/Span组件详解
全栈若城,专注知识分享
03-18 1192
显示一段文本的组件。
HarmonyOS代码混淆
m0_74231873的博客
10-28 1518
在鸿蒙（HarmonyOS）开发中，代码混淆的主要目的是保护代码不被反编译，提升应用的安全性。从DevEco Studio版本：4.0 Beta1开始hvigor插件提供代码混淆功能。因此我将deveco studio从3.1release升级到了5.0release。
HarmonyOS学习第7天: 文本组件点亮界面的文字魔法棒
最新发布
qq_22232065的博客
02-25 1122
此外，对于一些重要的提示信息，如风险提示、账户安全提醒等，采用了带背景颜色的文本框展示，背景颜色通常为浅黄色或淡红色，与普通文本形成明显区别，引起用户的重视。在 HarmonyOS 那丰富多彩的系统界面中，从简洁直观的应用图标，到交互流畅的操作菜单，再到生动形象的图文展示，每一处细节都经过精心雕琢，为用户带来了独特而美妙的视觉与交互体验。在互动环节，如提问、讨论区，用户输入的文本和回复的内容，通过不同的背景颜色和文本对齐方式进行区分，用户自己输入的文本背景色为淡灰色，左对齐显示；同时，在输入框中，还利用。
鸿蒙的文本颜色以及溢出省略号、行高
2301_81915581的博客
03-13 2038
语法：.fontColor(颜色值)提示：① 色值也能在其他写颜色的属性方法中使用，如：背景色② 通常来说以Color.颜色名是我们做测试用的颜色，一般我们要用十六进制来用颜色我们来做一个综合练习思路：排版 → 内容 → 美化文本溢出省略号、行高。
【愚公系列】2023年12月 HarmonyOS教学课程 018-ArkUI组件（Text/Span）
热门推荐
时光隧道
12-07 6万+
在HarmonyOS中，Text/Span组件是文本控件中的一个关键部分。Text控件可以用来显示文本内容，而Span只能作为Text组件的子组件显示文本内容。
harmonyos 父子传参
12-30
### HarmonyOS 父子组件间传递参数 在 HarmonyOS 中，父子组件间的参数传递主要通过 `@Prop` 装饰器以及特定的状态管理机制来完成。对于单向数据流而言，父组件可以通过属性的形式将数据传递给子组件，在此过程中，子组件利用 `@Prop` 来接收来自父级的数据。 #### 单项数据流动 为了使父组件能向子组件传递消息并让其响应变化，可以在父组件定义一个可变变量 message 并将其作为 prop 属性传入子组件中[^2]： ```xml <!-- ParentComponent.ets --> <template> <div> <!-- 子组件实例化时传递message值 --> <ChildComponent message="{{parentMessage}}"/> <button onClick="updateMessage">Update Message</button> </div> </template> <script> export default { data: () => ({ parentMessage: 'Hello from Parent' }), methods:{ updateMessage(){ this.parentMessage = "Updated message" } } } </script> ``` 而对应的子组件则需声明接受该属性，并可通过监听属性的变化来进行相应的界面刷新或其他操作: ```typescript // ChildComponent.ts import { Prop } from '@ohos/ace'; @Component({ props: ['message'] }) export default class ChildComponent extends Vue { @Prop() readonly message!: string; render() { return ( <div>{this.message}</div> // 显示接收到的消息 ); } } ``` 上述代码展示了如何设置一个简单的单项通信链路，其中父组件负责维护状态并通过属性分发至子组件；每当父组件内部 state 发生变动，则会触发重新渲染并将最新版的 message 值下发给孩子节点。 #### 双向绑定 如果希望构建更加紧密耦合的关系——即允许子组件修改由父组件提供的初始值，并且这种更改能够反馈回源头形成闭环控制结构的话，那么可以采用双向绑定模式。这通常涉及到使用额外的状态管理和事件通知机制，比如借助于 `@Observed`, `@State` 或者 `@Link` 这样的装饰器来增强交互能力[^1]: ```typescript // ParentComponent.ts import { State, Observed } from '@ohos/ability_feature'; export default class ParentComponent extends ComponentBase { @Observed() public parentMessage: string = 'Initial Value'; private handleChildChange(newValue:string){ this.parentMessage=newValue; } build() { return ( <div> {/* 将handleChildChange方法也作为一个prop传递 */} <ChildComponent value={this.parentMessage} onChange={(newValue)=>{this.handleChildChange(newValue)}} /> <Text>{this.parentMessage}</Text> </div> ) } } // ChildComponent.ts import { Prop } from '@ohos/ace'; import { Link } from '@ohos/ability_feature'; @Component({ props: ['value', 'onChange'] // 接收两个props：一个是当前显示的内容，另一个是用来更新内容的方法 }) export default class ChildComponent extends Vue { @Prop({ type: String }) readonly value!: string; @Prop({type: Function}) readonly onChange!:(newVal:String) => void; private handleChange(event:Event){ const target=event.target as HTMLInputElement; this.onChange(target.value); } render() { return ( <> <input onInput={(event:Event)=>this.handleChange(event)} defaultValue={this.value}></input> </> ); } } ``` 在这个例子中，不仅实现了从父到子的信息流通渠道，还建立了反方向上的回调路径，从而构成了完整的双向互动链条。当用户编辑 `<input>` 字段内的文本时，新的字符串会被实时同步回到父组件所持有的原始副本之中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值