HarmonyOS学习第7天: 文本组件点亮界面的文字魔法棒

一、引言

在 HarmonyOS 那丰富多彩的系统界面中，从简洁直观的应用图标，到交互流畅的操作菜单，再到生动形象的图文展示，每一处细节都经过精心雕琢，为用户带来了独特而美妙的视觉与交互体验。而在这琳琅满目的界面元素中，文本组件（Text）无疑扮演着不可或缺的关键角色。它是信息传递的直接载体，无论是应用的标题、操作的提示，还是内容的描述，都离不开文本组件的呈现。

你是否曾好奇，那些在 HarmonyOS 界面上风格各异、排版精美的文字是如何实现的？又是否想知道如何让文本随着用户的操作而动态变化，实现更加丰富的交互效果？接下来，就让我们一同深入探索 HarmonyOS 文本组件的奥秘，解锁文字在界面上生动呈现的密码。

二、Text 组件初相识

在 HarmonyOS 的 UI 开发体系中，Text 组件就像是搭建界面大厦的基石，是用于展示文本的基础组件。它的存在使得应用能够将各种信息，以文字的形式清晰、准确地呈现给用户。无论是简单的提示语、复杂的文章内容，还是应用的标题、按钮上的文字，都离不开 Text 组件的支持。

在一个音乐播放应用中，歌曲的名称、歌手信息、歌词展示等，都可以通过 Text 组件来实现。又比如在一款购物应用里，商品的名称、价格、促销信息等文本内容，同样依赖 Text 组件来展示。可以说，Text 组件贯穿于 HarmonyOS 应用界面的方方面面，是构建用户与应用之间信息交互桥梁的重要元素。

三、属性大揭秘

（一）字体相关属性

字体选择 ：在 HarmonyOS 中设置字体，主要通过text_font属性来实现。默认情况下，系统会使用默认字体来展示文本。但如果我们想要使用特定的字体，比如HwChinese-medium 、sans-serif-medium等系统自带字体，只需在布局文件中进行如下设置：

|-----------------------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="这是一段使用特定字体的文本" ohos:text_font="HwChinese-medium" ... /> |

要是系统自带字体无法满足需求，还能添加自定义字体。步骤如下：首先准备好自定义的字体文件，通常为.ttf（TrueType Font）或.otf（OpenType Font）格式。接着将字体文件放置在resources/rawfile目录下，如果没有该目录则需手动创建。然后在代码中通过编程方式设置字体，例如在 Java 代码中：

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Text textComponent = (Text) findComponentById(ResourceTable.Id_text_view); Typeface customFont = Typeface.createFromAsset(getContext().getAssets(), "rawfile/your_font.ttf"); textComponent.setTypeface(customFont); |

字体大小 ：通过text_size属性可以轻松设置字体大小，该属性支持多种取值方式。如果传递的是数字类型，默认单位为 px（像素）。比如设置字体大小为 16px，可以这样写：

|-----------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="字体大小为16px" ohos:text_size="16" ... /> |

也能显式指定单位，如 vp（视口单位）、fp（字体像素）等。使用 vp 单位时，它会根据设备的屏幕密度自动调整大小，保证在不同设备上元素的显示效果一致。例如设置字体大小为 20vp：

|-------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="字体大小为20vp" ohos:text_size="20vp" ... /> |

而 fp 是鸿蒙系统专门用于定义字体大小的单位，能在不同的屏幕密度和分辨率下自动调整字体大小，确保字体在所有设备上都清晰可读。如设置字体大小为 18fp：

|-------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="字体大小为18fp" ohos:text_size="18fp" ... /> |

字体风格 ：设置字体风格主要通过font_style属性，取值有normal（正常）和italic（斜体）。默认值为normal，显示正常字体风格。若要设置为斜体，代码如下：

|----------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="这是斜体风格的文本" ohos:font_style="italic" ... /> |

字体粗细 ：通过font_weight属性来设置字体粗细，取值范围较为丰富，包括normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细），以及数字 100 - 900，数字越大字体越粗。例如设置为粗体：

|------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="这是粗体文本" ohos:font_weight="bold" ... /> |

要是想设置为更细的字体风格，则可以这样设置：

|----------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="这是更细的文本" ohos:font_weight="lighter" ... /> |

（二）颜色属性

文本颜色 ：设置文本颜色使用text_color属性，它支持多种颜色表示方式。最常见的是使用十六进制颜色值，比如设置文本颜色为红色：

|------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="红色文本" ohos:text_color="#FF0000" ... /> |

也能引用color资源文件中的颜色，首先在resources/base/color目录下的color.json文件中定义颜色：

|-------------------------------------------------------------|
| { "color": [ { "name": "my_red", "value": "#FF0000" } ] } |

