首页 > 其他分享 >了解鸿蒙OS Text组件

了解鸿蒙OS Text组件

时间:2024-01-29 15:32:38浏览次数:25  
标签:xml 字体大小 鸿蒙 Text 设置 text 文本 OS

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

使用 Text

  • 创建 Text
<Text
      ohos:id="$+id:text"
      ohos:width="match_content"
      ohos:height="match_content"
      ohos:text="Text"
      ohos:background_element="$graphic:color_gray_element"/>

color_gray_element.xml:

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:shape="rectangle">
      <solid
          ohos:color="#ff888888"/>
  </shape>

图1 创建一个 Text

了解鸿蒙OS Text组件_harmony

  • 设置背景

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

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

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

了解鸿蒙OS Text组件_鸿蒙开发_02

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

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:shape="rectangle">
      <corners
          ohos:radius="20"/>
      <solid
          ohos:color="#ff888888"/>
  </shape>

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

<Text
      ohos:id="$+id:text"
      ohos:width="match_content"
      ohos:height="match_content"
      ohos:text="Text"
      ohos:background_element="$graphic:textelement"/>
  • 设置字体大小和颜色
<Text
      ohos:id="$+id:text"
      ohos:width="match_content"
      ohos:height="match_content"
      ohos:text="Text"
      ohos:text_size="28fp"
      ohos:text_color="blue"
      ohos:left_margin="15vp"
      ohos:bottom_margin="15vp"
      ohos:right_padding="15vp"
      ohos:left_padding="15vp"
      ohos:background_element="$graphic:textelement"/>

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

了解鸿蒙OS Text组件_harmony_03

  • 设置字体风格和字重
<Text
      ohos:id="$+id:text"
      ohos:width="match_content"
      ohos:height="match_content"
      ohos:text="Text"
      ohos:text_size="28fp"
      ohos:text_color="blue"
      ohos:italic="true"
      ohos:text_weight="700"
      ohos:text_font="serif"
      ohos:left_margin="15vp"
      ohos:bottom_margin="15vp"
      ohos:right_padding="15vp"
      ohos:left_padding="15vp"
      ohos:background_element="$graphic:textelement"/>

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

了解鸿蒙OS Text组件_鸿蒙开发_04

  • 设置文本对齐方式
<Text
      ohos:id="$+id:text"
      ohos:width="300vp"
      ohos:height="100vp"
      ohos:text="Text"
      ohos:text_size="28fp"
      ohos:text_color="blue"
      ohos:italic="true"
      ohos:text_weight="700"
      ohos:text_font="serif"
      ohos:left_margin="15vp"
      ohos:bottom_margin="15vp"
      ohos:right_padding="15vp"
      ohos:left_padding="15vp"
      ohos:text_alignment="horizontal_center|bottom"
      ohos:background_element="$graphic:textelement"/>

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

了解鸿蒙OS Text组件_harmony_05

  • 设置文本换行和最大显示行数
<Text
      ohos:id="$+id:text"
      ohos:width="75vp"
      ohos:height="match_content"
      ohos:text="TextText"
      ohos:text_size="28fp"
      ohos:text_color="blue"
      ohos:italic="true"
      ohos:text_weight="700"
      ohos:text_font="serif"
      ohos:multiple_lines="true"
      ohos:max_text_lines="2"
      ohos:background_element="$graphic:textelement"/>

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

了解鸿蒙OS Text组件_harmony_06

自动调节字体大小

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

  • 设置自动换行、最大显示行数和自动调节字体大小。
<Text
       ohos:id="$+id:text1"
       ohos:width="90vp"
       ohos:height="match_content"
       ohos:min_height="30vp"
       ohos:text="T"
       ohos:text_color="blue"
       ohos:italic="true"
       ohos:text_weight="700"
       ohos:text_font="serif"
       ohos:multiple_lines="true"
       ohos:max_text_lines="1"
       ohos:auto_font_size="true"
       ohos:right_padding="8vp"
       ohos:left_padding="8vp"
       ohos:background_element="$graphic:textelement"/>
  • 通过 setAutoFontSizeRule 设置自动调整规则,三个入参分别是最小的字体大小、最大的字体大小、每次调整文本字体大小的步长。
// 设置自动调整规则
   text.setAutoFontSizeRule(30, 100, 1);
   // 设置点击一次增多一个"T"
   text.setClickedListener(new Component.ClickedListener() {
       @Override
       public void onClick(Component Component) {
           text.setText(text.getText() + "T");
       }
   });

图7 自动调节字体大小

了解鸿蒙OS Text组件_harmony_07

跑马灯效果

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

<Text
    ohos:id="$+id:text"
    ohos:width="75vp"
    ohos:height="match_content"
    ohos:text="TextText"
    ohos:text_size="28fp"
    ohos:text_color="blue"
    ohos:italic="true"
    ohos:text_weight="700"
    ohos:text_font="serif"
    ohos:background_element="$graphic:textelement"/>
// 跑马灯效果
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
// 启动跑马灯效果
text.startAutoScrolling();

图8 跑马灯效果

