鸿蒙Harmony--文本组件Text属性详解

news2024/9/16 22:19:54

金樽清酒斗十千，玉盘珍羞直万钱。 停杯投箸不能食，拔剑四顾心茫然。 欲渡黄河冰塞川，将登太行雪满山。 闲来垂钓碧溪上，忽复乘舟梦日边。 行路难，行路难，多歧路，今安在？ 长风破浪会有时，直挂云帆济沧海。

目录

一，显示一个简单的文本

二，调整文字的字体大小和颜色

三，字体倾斜

四，字体加粗

1，简单的加粗

2，设置固定值加粗

五，设置文本框大小

六，设置文本框背景色

七，设置文字水平居中

八，设置背景圆角

九，添加边线

十，文字超长显示

1，超长截断

2，超长显示...

3，超长滚动

十一，设置文本行高

十二，设置文本字间距

十三，文字大小自适应

十四，英文字母统一大小写

1，统一显示大写

2，统一小写

3，正常显示

十五，设置首行文本缩进

十六，添加子组件Span

一，显示一个简单的文本

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

二，调整文字的字体大小和颜色

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontSize(30)
        .fontColor("#22aaff")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

三，字体倾斜

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontStyle(FontStyle.Italic)//斜体
        .fontSize(30)
        .fontColor("#22aaff")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

四，字体加粗

1，简单的加粗

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(FontWeight.Bold)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

2，设置固定值加粗

也可以通过设置数值调整加粗程度，取值为100-900

900效果为：

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

五，设置文本框大小

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

六，设置文本框背景色

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

七，设置文字水平居中

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

八，设置背景圆角

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

九，添加边线

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("袁震")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(100) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //添加边线
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十，文字超长显示

1，超长截断

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(100) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .maxLines(1)  //最大显示一行
        .border({width: 2, color: '#000000'}) //边框
        .textOverflow({overflow: TextOverflow.None}) //超长文字截断
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

2，超长显示...

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(100) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .maxLines(1)  //最大显示一行
        .border({width: 2, color: '#000000'}) //边框
        .textOverflow({overflow: TextOverflow.Ellipsis}) //超长显示省略号
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

3，超长滚动

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(100) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .maxLines(1)  //最大显示一行
        .border({width: 2, color: '#000000'}) //边框
        .textOverflow({overflow: TextOverflow.MARQUEE}) //超长滚动
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十一，设置文本行高

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .lineHeight(60) //行高
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十二，设置文本字间距

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .lineHeight(60) //行高
        .letterSpacing(20) //字间距
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十三，文字大小自适应

注意：需要minFontSize ，maxFontSize，maxline 以及文本框大小配合使用

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("英雄联盟德玛西亚之力")
        .fontWeight(900)//加粗
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .lineHeight(60) //行高
        .minFontSize(15) //最小字体15
        .maxFontSize(30) //最大字体30
        .maxLines(1)  //最多显示一行
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

 

十四，英文字母统一大小写

1，统一显示大写

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("abcd")
        .fontWeight(900)//加粗
        .textCase(TextCase.UpperCase) //字母大写
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

2，统一小写

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("ABCD")
        .fontWeight(900)//加粗
        .textCase(TextCase.LowerCase) //字母小写
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

3，正常显示

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("ABcd")
        .fontWeight(900)//加粗
        .textCase(TextCase.Normal) //字母正常显示
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .textAlign(TextAlign.Center)//文字水平居中
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十五，设置首行文本缩进

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("ABcdefghfsenfkbkbfgkgldfkledmsam")
        .fontWeight(900)//加粗
        .textCase(TextCase.Normal) //字母正常显示
        .fontSize(30)
        .fontColor("#22aaff")
        .width(200) //宽度
        .height(200) //高度
        .backgroundColor("#ccaabb") //背景色
        .borderRadius(10) //背景圆角
        .border({width: 2, color: '#000000'}) //边框
        .textIndent(10)//设置首行文本缩进
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('txt1')
    }
  }
}

十六，添加子组件Span

@Entry
@Component
struct TestPage {