然后在布局文件中引用：

|--------------------------------------------------------------------------------------------------|
| <Text ohos:id=" $+id:text_view" ohos:text="从资源文件引用的红色文本" ohos:text_color="$ color:my_red" ... /> |

此外，还支持使用 RGB 值、RGBA 值（包含透明度）等方式来表示颜色。例如使用 RGB 值设置文本颜色为绿色：

|-------------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="绿色文本" ohos:text_color="rgb(0, 255, 0)" ... /> |

背景颜色 ：设置文本组件的背景颜色，需要借助background_element属性，并结合ShapeElement来实现。首先在resources/base/graphic目录下创建一个xml文件，例如bg_rectangle.xml，定义背景形状和颜色：

|------------------------------------------------------------------------------------------------------------------------------|
| <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#EFEFEF" /> </shape> |

然后在布局文件中应用这个背景：

|---------------------------------------------------------------------------------------------------------------|
| <Text ohos:id=" $+id:text_view" ohos:text="带有灰色背景的文本" ohos:background_element="$ graphic:bg_rectangle" ... /> |

（三）对齐方式属性

通过text_alignment属性可以设置文本的对齐方式，包括水平和垂直方向。在水平方向上，取值有left（左对齐）、right（右对齐）、horizontal_center（水平居中对齐）、start（起始端对齐，与left类似，在从左到右排版时表现相同）、end（结尾端对齐，与right类似，在从左到右排版时表现相同）。例如设置文本右对齐：

|---------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="右对齐文本" ohos:text_alignment="right" ... /> |

在垂直方向上，取值有top（顶部对齐）、bottom（底部对齐）、vertical_center（垂直居中对齐）。例如设置文本垂直居中对齐：

|----------------------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="垂直居中对齐文本" ohos:text_alignment="vertical_center" ... /> |

还可以将水平和垂直方向的对齐方式组合使用，比如设置文本既水平居中又垂直居中：

|-----------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="居中对齐文本" ohos:text_alignment="center" ... /> |

或者设置文本顶部左对齐：

|--------------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="顶部左对齐文本" ohos:text_alignment="top left" ... /> |

（四）其他实用属性

文本截断 ：当文本内容过长，超出文本组件的显示范围时，可通过truncation_mode属性来处理。取值有none（无截断，默认值，文本超长时全部显示，可能导致文本溢出组件范围）、ellipsis_at_start（在文本框起始处使用省略号截断）、ellipsis_at_middle（在文本框中间位置使用省略号截断）、ellipsis_at_end（在文本框结尾处使用省略号截断）、auto_scrolling（文本超长时滚动显示全部文本）。在一个新闻应用中展示新闻标题时，如果标题过长，为了保证界面的整洁美观，通常会在结尾处使用省略号截断，设置如下：

|--------------------------------------------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="这是一个非常非常非常非常长的新闻标题，用于展示文本截断效果" ohos:truncation_mode="ellipsis_at_end" ... /> |

自动换行 ：设置自动换行通过multiple_lines属性，将其值设置为true即可开启自动换行。同时，还可以结合max_text_lines属性来限制文本显示的最大行数。在一个小说阅读应用中，展示小说内容时，希望文本自动换行，并且最多显示 3 行，设置如下：

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="这是一段小说内容，可能会很长，需要自动换行并且限制行数。这是一段小说内容，可能会很长，需要自动换行并且限制行数。这是一段小说内容，可能会很长，需要自动换行并且限制行数。" ohos:multiple_lines="true" ohos:max_text_lines="3" ... /> |

文本装饰 ：通过decoration属性可以给文本添加装饰线，如删除线、下划线等。该属性包含type（装饰线类型）和color（装饰线颜色，可选）两个参数。在一个电商应用中，展示商品原价时，为了突出折扣，给原价添加删除线，并设置删除线颜色为红色，设置如下：

|---------------------------------------------------------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="原价100元" ohos:decoration="{type: TextDecorationType.LineThrough, color: Color.Red}" ... /> |

要是只想添加下划线，不设置颜色（默认颜色），则可以这样设置：

|-----------------------------------------------------------------------------------------------------------------------|
| <Text ohos:id="$+id:text_view" ohos:text="这是带有下划线的文本" ohos:decoration="{type: TextDecorationType.Underline}" ... /> |

四、动态更新与交互效果实

（一）动态更新文本

数据绑定 ：在 HarmonyOS 中，数据绑定是实现文本动态更新的重要机制之一。它基于 MVVM（Model - View - ViewModel）架构模式，通过建立数据与视图之间的双向绑定关系，使得当数据发生变化时，与之绑定的视图也能自动更新。在一个天气应用中，需要实时显示当前的气温数据。首先定义一个数据模型类，例如WeatherModel：

