鸿蒙开发(1)---Text组件

简介: 鸿蒙开发(1)---Text组件

鸿蒙App开发之Text


从2021年6月2号开始,鸿蒙系统已经完全开源。


目前学习鸿蒙开发正当其时,如果你之前学习过Android开发,那么鸿蒙完全可以直接上手。


不过,博主写的鸿蒙开发课程任何人都可以学习,因为都是从基础的组件开始讲解。下面,博主将从Text组件入门,来一步步讲解鸿蒙开发的要点。


Text组件

Text是用来显示字符串的组件,在界面上显示为一块文本区域。示例代码如下所示:

<Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:background_element="$graphic:background_ability_main"
        ohos:padding="10vp"
        ohos:text_font="serif"
        ohos:text="$string:HelloWorld"
        ohos:element_left="$media:icon"
        ohos:text_size="50vp"/>


这里,是通过XML布局文件来创建Text文本组件。


运行之后,效果如下:



属性

含义
id 组件名称,方便在代码中获取组件
height|width 宽度与高度,match_content为根据内容大小自适应
layout_alignment 文本对其方式,center为水平垂直居中
background_element 文本背景,可以通过graphic资源文件设置边框颜色等等数据
padding 内间距
text_font 字体选择,可选择的字体有:sans-serif,HwChinese-medium等
text 文本的内容,这里为Hello World,引用的string资源文件内容
element_left 文字左侧图片,这里为鸿蒙默认图标
text_size 字体大小

当然,Text组件还有很多其他的属性,相对来说用的比较少,比如max_text_lines文本最大行,这些在后面的组件讲解。


通过代码操作Text组件

上面,我们都是通过XML布局文件进行Text组件的设置以及操作。但是其第一个属性就是id,通过它我们可以在代码中对Text组件做更多的事情。


示例如下:

public class MainAbilitySlice extends AbilitySlice {
    private Text hw_text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.hw_text=(Text)findComponentById(ResourceTable.Id_text_helloworld);
        this.hw_text.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(hw_text.getText().equals("Hello World")){
                    hw_text.setText("Harmony OS");
                }else{
                    hw_text.setText("Hello World");
                }
            }
        });
    }
}


这里,我们给Text组件设置了点击事件,当Text组件文本为Hello World时,替换为Harmony OS。当Text组件文本不是Hello World时,替换为Hello World。


简单的理解,就是“Harmony OS”与“Hello World”两个文本点击后相互替换。


使用Text组件实现跑马灯效果

在众多的开发中,讲解文本组件时,都会介绍其跑马灯效果的实现。那么博主讲解鸿蒙也不例外,我们来实现鸿蒙系统文本组件的跑马灯效果。


示例如下:

public class MainAbilitySlice extends AbilitySlice {
    private Text hw_text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.hw_text=(Text)findComponentById(ResourceTable.Id_text_helloworld);
        this.hw_text.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(hw_text.getText().equals("Hello World")){
                    hw_text.setText("Harmony OS");
                }else{
                    hw_text.setText("Hello World");
                }
            }
        });
        // 跑马灯效果
        this.hw_text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
        // 始终处于自动滚动状态
        this.hw_text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
        // 启动跑马灯效果
        this.hw_text.startAutoScrolling();
    }
}


这里,我们只需要增加三行即可。


但是如果直接运行的话,肯定没有效果,因为文本的宽度是自适应内容宽度,而跑马灯之所以能够实现,是因为其宽度小于文本宽度。


所以,我们需要改变文本的宽度,将其设置为固定的大小,且小于文本字符串,XML修改代码如下:

ohos:width="175vp"

运行之后,效果如首图所示。


资源文件引用内容:

graphic:background_ability_main:
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="50"/>
    <solid
        ohos:color="#FF0000"/>
</shape>

string:HelloWorld:

{
  "string": [
    {
      "name": "app_name",
      "value": "鸿蒙组件"
    },
    {
      "name": "mainability_description",
      "value": "Java_Phone_Empty Feature Ability"
    },
    {
      "name": "HelloWorld",
      "value": "Hello World"
    }
  ]
}
相关文章
|
21天前
|
容器
45.[HarmonyOS NEXT RelativeContainer案例二] 精确控制组件间距:外边距在相对布局中的高级应用
在HarmonyOS NEXT的UI开发中,组件之间的间距控制对于创建美观、易用的界面至关重要。RelativeContainer不仅提供了强大的锚点定位系统,还可以结合外边距(margin)属性实现更精细的布局控制。本教程将详细讲解如何在RelativeContainer中巧妙运用外边距,帮助你掌握这一实用技巧。
69 29
|
21天前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
39 4
|
21天前
|
UED 容器
43.[HarmonyOS NEXT Row案例十一] 构建智能分页控件:Row组件实现页码与翻页按钮的完美结合
分页控件是数据展示类应用中不可或缺的导航元素,它允许用户在大量数据中进行有序浏览。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建一个功能完善的分页控件,实现页码显示与前后翻页按钮的完美结合。 分页控件在各类应用场景中广泛应用,如电子商城的商品列表、新闻应用的文章列表、图库应用的图片浏览等。通过合理的设计和交互,可以提升用户的浏览体验和数据访问效率。
34 3
|
21天前
|
数据库 开发者 UED
37.[HarmonyOS NEXT Row案例五] 构建智能聊天气泡:Row组件的reverse属性妙用
在即时通讯应用中,聊天气泡是一个核心UI元素,它需要能够区分发送方和接收方的消息,并以不同的样式和位置显示。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建反向排列的消息气泡,重点介绍reverse属性的巧妙应用,帮助开发者构建出专业、美观的聊天界面。
41 3
|
17天前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
47 1
|
17天前
|
JavaScript 前端开发 IDE
鸿蒙开发:了解布局分析ArkUI Inspector
ArkUI Inspector,知名其意,就是UI检查,它可以让开发者在DevEco Studio中快速的查看一个应用在模拟器或者真机上的UI显示效果,并且可以通过查看多次操作后的界面状态,来快速的分析定位UI界面存在的问题。
鸿蒙开发:了解布局分析ArkUI Inspector
|
17天前
|
数据挖掘 测试技术 开发工具
鸿蒙开发:hvigorw,编译构建,实现命令打包
以上呢,就是hvigorw几个常见的命令,主要用于构建不同类型的包,也是接下来流水线打包,几个比较常用的命令,所以拿来重点概述了,当然了hvigorw还有一些常见的命令,大家直接看官网介绍即可,不在多赘述。
鸿蒙开发:hvigorw,编译构建,实现命令打包
|
17天前
|
缓存 开发工具 开发者
鸿蒙开发:了解构建工具hvigorw
hvigorw作为Hvigor的wrapper包装工具,它的主要作用是,支持自动安装Hvigor构建工具和相关插件依赖,以及执行Hvigor构建命令
鸿蒙开发:了解构建工具hvigorw
|
17天前
|
安全 前端开发 开发工具
鸿蒙开发:应用内如何做更新
使用系统的,直接调用检查和显示更新弹窗即可,可以说就两个方法,我们就实现了应用更新的功能,可以说是非常的简单,如果系统的弹窗无法满足您的需求,您可以自定义弹窗,然后实现跳转应用详情页面即可。
鸿蒙开发:应用内如何做更新
|
17天前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
51 0

热门文章

最新文章