devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：运维做开发 | 2024-07-15 10:24:39

赞

踩

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

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

目录

一，显示一个简单的文本

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

三，字体倾斜

四，字体加粗

1，简单的加粗

2，设置固定值加粗

五，设置文本框大小

六，设置文本框背景色

七，设置文字水平居中

八，设置背景圆角

九，添加边线

十，文字超长显示

1，超长截断

2，超长显示...

3，超长滚动

十一，设置文本行高

十二，设置文本字间距

十三，文字大小自适应

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

1，统一显示大写

2，统一小写

3，正常显示

十五，设置首行文本缩进

十六，添加子组件Span

一，显示一个简单的文本

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .alignRules({
  9.           top: { anchor: '__container__', align: VerticalAlign.Center },
  10.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  11.         })
  12.         .id('txt1')
  13.     }
  14.   }
  15. }

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

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontSize(30)
  9.         .fontColor("#22aaff")
  10.         .alignRules({
  11.           top: { anchor: '__container__', align: VerticalAlign.Center },
  12.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  13.         })
  14.         .id('txt1')
  15.     }
  16.   }
  17. }

三，字体倾斜

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontStyle(FontStyle.Italic)//斜体
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .alignRules({
  12.           top: { anchor: '__container__', align: VerticalAlign.Center },
  13.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  14.         })
  15.         .id('txt1')
  16.     }
  17.   }
  18. }

四，字体加粗

1，简单的加粗

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontWeight(FontWeight.Bold)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .alignRules({
  12.           top: { anchor: '__container__', align: VerticalAlign.Center },
  13.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  14.         })
  15.         .id('txt1')
  16.     }
  17.   }
  18. }

2，设置固定值加粗

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

900效果为：

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .alignRules({
  12.           top: { anchor: '__container__', align: VerticalAlign.Center },
  13.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  14.         })
  15.         .id('txt1')
  16.     }
  17.   }
  18. }

五，设置文本框大小

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(200) //高度
  13.         .alignRules({
  14.           top: { anchor: '__container__', align: VerticalAlign.Center },
  15.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  16.         })
  17.         .id('txt1')
  18.     }
  19.   }
  20. }

六，设置文本框背景色

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(200) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .alignRules({
  15.           top: { anchor: '__container__', align: VerticalAlign.Center },
  16.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  17.         })
  18.         .id('txt1')
  19.     }
  20.   }
  21. }

七，设置文字水平居中

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(200) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .alignRules({
  16.           top: { anchor: '__container__', align: VerticalAlign.Center },
  17.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  18.         })
  19.         .id('txt1')
  20.     }
  21.   }
  22. }

八，设置背景圆角

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(200) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .borderRadius(10) //背景圆角
  16.         .alignRules({
  17.           top: { anchor: '__container__', align: VerticalAlign.Center },
  18.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  19.         })
  20.         .id('txt1')
  21.     }
  22.   }
  23. }

九，添加边线

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("袁震")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(100) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .borderRadius(10) //背景圆角
  16.         .border({width: 2, color: '#000000'}) //添加边线
  17.         .alignRules({
  18.           top: { anchor: '__container__', align: VerticalAlign.Center },
  19.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  20.         })
  21.         .id('txt1')
  22.     }
  23.   }
  24. }

十，文字超长显示

1，超长截断

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("英雄联盟德玛西亚之力")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(100) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .borderRadius(10) //背景圆角
  16.         .maxLines(1)  //最大显示一行
  17.         .border({width: 2, color: '#000000'}) //边框
  18.         .textOverflow({overflow: TextOverflow.None}) //超长文字截断
  19.         .alignRules({
  20.           top: { anchor: '__container__', align: VerticalAlign.Center },
  21.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  22.         })
  23.         .id('txt1')
  24.     }
  25.   }
  26. }

2，超长显示...

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("英雄联盟德玛西亚之力")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(100) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .borderRadius(10) //背景圆角
  16.         .maxLines(1)  //最大显示一行
  17.         .border({width: 2, color: '#000000'}) //边框
  18.         .textOverflow({overflow: TextOverflow.Ellipsis}) //超长显示省略号
  19.         .alignRules({
  20.           top: { anchor: '__container__', align: VerticalAlign.Center },
  21.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  22.         })
  23.         .id('txt1')
  24.     }
  25.   }
  26. }

3，超长滚动

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("英雄联盟德玛西亚之力")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(100) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .borderRadius(10) //背景圆角
  16.         .maxLines(1)  //最大显示一行
  17.         .border({width: 2, color: '#000000'}) //边框
  18.         .textOverflow({overflow: TextOverflow.MARQUEE}) //超长滚动
  19.         .alignRules({
  20.           top: { anchor: '__container__', align: VerticalAlign.Center },
  21.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  22.         })
  23.         .id('txt1')
  24.     }
  25.   }
  26. }

十一，设置文本行高

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("英雄联盟德玛西亚之力")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(200) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .borderRadius(10) //背景圆角
  16.         .border({width: 2, color: '#000000'}) //边框
  17.         .lineHeight(60) //行高
  18.         .alignRules({
  19.           top: { anchor: '__container__', align: VerticalAlign.Center },
  20.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  21.         })
  22.         .id('txt1')
  23.     }
  24.   }
  25. }