  build() {
    RelativeContainer() {
      Text("ABcdefghfsenfkbkbfgkgldfkledmsam"){
        Span("我是子组件1")
          .fontSize(20)
          .fontColor("#000000")
          .fontWeight(900)//加粗
        Span("我是子组件2")
          .fontSize(15)
          .fontColor("#ffffff")
        Span("我是3")
          .fontSize(20)
          .fontColor("#ffccdd")
      }
      .width(300) //宽度
      .height(100) //高度
      .backgroundColor("#ccaabb") //背景色
      .borderRadius(10) //背景圆角
      .border({width: 2, color: '#000000'}) //边框
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .id('txt1')
    }
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1929323.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

java中的String 以及其方法(超详细！！！)

java中的String 以及其方法(超详细！！！)

文章目录 一、String类型是什么String不可变的原因(经典面试题)String不可变的好处 二、String的常用构造形式1.使用常量串构造2.使用newString对象构造3.字符串数组构造 三、常用方法1. length() 获取字符串的长度2. charAt() 获取字符串中指定字符的值 (代码单元)3. codePoin…
阅读更多...
ES快速开发，ElasticsearchRestTemplate基本使用以及ELK快速部署

ES快速开发，ElasticsearchRestTemplate基本使用以及ELK快速部署

最近博主有一些elasticsearch的工作，所以更新的慢了些，现在就教大家快速入门，并对一些基本的查询、更新需求做一下示例，废话不多说开始： 1. ES快速上手 es下载：[https://elasticsearch.cn/download/]()这…
阅读更多...
记录｜C#连接PLC通讯

记录｜C#连接PLC通讯

参考视频C#连接S71200PLC 参考资料 目录 前言一、使用工具二、博图PLC1.创建好PLC设备Step1. 创建新设备Step2. 自动配置CPUStep3. 配置IP协议和连接机制隐藏步骤：重置解决PLC硬件版本和PLCSim创建的PLC版本不兼容Step4. 通过HslDemo来测试是否连通Step5. 配置DB数据…
阅读更多...
C语言课程回顾：十、C语言之 指针

C语言课程回顾：十、C语言之 指针

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 C语言之 指针 10 指针10.1 地址指针的基本概念10.2 变量的指针和指向变量的指针变量10.2.1 定义一个指针变量10.2.2 指针变量的引用10.2.3 指针变量作为函数参数10.2.4 指针变…
阅读更多...
性能测试中唯一标识的JMH测试

性能测试中唯一标识的JMH测试

前文分享了几种性能测试中常用到的生成全局唯一标识的案例，虽然在文中我猜测了几种方案设计的性能，并根据自己的经验给出了适用的场景。 但对于一个性能测试工程师来讲，有真是测试数据才更有说服力。这让我想起来之前学过的Java微基准测试框…
阅读更多...
记录些MySQL题集（2）

记录些MySQL题集（2）

MySQL 不使用limit的分页查询 limit问题：limit，offset递增问题。随着offset的增加，条数不变，耗时却增加了。 limit 0,10 耗时1ms limit 300000,10 耗时152ms limit 600000,10 耗时312ms 毫秒级别可能没感觉。假…
阅读更多...
java:aocache 与Spring Aop兼容问题

java:aocache 与Spring Aop兼容问题

本文适用于所有AspectJ与Spring AOP混用的场景。 Spring AOP 是基于动态代理的实现AOP，基于 JDK代理和CGLib代理实现运行时织入（runtime weaving）。 Spring AOP的切面定义沿用了ASpectJ的注解体系，所以在Spring体系中注解定义切面…
阅读更多...
Java 将图片转base64和base64转图片

Java 将图片转base64和base64转图片

工具 Base64 和 图片互转。 导入的依赖 <!-- https://mvnrepository.com/artifact/com.sun.xml.bind/jaxb-impl --><dependency><groupId>com.sun.xml.bind</groupId><artifactId>jaxb-impl</artifactId><version>4.0.5</versi…
阅读更多...
【Hot100】LeetCode—118. 杨辉三角

【Hot100】LeetCode—118. 杨辉三角

目录 题目1- 思路2- 实现⭐118. 杨辉三角——题解思路 3- ACM 实现 题目 原题连接&#xff1a;118. 杨辉三角 1- 思路 思路 爬楼梯&#xff1a;动规五部曲 2- 实现 ⭐118. 杨辉三角——题解思路 class Solution {List<List<Integer>> res new ArrayList<&g…
阅读更多...
嵌入式全栈设计思路：STM32G4+ChibiOS+FreeRTOS+PID控制+PFC算法构建高效智能电源管理系统（附代码示例）

嵌入式全栈设计思路：STM32G4+ChibiOS+FreeRTOS+PID控制+PFC算法构建高效智能电源管理系统（附代码示例）

智能电源管理系统是一个基于STM32G4微控制器的高性能数字电源控制解决方案。本项目旨在设计一个功能全面、高效稳定的电源管理系统,可广泛应用于工业控制、新能源、通信设备等领域。 1.1 系统主要特点 高精度数字电源控制&#xff1a;利用STM32G4的高性能ADC和定时器,实现精确…
阅读更多...
2024年肥西县“北斗·劳技科普进校园”赛事活动圆满举行

2024年肥西县“北斗·劳技科普进校园”赛事活动圆满举行

2024年6月13日肥西县“北斗劳技科普进校园”赛事活动在肥西实验高级中学圆满举行。本次赛事由肥西县关心下一代工作委员会和肥西县教育体育局主办&#xff0c;肥西县航空航海模型协会承办&#xff0c;肥西县实验高级中学协办&#xff0c;并得到了赛哆哆、凡尼科技中心和肥西艾瞳…
阅读更多...
为什么渲染农场渲染的是帧，而不是视频？

为什么渲染农场渲染的是帧，而不是视频？

在3D动画产业的壮阔画卷中&#xff0c;渲染农场作为幕后英雄&#xff0c;以其庞大的计算能力支撑起无数视觉奇观的诞生。这些由高性能计算机集群构成的系统&#xff0c;通过独特的逐帧渲染策略&#xff0c;解锁了单机难以企及的创作自由与效率。本文将深入剖析这一策略背后的逻…
阅读更多...
springcloud使用微服务的搭建

springcloud使用微服务的搭建

微服务的搭建 1.配置对应信息 Springboot 、springcloud、springcloud alibaba对应关系 https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E 2.pom.xml的配置 2.1 总项目pom.xml引入依赖 <parent><groupId>org.sprin…
阅读更多...
从库存超卖问题分析锁和分布式锁的应用（二）

从库存超卖问题分析锁和分布式锁的应用（二）

本文从一个经典的库存超卖问题分析说明常见锁的应用&#xff0c;假设库存资源存储在Redis里面。 假设我们的减库存代码如下&#xff1a; Autowired StringRedisTemplate redisTemplate;public void deduct(){String stock redisTemplate.opsForValue().get("stock"…
阅读更多...
docker desktop历史版本安装

docker desktop历史版本安装

1.安装choco Windows安装 choco包管理工具-CSDN博客 2.通过choco安装 下面例子为安装旧版2.3.0.2,其它版本类似 Chocolatey Software | Docker Desktop 2.3.0.2 https://download.docker.com/win/stable/45183/Docker%20Desktop%20Installer.exe choco install docker-des…
阅读更多...
linux高级编程（网络）（www，http，URL）

linux高级编程（网络）（www，http，URL）

数据的封包和拆包 封包&#xff1a; 应用层数据&#xff08;例如HTTP请求&#xff09;被传递给传输层。传输层&#xff08;TCP&#xff09;在数据前添加TCP头部&#xff08;包含端口号、序列号等&#xff09;。网络层&#xff08;IP&#xff09;在TCP段前添加IP头部&#xff…
阅读更多...
【从0到1进阶Redis】主从复制 — 主从机宕机测试

【从0到1进阶Redis】主从复制 — 主从机宕机测试

上一篇&#xff1a;【从0到1进阶Redis】主从复制 测试&#xff1a;主机断开连接&#xff0c;从机依旧连接到主机的&#xff0c;但是没有写操作&#xff0c;这个时候&#xff0c;主机如果回来了&#xff0c;从机依旧可以直接获取到主机写的信息。 如果是使用命令行&#xff0c;来…
阅读更多...
底软驱动 | 大厂面试爱考的C++内存相关

底软驱动 | 大厂面试爱考的C++内存相关

文章目录 C内存相关C内存分区C对象的成员函数存放在内存哪里 堆和栈的区别堆和栈的访问效率“野指针”有了malloc/free为什么还要new/deletealloca内存崩溃C内存泄漏的几种情况内存对齐柔性数组参考推荐阅读 C内存相关 本篇介绍了 C 内存相关的知识。 C内存分区 在C中&#…
阅读更多...
【python学习】numpy第三方库的定义、功能、使用场景和使用以及遇到的一些问题

【python学习】numpy第三方库的定义、功能、使用场景和使用以及遇到的一些问题

引言 python学习学习到第三方库知识&#xff0c;首先学习的就是机器学习以及对应的numpy第三方库 文章目录 引言一、numpy第三方库的定义二、numpy第三方库的功能2.1数组操作2.2 线性代数计算2.3 随机数生成2.4 文件读写 三、numpy第三方库的使用场景3.1需要进行数值计算3.2 需…
阅读更多...
PyCharm软件初始化配置

PyCharm软件初始化配置

安装完pycharm后&#xff0c;需要对其进行个性化设置&#xff0c;分别设置方法如下 目录 一、修改主题二、修改默认字体和大小三、设置拖动滚轮改变字体大小四、常见快捷键 一、修改主题 1、界面右上角点击红框的内容 2、选择Theme选项 3、选择对应的主题 第一二个是白色主题…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023