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

我可以不吃啊 · 昨天 21:34

一、弁言

在 HarmonyOS 那丰富多彩的系统界面中，从轻便直观的应用图标，到交互流畅的操纵菜单，再到生动形象的图文展示，每一处细节都颠末经心雕琢，为用户带来了独特而美好的视觉与交互体验。而在这琳琅满目标界面元素中，文本组件（Text）无疑扮演着不可或缺的关键角色。它是信息通报的直接载体，无论是应用的标题、操纵的提示，照旧内容的形貌，都离不开文本组件的出现。
你是否曾好奇，那些在 HarmonyOS 界面上风格各异、排版精美的文字是如何实现的？又是否想知道如何让文本随着用户的操纵而动态变化，实现更加丰富的交互效果？接下来，就让我们一同深入探索 HarmonyOS 文本组件的奥秘，解锁文字在界面上生动出现的暗码。
二、Text 组件初相识

在 HarmonyOS 的 UI 开发体系中，Text 组件就像是搭建界面大厦的基石，是用于展示文本的基础组件。它的存在使得应用能够将各种信息，以文字的情势清晰、准确地出现给用户。无论是简单的提示语、复杂的文章内容，照旧应用的标题、按钮上的文字，都离不开 Text 组件的支持。
在一个音乐播放应用中，歌曲的名称、歌手信息、歌词展示等，都可以通过 Text 组件来实现。又好比在一款购物应用里，商品的名称、价格、促销信息等文本内容，同样依赖 Text 组件来展示。可以说，Text 组件贯穿于 HarmonyOS 应用界面的方方面面，是构建用户与应用之间信息交互桥梁的重要元素。
三、属性大揭秘

（一）字体相关属性

字体选择：在 HarmonyOS 中设置字体，重要通过text_font属性来实现。默认环境下，系统会利用默认字体来展示文本。但假如我们想要利用特定的字体，好比HwChinese-medium 、sans-serif-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，可以这样写：

也能显式指定单元，如 vp（视口单元）、fp（字体像素）等。利用 vp 单元时，它会根据装备的屏幕密度自动调解巨细，包管在不同装备上元素的显示效果同等。例如设置字体巨细为 20vp：

而 fp 是鸿蒙系统专门用于定义字体巨细的单元，能在不同的屏幕密度和分辨率下自动调解字体巨细，确保字体在全部装备上都清晰可读。如设置字体巨细为 18fp：

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

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

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

（二）颜色属性

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

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

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

然后在结构文件中引用：

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

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

<shape xmlns

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

然后在结构文件中应用这个背景：

（三）对齐方式属性

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

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

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

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

（四）其他实用属性

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

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

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

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

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

（一）动态更新文本

数据绑定：在 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属性绑定：

在代码中，通过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 组件的实例，调用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 组件的实例，并为其设置点击事件监听器。例如：

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 组件的实例，并为其设置长按事件监听器。例如：

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

hos="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>

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

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

为了让大家更直观地了解 HarmonyOS 文本组件的强大功能和现实应用效果，下面我们来看几个详细的应用案例。
（一）资讯类应用

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

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

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

HarmonyOS 的文本组件（Text）依附丰富多样的属性，为开发者打造出了一个充满创意与可能的文本展示空间。从字体的精挑细选，到颜色的奇妙搭配，再到对齐方式的经心结构，以及各种实用属性的灵活运用，每一个细节都为文本在界面上的生动出现提供了有力支持。
在动态更新与交互效果方面，数据绑定和代码更新两种方式让文本能够实时响应数据变化，点击事件、长按事件和触摸反馈等交互效果的实现，则极大地加强了用户与应用之间的互动性，为用户带来了更加流畅、有趣的利用体验。
随着 HarmonyOS 的不停发展和生态的日益完善，相信文本组件在未来的应用开发中会发挥更加重要的作用。其功能将不停优化和拓展，以适应更多复杂的应用场景和用户需求。例如，在未来的智能穿戴装备应用中，可能会根据用户的运动状态、心率等生理数据，动态调解文本的显示方式，如在运动时增大字体、改变颜色以进步可视性；在智能家居控制应用中，文本组件可能会与语音交互更加细密结合，当用户通过语音下达指令时，界面上的文本提示能够实时更新，给予用户准确的反馈。
HarmonyOS 文本组件作为界面开发的重要基础，为我们打开了一扇通往无限可能的大门，让我们期待它在未来绽放出更加壮丽的光彩，为 HarmonyOS 应用的精彩出现连续贡献气力。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块