然后在布局文件中创建一个 Text 组件，并使用数据绑定语法将其与数据模型中的temperature属性绑定：

|--------------------------------------------------------------------------------------|
| <Text ohos:id="$+id/temperature_text" ohos:text="{{viewModel.temperature}}" ... /> |

在代码中，通过DataBindingUtil将布局与数据模型进行绑定，并在需要更新数据时，直接修改数据模型中的属性值，视图会自动更新。例如：

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| public class MainAbilitySlice extends AbilitySlice { private WeatherModel viewModel; @Override public void onStart(Intent intent) { super.onStart(intent); // 初始化数据模型 viewModel = new WeatherModel("25℃"); // 获取布局的绑定对象 DataAbilityHelper helper = DataAbilityHelper.creator(this); AbilitySliceDataBinding binding = DataBindingUtil.inflate(helper, ResourceTable.Layout_ability_main, null, false); binding.setViewModel(viewModel); setUIContent(binding.getRoot()); // 模拟数据更新 new Handler().postDelayed(() -> { viewModel.setTemperature("26℃"); }, 3000); } } |

代码更新：在代码中通过方法调用动态改变文本内容也是一种常见的方式。当用户在一个登录界面中输入用户名和密码后，点击登录按钮，系统会根据登录结果在界面上显示相应的提示信息。在布局文件中定义一个 Text 组件用于显示提示信息：

|-----------------------------------------------------------------------|
| <Text ohos:id="$+id/login_result_text" ohos:text="请输入用户名和密码" ... /> |

在代码中，通过获取 Text 组件的实例，调用setText方法来更新文本内容。例如：

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| public class LoginAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); setUIContent(ResourceTable.Layout_ability_login); Button loginButton = (Button) findComponentById(ResourceTable.Id_login_button); Text resultText = (Text) findComponentById(ResourceTable.Id_login_result_text); loginButton.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { // 模拟登录验证逻辑 boolean isLoginSuccess = performLogin(); if (isLoginSuccess) { resultText.setText("登录成功"); } else { resultText.setText("用户名或密码错误，请重试"); } } }); } private boolean performLogin() { // 实际的登录验证逻辑，这里简单返回一个固定值 return true; } } |

（二）交互效果实现

点击事件：为文本组件添加点击事件监听器，能够让文本在被点击时执行特定的操作。在一个新闻详情页面中，有一段文本是关于新闻来源的链接，当用户点击该文本时，希望能够跳转到新闻来源的网站。在布局文件中定义一个 Text 组件：

|----------------------------------------------------------------------------|
| <Text ohos:id="$+id/news_source_text" ohos:text="来源：[具体新闻网站名称]" ... /> |

在代码中，获取 Text 组件的实例，并为其设置点击事件监听器。例如：

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| public class NewsDetailAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); setUIContent(ResourceTable.Layout_ability_news_detail); Text sourceText = (Text) findComponentById(ResourceTable.Id_news_source_text); sourceText.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { // 处理点击事件，跳转到新闻来源网站 Intent intent = new Intent(); Operation operation = new Intent.OperationBuilder() .withUri("https://[具体新闻网站地址]") .build(); intent.setOperation(operation); startAbility(intent); } }); } } |

长按事件：实现文本组件的长按事件，可以满足一些特定的交互需求，比如弹出上下文菜单、复制文本等。在一个便签应用中，长按便签的文本内容，希望能够弹出一个包含 "复制""删除" 等操作的菜单。在布局文件中定义一个 Text 组件用于显示便签内容：

|--------------------------------------------------------------|
| <Text ohos:id="$+id/note_text" ohos:text="这是一条便签内容" ... /> |

在代码中，获取 Text 组件的实例，并为其设置长按事件监听器。例如：

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| public class NoteAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); setUIContent(ResourceTable.Layout_ability_note); Text noteText = (Text) findComponentById(ResourceTable.Id_note_text); noteText.setLongClickedListener(new Component.LongClickedListener() { @Override public boolean onLongClicked(Component component) { // 处理长按事件，弹出上下文菜单 showContextMenu(); return true; } }); } private void showContextMenu() { // 实际的上下文菜单显示逻辑，这里可以使用PopupMenu等组件实现 ToastDialog toast = new ToastDialog(getContext()); toast.setText("上下文菜单"); toast.show(); } } |

触摸反馈 ：为文本组件添加触摸反馈效果，可以让用户在操作时获得更直观的视觉反馈，提升交互体验。在 HarmonyOS 中，可以通过设置文本组件的background_element属性，结合ShapeElement来实现触摸反馈效果。在一个按钮式的文本组件中，当用户触摸时，希望文本背景颜色变深，松开时恢复原状。首先在resources/base/graphic目录下创建一个xml文件，例如button_bg.xml，定义触摸前后的背景形状和颜色：

然后在布局文件中应用这个背景到文本组件：

|--------------------------------------------------------------------------------------------------------|
| <Text ohos:id=" $+id/button_text" ohos:text="点击我" ohos:background_element="$ graphic:button_bg" ... /> |

这样，当用户触摸该文本组件时，背景颜色会变为#E0E0E0，松开时恢复为#FFFFFF，从而实现了触摸反馈效果。

五、应用案例展示

为了让大家更直观地了解 HarmonyOS 文本组件的强大功能和实际应用效果，下面我们来看几个具体的应用案例。

（一）资讯类应用

在一款知名的资讯类应用中，文本组件的运用十分巧妙。新闻标题使用了较大字号、加粗字体以及与背景形成鲜明对比的颜色，如黑色文本搭配白色背景，在列表中非常醒目，能迅速吸引用户的注意力。同时，通过text_alignment属性设置为left，保证标题左对齐，符合用户从左到右的阅读习惯。新闻摘要则采用较小字号和相对柔和的颜色，与标题形成层次区分。对于较长的摘要内容，应用了truncation_mode属性设置为ellipsis_at_end，在显示区域有限时，以省略号截断，既展示了关键信息，又保持了界面的整洁。当用户点击新闻标题进入详情页后，正文内容根据不同的段落结构，设置了适当的行间距和缩进，通过multiple_lines属性开启自动换行，确保文本排版舒适，易于阅读。

（二）金融类应用

在一款金融理财应用里，对于数字金额的显示，文本组件的属性设置尤为重要。账户余额、收益金额等关键数字，使用了较大且醒目的字体，如HwChinese-bold字体，并根据金额的正负，设置了不同的颜色，盈利金额显示为绿色，亏损金额显示为红色，让用户一眼就能了解自己的财务状况。在交易记录列表中，每笔交易的时间、金额、交易类型等信息，通过合理设置文本的对齐方式和颜色，实现了清晰的信息展示。交易时间左对齐，金额右对齐，交易类型居中显示，不同类型的交易（如买入、卖出、转账等）使用不同的颜色标识，方便用户快速区分和查看。此外，对于一些重要的提示信息，如风险提示、账户安全提醒等，采用了带背景颜色的文本框展示，背景颜色通常为浅黄色或淡红色，与普通文本形成明显区别，引起用户的重视。

（三）教育类应用

在一款在线教育应用中，文本组件在课程内容展示、互动环节等方面发挥了重要作用。课程标题和章节标题使用了较大的字体和不同的颜色来区分层级，如课程标题用蓝色，章节标题用绿色，方便学生快速定位和了解课程结构。在知识点讲解部分，对于重点内容，通过设置font_weight为bold加粗显示，或添加下划线装饰，让学生能够快速抓住关键知识点。在互动环节，如提问、讨论区，用户输入的文本和回复的内容，通过不同的背景颜色和文本对齐方式进行区分，用户自己输入的文本背景色为淡灰色，左对齐显示；回复的内容背景色为白色，右对齐显示，使得交流内容清晰明了，提升了用户的互动体验。同时，在输入框中，还利用hint属性设置了提示文本，引导用户正确输入内容。

六、总结与展望

HarmonyOS 的文本组件（Text）凭借丰富多样的属性，为开发者打造出了一个充满创意与可能的文本展示空间。从字体的精挑细选，到颜色的巧妙搭配，再到对齐方式的精心布局，以及各种实用属性的灵活运用，每一个细节都为文本在界面上的生动呈现提供了有力支持。

在动态更新与交互效果方面，数据绑定和代码更新两种方式让文本能够实时响应数据变化，点击事件、长按事件和触摸反馈等交互效果的实现，则极大地增强了用户与应用之间的互动性，为用户带来了更加流畅、有趣的使用体验。

随着 HarmonyOS 的不断发展和生态的日益完善，相信文本组件在未来的应用开发中会发挥更加重要的作用。其功能将不断优化和拓展，以适应更多复杂的应用场景和用户需求。例如，在未来的智能穿戴设备应用中，可能会根据用户的运动状态、心率等生理数据，动态调整文本的显示方式，如在运动时增大字体、改变颜色以提高可视性；在智能家居控制应用中，文本组件可能会与语音交互更加紧密结合，当用户通过语音下达指令时，界面上的文本提示能够及时更新，给予用户准确的反馈。

HarmonyOS 文本组件作为界面开发的重要基础，为我们打开了一扇通往无限可能的大门，让我们期待它在未来绽放出更加绚丽的光彩，为 HarmonyOS 应用的精彩呈现持续贡献力量。