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

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

目录

一，显示一个简单的文本

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

三，字体倾斜

四，字体加粗

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.mzph.cn/bicheng/45363.shtml

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

相关文章

2024最新国际版抖音TikTok安装教程，免root免拔卡安卓+iOS，附全套安装工具！

2024最新国际版抖音TikTok安装教程，免root免拔卡安卓+iOS，附全套安装工具！

我是阿星，今天给大家带来是2024年最新TikTok国际版抖音的下载和安装教程，而且还是免root免拔卡的那种，安卓和iOS都能用哦！由于某些原因，国内用户并不能使用TikTok。今天阿星就教一下大家怎么安装TikTok。 TikTok在全球…
阅读更多...
张爱华：身残志坚谱写人间大爱 推己及人彰显巾帼风采

张爱华：身残志坚谱写人间大爱 推己及人彰显巾帼风采

张爱华，女，1963年2月出生，响水县聚贤养老协会会长、响水县小尖镇爱华老年公寓院长。张爱华因患小儿麻痹症导致下肢重度残疾，但她身残志坚，通过创办服装厂慢慢走上致富之路。2011年，她先后筹资、贷款600多万…
阅读更多...
UART串口通信实验

UART串口通信实验

一.通信种类 1.1按照数据通信方式 1.1.1串行通信 优点：占用的引脚少，成本低 缺点：传输速度慢 适用场合：长距离、低速率的通信场合 1.1.2并行通信 优点：传输速率快 缺点：占用引脚多，成本…
阅读更多...
【开源项目的机遇与挑战】探索、贡献与应对

【开源项目的机遇与挑战】探索、贡献与应对

💓 博客主页：倔强的石头的CSDN主页 📝Gitee主页：倔强的石头的gitee主页 ⏩ 文章专栏：《热点时事》 期待您的关注 目录 引言 一：开源项目的发展趋势 🍃开源项目的蓬勃发展现状 🍃开…
阅读更多...
VSCode 远程反复输入密码不能链接问题解决

VSCode 远程反复输入密码不能链接问题解决

通过 vscode 远程连接服务器时出现了连接不上，而且一直要循环输入密码的问题，可能是因为上次异常退出导致。 主要解决思路是删除当前 vscode 远端服务后，重新建立连接。 解决方法一 在 vscode 端接口删除 vscode 服务。 View->Commond…
阅读更多...
vue 使用腾讯地图 标点 自定义瓦片 折线配置

vue 使用腾讯地图 标点 自定义瓦片 折线配置

vue 使用腾讯地图 标点 自定义瓦片 折线配置 申请腾讯地图秘钥 key 腾讯地图开发者 https://lbs.qq.com/dev/console/application/mine 腾讯地图开发文档 https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview 添加 key 代码中引入 // 入口文件 index.html // 填…
阅读更多...
【通信原理】其实QPSK就是一种特殊的QAM，即4-QAM

【通信原理】其实QPSK就是一种特殊的QAM，即4-QAM

文章目录 幅度调制和相位调制QPSK（Quadrature Phase Shift Keying）QAM（Quadrature Amplitude Modulation）QPSK作为4-QAMQPSK（Quadrature Phase Shift Keying）和QAM（Quadrature Amplitude Modulation）都是数字调制技术，用于在无线信号中传输数据。要理解“QPSK其实就是…
阅读更多...
新旧电脑数据转移方法

新旧电脑数据转移方法

随着科技的发展和电脑性能的不断提升，许多用户在工作和生活中都需要更换新电脑。当我们购买了一台新电脑后，如何将旧电脑中的数据转移到新电脑上成许多用户关注的问题。本文将详细介绍几种有效的电脑数据转移方法，帮助大家顺利完成数据迁移。…
阅读更多...
国产麒麟、uos在线编辑word文件并控制编辑区域(局部编辑)

国产麒麟、uos在线编辑word文件并控制编辑区域(局部编辑)

windows系统也适用，该插件可同时支持windows和国产系统 在实际项目开发中，以下场景可能会用到Word局部编辑功能： 合同审批公文流转策划设计报告汇签单招投标（标书文件）其他，有模板且需要不同人员协作编辑…
阅读更多...
06.TMS570LC43入门指南——中断操作

06.TMS570LC43入门指南——中断操作

