创新互联鸿蒙OS教程:鸿蒙OSText

文本(Text)是用来显示字符串的组件,在界面上显示为一块文本区域。Text 作为一个基本组件,有很多扩展,常见的有按钮组件 Button,文本编辑组件 TextField。

使用 Text

  • 创建 Text
  

color_gray_element.xml:

  
  
      
  

图1 创建一个 Text

  • 设置背景

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

在“Project”窗口,打开“entry > src > main > resources > base”,右键点击“base”文件夹,选择“New > Directory”,命名为“graphic”。右键点击“graphic”文件夹,选择“New > File”,命名为“textelement.xml”。

图2 创建 textelement.xml 文件后的 resources 目录结构

在 textelement.xml 中定义文本的背景:

  
  
      
      
  

在 first_layout.xml 中引用上面定义的文本背景:

  

  • 设置字体大小和颜色
  

图3 设置字体大小和颜色的效果

  • 设置字体风格和字重
  

图4 设置字体风格和字重的效果

  • 设置文本对齐方式
  

图5 设置文本对齐方式的效果

  • 设置文本换行和最大显示行数
  

图6 设置文本换行和最大显示行数的效果

自动调节字体大小

Text对象支持根据文本长度自动调整文本的字体大小和换行。

  1. 设置自动换行、最大显示行数和自动调节字体大小。
   

  1. 通过 setAutoFontSizeRule 设置自动调整规则,三个入参分别是最小的字体大小、最大的字体大小、每次调整文本字体大小的步长。
   // 设置自动调整规则
   text.setAutoFontSizeRule(30, 100, 1);
   // 设置点击一次增多一个"T"
   text.setClickedListener(new Component.ClickedListener() {
       @Override
       public void onClick(Component Component) {
           text.setText(text.getText() + "T");
       }
   });

图7 自动调节字体大小

跑马灯效果

当文本过长时,可以设置跑马灯效果,实现文本滚动显示。前提是文本换行关闭且最大显示行数为1,默认情况下即可满足前提要求。






// 跑马灯效果
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
// 启动跑马灯效果
text.startAutoScrolling();

图8 跑马灯效果

场景示例

利用文本组件实现一个标题栏和详细内容的界面。

图9 界面效果

源码示例:



    
    
    

color_light_gray_element.xml:



    

textelement.xml:



    
    

当前题目:创新互联鸿蒙OS教程:鸿蒙OSText
文章源于:http://www.csdahua.cn/qtweb/news19/466619.html

网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网