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:

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| public class WeatherModel { private String temperature; public WeatherModel(String temperature) { this.temperature = temperature; } public String getTemperature() { return temperature; } public void setTemperature(String temperature) { this.temperature = temperature; } } |

然后在布局文件中创建一个 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,定义触摸前后的背景形状和颜色:

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#FFFFFF" /> <corners ohos:radius="4vp" /> <states> <state ohos:state_pressed="true"> <solid ohos:color="#E0E0E0" /> </state> </states> </shape> |

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

|--------------------------------------------------------------------------------------------------------|
| <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 应用的精彩呈现持续贡献力量。

相关推荐
不太可爱的叶某人6 小时前
【学习笔记】MySQL技术内幕InnoDB存储引擎——第5章 索引与算法
笔记·学习·mysql
岁岁岁平安6 小时前
Redis基础学习(五大值数据类型的常用操作命令)
数据库·redis·学习·redis list·redis hash·redis set·redis string
HMS Core7 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
华为·ar·harmonyos
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
pay4fun8 小时前
2048-控制台版本
c++·学习
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
weixin_4188138711 小时前
Python-可视化学习笔记
笔记·python·学习
Haoea!11 小时前
Flink-05学习 接上节,将FlinkJedisPoolConfig 从Kafka写入Redis
学习·flink·kafka
丁满与彭彭12 小时前
嵌入式学习笔记-MCU阶段-DAY01
笔记·单片机·学习
呼啦啦--隔壁老王12 小时前
dexopt学习待整理
学习