06.TMS570LC43入门指南——中断操作 文章目录 06.TMS570LC43入门指南——中断操作一、简介二、中断（VIM）介绍2.1 VIM架构2.2 CPU 中断处理2.3 VIM中断通道映射2.4 中断请求默认分配 三、项目实现3.1 硬件部分3.2 软件部分3.2.1 HALCoGen 配置3.2.2 CCS 配…
阅读更多...
RK3588部署YOLOV8-seg的问题

RK3588部署YOLOV8-seg的问题

在使用YOLOV8-seg训练出来的pt模型转为onnx的时候，利用以下仓库地址转。 git clone https://github.com/airockchip/ultralytics_yolov8.git 在修改ultralytics/cfg/default.yaml中的task，mode为model为自己需要的内容后， 执行以下语句 cd …
阅读更多...
在Linux上搭建服务器之综合实验(web,dns,防火墙，SELinux)

在Linux上搭建服务器之综合实验(web,dns,防火墙，SELinux)

其实验简图如下： 解读： 本实验需要完成4部分内容，web服务器的搭建，主从dns服务器的搭建，防火墙的开启，以及SELinux设置为强制模式。 首先dns主服务器上配置web服务（其中我本机的IP为192.168.5.…
阅读更多...
thinkphp 生成邀请推广二维码，保存到服务器并接口返回给前端

thinkphp 生成邀请推广二维码，保存到服务器并接口返回给前端

根据每个人生成自己的二维码图片，接口返回二维码图片地址 生成在服务器的二维码图片 控制器 public function createUserQRcode(){$uid = input(uid);if
阅读更多...
深度学习编码解码结构-以及kreas简单实现

深度学习编码解码结构-以及kreas简单实现

图像分割中的编码解码结构（Encoder-Decoder Model）是一种广泛应用的网络架构，它有效地结合了特征提取（编码）和分割结果生成（解码）两个过程。以下是对图像分割中编码解码结构的详细解析&#xff…
阅读更多...
通过vagrant与VirtualBox 创建虚拟机

通过vagrant与VirtualBox 创建虚拟机

1.下载vagrant与VirtualBox【windows版本案例】 1.1 vagrant 下载地址 【按需下载】 https://developer.hashicorp.com/vagrant/install?product_intentvagranthttps://developer.hashicorp.com/vagrant/install?product_intentvagrant 1.2 VirtualBox 下载地址 【按需下载…
阅读更多...
lvs集群、NAT模式和DR模式、keepalive

lvs集群、NAT模式和DR模式、keepalive

目录 lvs集群概念 集群的类型：三种类型 系统可靠性指标 lvs集群中的术语 lvs的工作方式 NAT模式 lvs的工具 算法 实验 数据流向 步骤 一 、调度器配置（test1 192.168.233.10） 二、RS配置（nginx1和nginx2）…
阅读更多...
物理层与数据通信基础：构建稳定网络的关键

物理层与数据通信基础：构建稳定网络的关键

本章主要讨论物理层的基本概念、数据通信的基础知识、几种常用的信道复用技术以及互联网接入技术。对于具备通信基础知识的读者，可以有选择地学习本章内容。 本章重点内容 物理层的任务数据通信的基本概念常用的信道复用技术常用的互联网接入技术 2.1 物理层的基…
阅读更多...
深入理解FFmpeg--libavformat接口使用(一)

深入理解FFmpeg--libavformat接口使用(一)

libavformat（lavf）是一个用于处理各种媒体容器格式的库。它的主要两个目的是去复用（即将媒体文件拆分为组件流）和复用的反向过程（以指定的容器格式写入提供的数据）。它还有一个I/O模块，支持多种…
阅读更多...
5G与未来通信技术

5G与未来通信技术

随着科技的迅猛发展，通信技术也在不断演进。5G技术作为第五代移动通信技术，已成为现代通信技术的一个重要里程碑。本文将详细介绍5G及其对未来通信技术的影响，重点探讨超高速互联网和边缘网络的应用。 一、超高速互联网 1. 低延迟 5G技术最显…
阅读更多...
Seven layers of the metaverse

Seven layers of the metaverse

看到一篇关于元宇宙的文章，分享给大家，供大家参考。 随着物理世界和数字世界的融合，元宇宙正在推动我们数字能力的新边界。从人类身份、个性和声誉到资产、情感和历史，元宇宙的虚拟现实中可以以全新的方式进行交互、控制和体验。因…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023