了解鸿蒙OS Text组件_harmony_08

场景示例

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

图9 界面效果

了解鸿蒙OS Text组件_harmony_09

源码示例:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:background_element="$graphic:color_light_gray_element">
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text_size="25fp"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:background_element="$graphic:textelement"
        ohos:text="Title"
        ohos:text_weight="1000"
        ohos:text_alignment="horizontal_center"/>
    <Text
        ohos:id="$+id:text3"
        ohos:width="match_parent"
        ohos:height="120vp"
        ohos:text_size="25fp"
        ohos:background_element="$graphic:textelement"
        ohos:text="Content"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text_alignment="center"
        ohos:below="$id:text1"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button1"
        ohos:width="75vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:textelement"
        ohos:text="Previous"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:left_padding="5vp"
        ohos:right_padding="5vp"
        ohos:below="$id:text3"
        ohos:left_of="$id:button2"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="75vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:textelement"
        ohos:text="Next"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:left_padding="5vp"
        ohos:right_padding="5vp"
        ohos:align_parent_end="true"
        ohos:below="$id:text3"
        ohos:text_font="serif"/>
</DependentLayout>

color_light_gray_element.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ffeeeeee"/>
</shape>

textelement.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <solid
        ohos:color="#ff888888"/>
</shape>

标签:xml,字体大小,鸿蒙,Text,设置,text,文本,OS
From: https://blog.51cto.com/u_16536309/9465882

相关文章

  • iOS ARKit 光照效果之光源
    光照   在现实世界中,光扮演了极其重要的角色,没有光万物将失去色彩,没有光世界将一片漆黑。在3D数字世界中亦是如此,3D数字世界本质上是一个使用数学精确描述的真实世界复本,光照计算是影响这个数字世界可信度的极其重要的因素。光源   顾名思义,光源即是光的来源,常见......
  • 鸿蒙Stage模型--概述
    Stage模型:HarmonyOS3.1DevelperPreview版本开始新增的模型,是目前主推且会长期演进的模型。在该模型中,由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”,因此称这种应用模型为Stage模型。设计思想Stage模型之所以成为主推模型,源于其设计思想。Stage模......
  • vue 环境配置(使用cross-env配置)
    vue环境配置(使用cross-env配置)通过定义不同的打包命令,更改项目环境变量。1、下载cross-even(可跨平台设置node环境变量)npminstallcross-env--save-dev2、package.json文件查询scripts,在其中加入如下代码:(其为不同环境的打包命令,可自定义)。"build:qa":"cr......
  • [EFI]三星NP350XAA 电脑 Hackintosh 黑苹果efi引导文件
    硬件型号驱动情况主板NP350XAA处理器赛扬双核3865U已驱动内存4GB (三星DDR3)已驱动硬盘西数WDCPCSN730SDBPNTY-256G-1027(256GB/固态硬盘)已驱动显卡IntelGMAHD610已驱动声卡暂无更多信息已驱动网卡暂无更多信息已驱动无线网卡+蓝牙暂无更多信息支持系统版本✅Mac......
  • 【教程】iOS 手机抓包工具介绍及教程
    ......
  • FreeRTOS之系统移植
    自由实时操作系统(FreeRTOS)是一款开源的、基于实时多任务处理的嵌入式操作系统,专为微控制器和嵌入式系统设计。其灵活性、可移植性和可靠性使得它成为许多嵌入式系统工程师的首选。FreeRTOS的核心理念是提供一个轻量级、可裁剪的实时内核,以满足不同应用场景的需求。FreeRTOS系统移......
  • docker\docker-compose 配置容器日志大小
    问题背景:24/1/29,docker容器日志爆满,导致docker无法启动  解决方案:1.删除大日志2.日志配置docker\docker-compose配置容器日志大小_docker-compose限制日志大小-CSDN博客......
  • linux centos yum 报错[Errno 256]No more mirrors to try 解决方法
    解决方案大致有三种一、更新yum二、若不行,可能是因为DNS不稳定吧,因为yum安装时会从三个”repo源“(base,extras,updates)随机获取地址背景我使用yum方式安装软件时,比如zabbix这种软件,我们在安装时一般都是直接到zabbix官网,按照官方的步骤进行安装,但是有一个问题,官方的服务器不在国......
  • Linux环境安装postgresql
    一、资源包下载1.1、官网下载地址https://www.postgresql.org/ftp/source/ 1.2上传安装包,并解压#.tar.gz后缀:tar-zxvf文件名#.tar.xz后缀:tar-Jxvf文件名#-C后面是解压后存放的目录​tar-xvfpostgresql-15.3.tar.gz-C/data/database/postgresql/package......
  • k8s集群断电后 机器不能启动问题--- Centos 服务器 无法启动 Failed to start Login S
    参考文档:https://blog.csdn.net/hedao0515/article/details/129718094先说下主要原因,是因为断电后有些文件没有完整写入,导致文件系统错误,需要借助原生工具修复文件系统。重启机器,进入linux选择内核页面,按ctrl+x进入引导页面,在linux16这一行最后填上init=/bin/bash有可能......