鸿蒙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.rhkb.cn/news/378110.html

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

相关文章

浅析stm32启动文件

浅析stm32启动文件

浅析stm32启动文件 文章目录 浅析stm32启动文件1.什么是启动文件？2.启动文件的命名规则3.stm32芯片的命名规则 1.什么是启动文件？ 我们来看gpt给出的答案： STM32的启动文件是一个关键的汇编语言源文件，它负责在微控制器上电或复位…
阅读更多...
探索数据结构与算法的奇妙世界 —— Github开源项目推荐《Hello 算法》

探索数据结构与算法的奇妙世界 —— Github开源项目推荐《Hello 算法》

在浩瀚的编程与计算机科学领域中，数据结构与算法无疑是每位开发者攀登技术高峰的必经之路。然而，对于初学者而言，这条路往往布满了荆棘与挑战。幸运的是，今天我要向大家推荐一个令人振奋的项目——《Hello Algo》，它正…
阅读更多...
在 Vue3 + Electron 中使用预加载脚本(preload)

在 Vue3 + Electron 中使用预加载脚本(preload)

文章目录 一、什么是预加载脚本(preload)，为什么我们需要它二、通过预加载脚本暴露相关 API 至渲染进程1、实现获取系统默认桌面路径功能2、向剪切板写入内容3、使用系统默认浏览器访问目标 url4、使用文件选择对话框 三、参考资料 一、什么是预加载脚本(preload)&a…
阅读更多...
负载测试和功率分析中负载箱的重要作用

负载测试和功率分析中负载箱的重要作用

在负载测试和功率分析中，负载箱扮演着至关重要的角色。以下是负载箱在这两个方面的重要作用： 一、负载测试中的重要作用 模拟实际负载条件： 负载箱能够模拟各种复杂的负载条件，包括电阻性负载、电感性负载、电容性负载等&#x…
阅读更多...
【HarmonyOS开发】弹窗交互（promptAction ）

【HarmonyOS开发】弹窗交互（promptAction ）

实现效果 点击按钮实现不同方式的弹窗showToast showDialog showActionMenu 代码实现 1.引入’ohos.promptAction’ import promptAction from ohos.promptAction;2.通过promptAction 实现系统既定的弹窗 import promptAction from ohos.promptAction;Entry Component st…
阅读更多...
Spring-Spring、IoC、DI、注解开发

Spring-Spring、IoC、DI、注解开发

1、Spring是什么 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器(框架)。 Spring整体架构 Spring优点： Spring属于低侵入设计。IOC将对象之间的依赖关系交给Spring,降低组件之间的耦合，实现各个层之间的解耦，让我们更专注于业务…
阅读更多...
数据库内核研发学习之路（三）创建postgres内置函数

数据库内核研发学习之路（三）创建postgres内置函数

本章之前已经讲明白了我们的postgres如何进行编译安装，这是很重要的一步，接下来就是学会对postgres进行小的改动，然后保证依然能够顺利编译安装运行！ 本章续讲内容如何创建一个内置函数。 1、内置函数和用户自定义函数的区别 熟…
阅读更多...
如何在所有docker命令前加上一个sudo

如何在所有docker命令前加上一个sudo

如果当前登录用户不是root不用，使用docker命令的时候，需要在前面加上一个sudo 提升权限。 但是每次都加，就感觉特别的麻烦，如何简化呢？ 解决办法 打开你的shell配置文件（例如，如果你使用bash&am…
阅读更多...
多媒体软件开发选择Animate软件还是Unity3D软件？

多媒体软件开发选择Animate软件还是Unity3D软件？

以下内容可能有一些片面，因为多媒体软件开发平台有很多，因为接触Animate和Unity3D比较多，所以这里仅对这两款进行分析！ Animate软件与Unity3D软件都是经常在多媒体展馆中用来制作互动展示内容的，对于这两种开发平台&a…
阅读更多...
Java爬虫安全策略：防止TikTok音频抓取过程中的请求被拦截

Java爬虫安全策略：防止TikTok音频抓取过程中的请求被拦截

摘要 在当今互联网时代，数据采集已成为获取信息的重要手段。然而，随着反爬虫技术的不断进步，爬虫开发者面临着越来越多的挑战。本文将探讨Java爬虫在抓取TikTok音频时的安全策略，包括如何防止请求被拦截，以及如何提高…
阅读更多...
园区道路车辆智能管控视频解决方案，打造安全畅通的园区交通环境

