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

已于 2024-07-22 11:28:36 修改
阅读量554 收藏 6
点赞数 4
分类专栏： 鸿蒙开发 文章标签： 鸿蒙 harmony 移动开发
于 2024-07-12 10:59:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y2653904/article/details/140370402
版权

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

目录

一，显示一个简单的文本

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

三，字体倾斜

四，字体加粗

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')
    }
  }
}

袁震
关注
专栏目录
【鸿蒙软件开发】文本显示（Text/Span）
m0_62599305的博客
10-23 3057
Text是文本组件，通常用于展示用户的视图，如显示文章的文字。具体用法可参考Text。通过textAlign属性设置文本对齐样式。Text('左对齐')Text('中间对齐')Text('右对齐')textAlign属性设置即可文本显示Text/Span。
HarmonyOS鸿蒙学习基础篇 - Text文本组件_鸿蒙text组件(1)
tencentes的博客
04-11 1081
从API version 9开始，该接口支持在ArkTS卡片中使用。
鸿蒙HarmonyOS常见组件开发：text文本
最新发布
2401_84917132的博客
08-14 1054
text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。
HarmonyOS（鸿蒙）——Text（文本）组件介绍
2401_84123005的博客
04-11 790
text_size | 文本大小 | float类型 | 表示字体大小的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。
HarmonyOS鸿蒙学习基础篇 - Text文本组件
2303_76218115的博客
01-24 3466
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。是可以显示一段文本的组件。该组件从API Version 7开始支持，从API version 9开始，该接口支持在ArkTS卡片中使用。
【鸿蒙】HarMonyOS之Text组件的常用属性
笔触狂放的博客
06-03 1705
Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。
HarmonyOS鸿蒙学习笔记（10）Flex中Text组件文字居中问题
菜鸟博客
09-20 2117
HarmonyOS Flex Text文字居中
HarmonyOS应用开发-marquee组件使用
04-18
在HarmonyOS的应用开发过程中，为了实现文本滚动的效果，我们可以使用`marquee`组件。此组件可以方便地帮助开发者实现动态展示文本的需求，适用于广告滚动、通知滚动等场景。 #### 创建项目 首先，我们需要在...
HarmonyOS应用开发--排序练习.docx
06-03
### HarmonyOS应用开发——排序练习知识点详解 #### 一、项目背景与目标 在本练习中，我们将通过创建一个简单的HarmonyOS应用来实现数字排序功能。用户可以在界面上输入数字，点击“提交”按钮后，该数字会被添加...
「前端+鸿蒙」鸿蒙应用开发-UI组件
AIGC大前端小王子
06-18 348
鸿蒙应用开发 - UI组件详解
HarmonyOS最新版基础认证题目（6月21日之后）
07-02
Text 是显示文本的组件基础之一，它可以包含子组件 Span,当 Text 与 Span同时配置文本内容时,Span 内容覆盖 Text 内容。** - **解析：** 错误。Text组件与Span组件可以组合使用，但Span内容并不会覆盖Text内容，...
鸿蒙os学习3：文本组件
weixin_61907621的博客
08-13 707
鸿蒙学习
HarmonyOS（鸿蒙）——Text（文本）组件介绍，帮助程序员提高核心竞争力的30条建议
2401_84149845的博客
04-08 936
text_size | 文本大小 | float类型 | 表示字体大小的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。
2. 鸿蒙JSUI开发 - 组件使用，样式布局，按键交互
tingle1314的专栏
11-15 783
2. JSUI开发 - 组件使用，样式布局，按键交互。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Marquee组件
zdh13370188237的博客
02-13 1530
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Marquee组件。
鸿蒙HarmonyOS开发，颜色资源配置文件添加及使用和自定义圆角背景,把自己踩的坑记下来！！！！
weixin_37191074的博客
06-07 2510
需要设置字体颜色边框颜色，想和Android一样写一个颜色的配置文件，查官方文档只需要在 resources > base > element文件夹下jia
HarmonyOS 组件通用属性之位置设置
weixin_45966674的博客
01-05 3427
这个markAnchor 它是相对于自己去移动的 说个词 相对定位 当然 它不会留自己原来的位置 但是 它是相对自己原来的位置 移动的 而且 它的 x y是反的 x 正值向左 负值向右 y正值向上 负值向下。我们还是 在元素下面 加上 .direction(Direction.) 就会弹出它的属性提示了。鸿蒙的 position也是定位语法 他是 x y两个轴方向控制 针对自己的父元素。就会弹出对齐方式的提示。然后 从第三个可以看出 我们这个是可以用百分比的。
HarmonyOS鸿蒙开发指南:基础组件 text开发指导
sybh的博客
01-09 790
Text是文本组件，用于呈现一段文本信息。具体用法请参考Text API。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

袁震

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值