鸿蒙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多万…
阅读更多...
vue 项目代码架构

vue 项目代码架构

Vue项目的代码架构通常遵循一定的组织结构和约定，以提高项目的可维护性、可扩展性和可读性。以下是对Vue项目代码架构的详细解析： 一、项目目录结构 Vue项目的目录结构通常包括以下几个关键部分： 根目录： package.json&#x…
阅读更多...
Linux下解压.tar.gz文件

Linux下解压.tar.gz文件

.tar.gz 是一种常用的压缩包格式，尤其在Unix、Linux以及macOS系统中非常普遍。这个格式结合了两种不同的功能： Tar (.tar): “Tar” 是“Tape Archive”的缩写，最初是为了将数据备份到磁带上而设计的。Tar命令可以将多个文件和目录打包成一个…
阅读更多...
UART串口通信实验

UART串口通信实验

一.通信种类 1.1按照数据通信方式 1.1.1串行通信 优点：占用的引脚少，成本低 缺点：传输速度慢 适用场合：长距离、低速率的通信场合 1.1.2并行通信 优点：传输速率快 缺点：占用引脚多，成本…
阅读更多...
Java学习笔记整理: 关于设计模式:模板方法模式 2024/7/10；

Java学习笔记整理: 关于设计模式:模板方法模式 2024/7/10；

模板方法模式 自理解:通过指定流程创建模板类并写入指定方法和抽象方法要求子类重写,然后创建类继承该模板类进行统一操作; 优点 1、封装不变部分，扩展可变部分。 2、提取公共代码，便于维护。 3、行为由父类控制，子类实现。 缺点 每一个不同的…
阅读更多...
【开源项目的机遇与挑战】探索、贡献与应对

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

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

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

通过 vscode 远程连接服务器时出现了连接不上，而且一直要循环输入密码的问题，可能是因为上次异常退出导致。 主要解决思路是删除当前 vscode 远端服务后，重新建立连接。 解决方法一 在 vscode 端接口删除 vscode 服务。 View->Commond…
阅读更多...
“超级攻略：如何快速排查和优化慢SQL，提升系统速度！“

“超级攻略：如何快速排查和优化慢SQL，提升系统速度！“

慢查询指的是数据库中执行时间超过指定阈值的 SQL 语句。不同业务场景下，这个阈值通常各不相同。在我们公司内部，这个阈值被设定为 1 秒钟。也就是说，任何执行时间超过 1 秒的 SQL 语句都会被视为慢查询。 对慢查询进行问题排查通常分为以下…
阅读更多...
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 配…
阅读更多...
arm 版的 deb、rpm、AppImage 都有什么区别

arm 版的 deb、rpm、AppImage 都有什么区别

qq arm 版的 deb、rpm 和 AppImage 格式之间存在几个关键区别。以下是对这些区别的详细解释： 包管理系统与兼容性： deb：是Debian及其衍生发行版（如Ubuntu）中使用的软件包格式。这些系统使用dpkg命令来管理deb包&#…
阅读更多...
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 …
阅读更多...
最新等保测评要求与企业应对策略

最新等保测评要求与企业应对策略

等保（等级保护）是中国网络安全的基本制度之一，旨在根据信息系统的安全级别，实施相应的保护措施。等保2.0在2019年底正式实施，它对信息系统进行了更细致的分类，并提出了更全面的安全要求。最新的等保测评要求…
阅读更多...
vue3 学习笔记03 -- scss的使用

vue3 学习笔记03 -- scss的使用

vue3 学习笔记03 – scss的使用 项目中结合 SCSS 可以很方便地管理样式 安装依赖 npm install -D sass sass-loader配置scss支持 export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {//define global scss variablescss: {javascriptEnabled: true,…
阅读更多...
在Linux上搭建服务器之综合实验(web,dns,防火墙，SELinux)

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

其实验简图如下： 解读： 本实验需要完成4部分内容，web服务器的搭建，主从dns服务器的搭建，防火墙的开启，以及SELinux设置为强制模式。 首先dns主服务器上配置web服务（其中我本机的IP为192.168.5.…
阅读更多...
Memcached故障恢复秘籍：构建弹性缓存系统

Memcached故障恢复秘籍：构建弹性缓存系统

标题：Memcached故障恢复秘籍：构建弹性缓存系统 在分布式缓存系统中，Memcached的稳定性和可靠性至关重要。故障恢复机制确保了在面对节点故障或网络问题时，Memcached能够快速恢复正常运行。本文将深入探讨Memcached的故障恢复机制…
阅读更多...
最新文章

Copyright @ 2022~2023