园区道路车辆智能管控视频解决方案，打造安全畅通的园区交通环境

一、背景需求分析 随着企业园区的快速发展和扩张，道路车辆管理成为了保障园区秩序、提升运营效率及确保员工安全的重要任务。针对这一需求，旭帆科技TSINGSEE青犀提出了一种企业园区道路车辆管控的解决方案，通过整合视频监控、智能识别等技术…
阅读更多...
LVS+Nginx高可用集群---搭建高可用集群负载均衡

LVS+Nginx高可用集群---搭建高可用集群负载均衡

1.LVS简介 Lvs(Linux Virtual Server)：使用集群，对于整个用户来说是透明，用户访问的时候是单个高性能的整体。道理与nginx类似 LVS网络拓扑图：是基于四层。 用户通过浏览器发送请求，然后到达LVS.Lvs根据相应算法将…
阅读更多...
【TensorRT】Yolov5-DeepSORT 目标跟踪

【TensorRT】Yolov5-DeepSORT 目标跟踪

Yolov5-DeepSORT-TensorRT 本项目是 Yolo-DeepSORT 的 C 实现，使用 TensorRT 进行推理 🚀🚀🚀 开源地址：Yolov5_DeepSORT_TensorRT，求 star⭐ ~ 引言 ⚡ 推理速度可达25-30FPS，可以落地部署&…
阅读更多...
南京邮电大学统计学课程实验2 用EXCEL进行参数估计假设检验 指导

南京邮电大学统计学课程实验2 用EXCEL进行参数估计假设检验 指导

一、实验描述 实验目的 1、学会用Excel进行参数估计； 2、学会用Excel进行z检验-双样本平均差检验； 实验环境 实验中使用以下软件和硬件设备 （1）Windows XP操作系统； （2）PC机、EXCEL软件&…
阅读更多...
【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 卢小姐的生日礼物(200分) - 三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 卢小姐的生日礼物(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 ｜ 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 最新华为OD机试D卷目录，全、新、准，题目覆盖率达 95% 以上，支持题目在线评测…
阅读更多...
【Vue3】4个比较重要的设计模式！！

【Vue3】4个比较重要的设计模式！！

大家好，我是CodeQi！ 一位热衷于技术分享的码仔。 在我投身于前端开发的职业生涯期间，曾有一次承接了一个大型项目的维护工作。此项目运用的是 Vue 框架，然而其代码结构紊乱不堪，可维护性极度糟糕😫。 这使我深刻领会到，理解并运用 Vue 中的重要设计模式是何等关键！ …
阅读更多...
一个引发openssl崩溃问题案例

一个引发openssl崩溃问题案例

1 背景 最近用libevent写了一个https代理功能，在调研的时候，遇到了一个项目用到了本地多个openssl库引发的ssl握手崩溃问题。 2 开发环境 项目库版本号依赖项libeventlibevent-2.1.8-stableopenssl 1.1openssl1.0u / 1.1.1w / 3.3.1...... 3 问题现象…
阅读更多...
vue3表格使用拖拽排序

vue3表格使用拖拽排序

拖拽排序 实现效果实现步骤拖拽排序功能的完整代码 实现效果 实现步骤 先安装sortable.js库使用的vue文件中引入 import Sortablejs from ‘sortablejs’在进入页面后创建sortable实例在提交后端时可获取到排序后的最新table列表数据 sortable.js文档 拖拽排序功能的完整代码 …
阅读更多...
mars3d实现GraphicLayer获取当前相机视角内的可视点位（矢量数据

mars3d实现GraphicLayer获取当前相机视角内的可视点位（矢量数据

效果： mars3d实现GraphicLayer获取当前相机视角内的可视点位（矢量数据 相关依赖api： 1. map.getExtent(); 提取地球当前视域边界,示例：{ xmin: 70, xmax: 140, ymin: 0, ymax: 55, height: 0, } 2.graphicLayer.eachGraphic遍…
阅读更多...
小程序-2（WXML数据模板+WXSS模板样式+网络数据请求）

小程序-2（WXML数据模板+WXSS模板样式+网络数据请求）

目录 1.WXML数据模板 数据绑定 事件绑定 小程序中常用的事件 事件对象的属性列表 target和currentTarget的区别 bindtap的语法格式 在事件处理事件中为data中的数据赋值 事件传参与数据同步 事件传参 bindinput的语法绑定事件 文本框和data的数据同步 条件渲染 w…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023