十二，设置文本字间距

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("英雄联盟德玛西亚之力")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(200) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .borderRadius(10) //背景圆角
  16.         .border({width: 2, color: '#000000'}) //边框
  17.         .lineHeight(60) //行高
  18.         .letterSpacing(20) //字间距
  19.         .alignRules({
  20.           top: { anchor: '__container__', align: VerticalAlign.Center },
  21.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  22.         })
  23.         .id('txt1')
  24.     }
  25.   }
  26. }

十三，文字大小自适应

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

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("英雄联盟德玛西亚之力")
  8.         .fontWeight(900)//加粗
  9.         .fontSize(30)
  10.         .fontColor("#22aaff")
  11.         .width(200) //宽度
  12.         .height(200) //高度
  13.         .backgroundColor("#ccaabb") //背景色
  14.         .textAlign(TextAlign.Center)//文字水平居中
  15.         .borderRadius(10) //背景圆角
  16.         .border({width: 2, color: '#000000'}) //边框
  17.         .lineHeight(60) //行高
  18.         .minFontSize(15) //最小字体15
  19.         .maxFontSize(30) //最大字体30
  20.         .maxLines(1)  //最多显示一行
  21.         .alignRules({
  22.           top: { anchor: '__container__', align: VerticalAlign.Center },
  23.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  24.         })
  25.         .id('txt1')
  26.     }
  27.   }
  28. }

 

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

1，统一显示大写

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("abcd")
  8.         .fontWeight(900)//加粗
  9.         .textCase(TextCase.UpperCase) //字母大写
  10.         .fontSize(30)
  11.         .fontColor("#22aaff")
  12.         .width(200) //宽度
  13.         .height(200) //高度
  14.         .backgroundColor("#ccaabb") //背景色
  15.         .textAlign(TextAlign.Center)//文字水平居中
  16.         .borderRadius(10) //背景圆角
  17.         .border({width: 2, color: '#000000'}) //边框
  18.         .alignRules({
  19.           top: { anchor: '__container__', align: VerticalAlign.Center },
  20.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  21.         })
  22.         .id('txt1')
  23.     }
  24.   }
  25. }

2，统一小写

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("ABCD")
  8.         .fontWeight(900)//加粗
  9.         .textCase(TextCase.LowerCase) //字母小写
  10.         .fontSize(30)
  11.         .fontColor("#22aaff")
  12.         .width(200) //宽度
  13.         .height(200) //高度
  14.         .backgroundColor("#ccaabb") //背景色
  15.         .textAlign(TextAlign.Center)//文字水平居中
  16.         .borderRadius(10) //背景圆角
  17.         .border({width: 2, color: '#000000'}) //边框
  18.         .alignRules({
  19.           top: { anchor: '__container__', align: VerticalAlign.Center },
  20.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  21.         })
  22.         .id('txt1')
  23.     }
  24.   }
  25. }

3，正常显示

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("ABcd")
  8.         .fontWeight(900)//加粗
  9.         .textCase(TextCase.Normal) //字母正常显示
  10.         .fontSize(30)
  11.         .fontColor("#22aaff")
  12.         .width(200) //宽度
  13.         .height(200) //高度
  14.         .backgroundColor("#ccaabb") //背景色
  15.         .textAlign(TextAlign.Center)//文字水平居中
  16.         .borderRadius(10) //背景圆角
  17.         .border({width: 2, color: '#000000'}) //边框
  18.         .alignRules({
  19.           top: { anchor: '__container__', align: VerticalAlign.Center },
  20.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  21.         })
  22.         .id('txt1')
  23.     }
  24.   }
  25. }

十五，设置首行文本缩进

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("ABcdefghfsenfkbkbfgkgldfkledmsam")
  8.         .fontWeight(900)//加粗
  9.         .textCase(TextCase.Normal) //字母正常显示
  10.         .fontSize(30)
  11.         .fontColor("#22aaff")
  12.         .width(200) //宽度
  13.         .height(200) //高度
  14.         .backgroundColor("#ccaabb") //背景色
  15.         .borderRadius(10) //背景圆角
  16.         .border({width: 2, color: '#000000'}) //边框
  17.         .textIndent(10)//设置首行文本缩进
  18.         .alignRules({
  19.           top: { anchor: '__container__', align: VerticalAlign.Center },
  20.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
  21.         })
  22.         .id('txt1')
  23.     }
  24.   }
  25. }

十六，添加子组件Span

  1. @Entry
  2. @Component
  3. struct TestPage {
  4.  
  5.   build() {
  6.     RelativeContainer() {
  7.       Text("ABcdefghfsenfkbkbfgkgldfkledmsam"){
  8.         Span("我是子组件1")
  9.           .fontSize(20)
  10.           .fontColor("#000000")
  11.           .fontWeight(900)//加粗
  12.         Span("我是子组件2")
  13.           .fontSize(15)
  14.           .fontColor("#ffffff")
  15.         Span("我是3")
  16.           .fontSize(20)
  17.           .fontColor("#ffccdd")
  18.       }
  19.       .width(300) //宽度
  20.       .height(100) //高度
  21.       .backgroundColor("#ccaabb") //背景色
  22.       .borderRadius(10) //背景圆角
  23.       .border({width: 2, color: '#000000'}) //边框
  24.       .alignRules({
  25.         top: { anchor: '__container__', align: VerticalAlign.Center },
  26.         middle: { anchor: '__container__', align: HorizontalAlign.Center }
  27.       })
  28.       .id('txt1')
  29.     }
  30.   }
  31. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/828879
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号