鸿蒙UI（ArkUI-方舟UI框架）- 使用文本

返回主章节 → 鸿蒙UI（ArkUI-方舟UI框架）

文本使用

文本显示 (Text/Span)

Text是文本组件，通常用于展示用户视图，如显示文章的文字内容。Span则用于呈现显示行内文本。

创建文本

string字符串
	Text("我是一段文本")

在这里插入图片描述

引用Resource资源
资源引用类型可以通过**$r**创建Resource类型对象，文件位置为/resources/base/element/string.json。

	Text($r('app.string.module_desc')).baselineOffset(0).fontSize(30).border({ width: 1 }).padding(10).width(300)

在这里插入图片描述

添加子组件

Span只能作为Text和RichEditor组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。

创建Span
Text('我是Text') {Span('我是Span')
}
.padding(10)
.borderWidth(1)

在这里插入图片描述

设置文本装饰线及颜色

通过decoration设置文本装饰线及颜色。

	Text() {Span('我是Span1，').fontSize(16).fontColor(Color.Grey).decoration({ type: TextDecorationType.LineThrough, color: Color.Red })Span('我是Span2').fontColor(Color.Blue).fontSize(16).fontStyle(FontStyle.Italic).decoration({ type: TextDecorationType.Underline, color: Color.Black })Span('，我是Span3').fontSize(16).fontColor(Color.Grey).decoration({ type: TextDecorationType.Overline, color: Color.Green })}.borderWidth(1).padding(10)

在这里插入图片描述

通过textCase设置文字一直保持大写或者小写状态。
	Text() {Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase)}.borderWidth(1).padding(10)

在这里插入图片描述

添加事件

由于Span组件无尺寸信息，事件仅支持添加点击事件onClick。

	Text() {Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase).onClick(() => {console.info('我是Span——onClick');})}

自定义文本样式

通过textAlign属性设置文本对齐样式。
	Text('左对齐').width(300).textAlign(TextAlign.Start).border({ width: 1 }).padding(10)Text('中间对齐').width(300).textAlign(TextAlign.Center).border({ width: 1 }).padding(10)Text('右对齐').width(300).textAlign(TextAlign.End).border({ width: 1 }).padding(10)

在这里插入图片描述

通过textOverflow属性控制文本超长处理，textOverflow需配合maxLines一起使用（默认情况下文本自动折行）。
	Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.').width(250).textOverflow({ overflow: TextOverflow.None }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)Text('我是超长文本，超出的部分显示省略号。I am an extra long text, with ellipses displayed for any excess。').width(250).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)Text('当文本溢出其尺寸时，文本将滚动显示。When the text overflows its dimensions, the text will scroll for displaying.')       .width(250).textOverflow({ overflow: TextOverflow.MARQUEE })                 .maxLines(1)       .fontSize(12).border({ width: 1 }).padding(10)

在这里插入图片描述

通过lineHeight属性设置文本行高。
	Text('This is the text with the line height set. This is the text with the line height set.').width(300).fontSize(12).border({ width: 1 }).padding(10)Text('This is the text with the line height set. This is the text with the line height set.').width(300).fontSize(12).border({ width: 1 }).padding(10).lineHeight(20)

在这里插入图片描述

通过decoration属性设置文本装饰线样式及其颜色。
	Text('This is the text').decoration({type: TextDecorationType.LineThrough,color: Color.Red}).borderWidth(1).padding(10).margin(5)Text('This is the text').decoration({type: TextDecorationType.Overline,color: Color.Red}).borderWidth(1).padding(10).margin(5)Text('This is the text').decoration({type: TextDecorationType.Underline,color: Color.Red}).borderWidth(1).padding(10).margin(5)

在这里插入图片描述

通过baselineOffset属性设置文本基线的偏移量。
	Text('This is the text content with baselineOffset 0.').baselineOffset(0).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)Text('This is the text content with baselineOffset 30.').baselineOffset(30) //基线往上偏移.fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)Text('This is the text content with baselineOffset -20.').baselineOffset(-20) //基线往下偏移.fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

在这里插入图片描述

通过letterSpacing属性设置文本字符间距。
	Text('This is the text content with letterSpacing 0.').letterSpacing(0).fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)Text('This is the text content with letterSpacing 3.').letterSpacing(3) //字符间距变大.fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)Text('This is the text content with letterSpacing -1.').letterSpacing(-1) //字符间距变小.fontSize(12).border({ width: 1 }).padding(10).width('100%').margin(5)

在这里插入图片描述

通过minFontSize与maxFontSize自适应字体大小。

minFontSize用于设置文本的最小显示字号，maxFontSize用于设置文本的最大显示字号。这两个属性必须同时设置才能生效，并且需要与maxLines属性或布局大小限制配合使用，单独设置任一属性将不会产生效果。

	Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为1').width(250).maxLines(1).maxFontSize(30).minFontSize(5).border({ width: 1 }).padding(10).margin(5)Text('我的最大字号为30，最小字号为5，宽度为250，maxLines为2').width(250).maxLines(2).maxFontSize(30).minFontSize(5).border({ width: 1 }).padding(10).margin(5)Text('我的最大字号为30，最小字号为15，宽度为250,高度为50').width(250).height(50).maxFontSize(30).minFontSize(15).border({ width: 1 }).padding(10).margin(5)Text('我的最大字号为30，最小字号为15，宽度为250,高度为100').width(250).height(100).maxFontSize(30).minFontSize(15).border({ width: 1 }).padding(10).margin(5)

在这里插入图片描述

通过textCase属性设置文本大小写。
	Text('This is the text content with textCase set to Normal.').textCase(TextCase.Normal).padding(10).border({ width: 1 }).padding(10).margin(5)// 文本全小写展示Text('This is the text content with textCase set to LowerCase.').textCase(TextCase.LowerCase).border({ width: 1 }).padding(10).margin(5)// 文本全大写展示Text('This is the text content with textCase set to UpperCase.').textCase(TextCase.UpperCase).border({ width: 1 }).padding(10).margin(5)

在这里插入图片描述

通过copyOption属性设置文本是否可复制粘贴。
	Text("这是一段可复制文本").fontSize(30).copyOption(CopyOptions.InApp)

在这里插入图片描述

添加事件

Text组件可以添加通用事件，可以绑定onClick、onTouch等事件来响应操作。

Text('点我').onClick(() => {console.info('我是Text的点击响应事件');})

场景示例

该示例通过maxLines、textOverflow、textAlign、constraintSize属性展示了热搜榜的效果。

// xxx.ets
@Entry
@Component
struct TextExample {build() {Column() {Row() {Text("1").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })Text("我是热搜词条1").fontSize(12).fontColor(Color.Blue).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }).fontWeight(300)Text("爆").margin({ left: 6 }).textAlign(TextAlign.Center).fontSize(10).fontColor(Color.White).fontWeight(600).backgroundColor(0x770100).borderRadius(5).width(15).height(14)}.width('100%').margin(5)Row() {Text("2").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })Text("我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2 我是热搜词条2").fontSize(12).fontColor(Color.Blue).fontWeight(300).constraintSize({ maxWidth: 200 }).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })Text("热").margin({ left: 6 }).textAlign(TextAlign.Center).fontSize(10).fontColor(Color.White).fontWeight(600).backgroundColor(0xCC5500).borderRadius(5).width(15).height(14)}.width('100%').margin(5)Row() {Text("3").fontSize(14).fontColor(Color.Orange).margin({ left: 10, right: 10 })Text("我是热搜词条3").fontSize(12).fontColor(Color.Blue).fontWeight(300).maxLines(1).constraintSize({ maxWidth: 200 }).textOverflow({ overflow: TextOverflow.Ellipsis })Text("热").margin({ left: 6 }).textAlign(TextAlign.Center).fontSize(10).fontColor(Color.White).fontWeight(600).backgroundColor(0xCC5500).borderRadius(5).width(15).height(14)}.width('100%').margin(5)Row() {Text("4").fontSize(14).fontColor(Color.Grey).margin({ left: 10, right: 10 })Text("我是热搜词条4 我是热搜词条4 我是热搜词条4 我是热搜词条4 我是热搜词条4").fontSize(12).fontColor(Color.Blue).fontWeight(300).constraintSize({ maxWidth: 200 }).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })}.width('100%').margin(5)}.width('100%')}
}

在这里插入图片描述

文本输入 (TextInput/TextArea)

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法请参考TextInput、TextArea。

创建输入框

设置输入框类型

自定义样式

添加事件

场景示例

富文本（RichEditor）

RichEditor是支持图文混排和文本交互式编辑的组件，通常用于响应用户对图文混合内容的输入操作，例如可以输入图文的评论区。具体用法参考RichEditor。

图标小符号 (SymbolGlyph/SymbolSpan)

属性字符串（StyledString/MutableStyledString）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/13888.html

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

相关文章

ubuntu20使用tigervnc远程桌面配置记录

ubuntu20使用tigervnc远程桌面配置记录

一、安装tigervnc sudo apt install tigervnc-common sudo apt install tigervnc-standalone-server二、增加配置文件 安装完后新增配置文件：vim ~/.vnc/xstartup #!/bin/sh #Uncomment the following two lines for normal desktop: #unset SESSION_MANAGER #ex…
阅读更多...
如何使用el-table的多选框

如何使用el-table的多选框

对el-table再次封装，使得功能更加强大！ 本人在使用el-table时，因为用到分页，导致上一页勾选的数据在再次返回时，没有选中，故在原有el-table组件的基础之上再次进行了封装。 1.首先让某些不需要勾选的列表进…
阅读更多...
【银河麒麟高级服务器操作系统】系统日志Call trace现象分析及处理全流程

【银河麒麟高级服务器操作系统】系统日志Call trace现象分析及处理全流程

了解更多银河麒麟操作系统全新产品，请点击访问 麒麟软件产品专区：https://product.kylinos.cn 开发者专区：https://developer.kylinos.cn 文档中心：https://document.kylinos.cn 服务器环境以及配置 系统环境 物理机/虚拟机/云…
阅读更多...
杭州某小厂面试

杭州某小厂面试

问的都是基础知识，主要是三个部分：计网，数据库，java。计网答得挺好，数据答得一般，Java答得一坨。 目录 1.TCP/IP协议的5层模型 2.3次握手和4次挥手 3.操作系统中的进程和线程的区别 4.lunix top 命令看…
阅读更多...
k8s网络插件及基础命令

k8s网络插件及基础命令

一、k8s的cni网络插件 1.k8s的内部网络模式 pod内的容器与容器之间的通信。一个节点上的pod之间的通信，docker0网桥直接通信。不同节点上的pod之间的通信：通过物理网卡的ip地址和其他节点上的物理网卡的设备进行通信，然后把流量转发到指定的…
阅读更多...
Zookeeper是如何解决脑裂问题的？

Zookeeper是如何解决脑裂问题的？

大家好，我是锋哥。今天分享关于【Zookeeper是如何解决脑裂问题的？】面试题。希望对大家有帮助； Zookeeper是如何解决脑裂问题的？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Zookeeper 通过多种机制来解决脑裂&…
阅读更多...
判断您的Mac当前使用的是Zsh还是Bash：echo $SHELL、echo $0

判断您的Mac当前使用的是Zsh还是Bash：echo $SHELL、echo $0

要判断您的Mac当前使用的是Zsh还是Bash，可以使用以下方法： 查看默认Shell: 打开“终端”应用程序，然后输入以下命令： echo $SHELL这将显示当前默认使用的Shell。例如，如果输出是/bin/zsh，则说明您使用的是Z…
阅读更多...
web直播弹幕抓取分析 signature

web直播弹幕抓取分析 signature

声明: 本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 前言 最近遇到太多难点了卡了很久&am…
阅读更多...
使用Deepseek搭建本地知识库-Cherry Studio

使用Deepseek搭建本地知识库-Cherry Studio

Cherry Studio 支持多模型服务的 Windows/macOS GPT 客户端 GITHUB：CherryHQ/cherry-studio CSDN资源：cherry studio Cherry Studio 是一个支持多模型服务的桌面客户端，为专业用户而打造，内置 30 多个行业的智能助手&#xff0c…
阅读更多...
Node.js 环境配置

Node.js 环境配置

什么是 Node.js Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行时环境，它允许你在服务器端运行 JavaScript。传统上，JavaScript 主要用于浏览器中的前端开发，而 Node.js 使得 JavaScript 也能够在服务器上执行，…
阅读更多...
面向对象程序设计-实验2

面向对象程序设计-实验2

题目1 6-1 使用动态内存分配的冒泡排序。 代码清单&#xff1a; #include <iostream> using namespace std; int* bubble_sort(int n);/* 对长度为n的数组执行冒泡排序 */ int main() { int n; cin >> n; int* a bubble_sort(n); for (int i 0; i < n; i)…
阅读更多...
集成Google Maps页面提示[For development purposes only]解决方案

集成Google Maps页面提示[For development purposes only]解决方案

问题描述 填写Google Maps JavaScript API密钥之后（https://console.cloud.google.com/apis/credentials/key/2fb9924f-4dc6-4e77-b26f-085b67f48ae0?inv=1&invt=Abo68g&project=deft-velocity-450208-t8），加载Google Maps JavaScript API会出现这样的显示： 问题…
阅读更多...
深浅拷贝~

深浅拷贝~

深浅拷贝&#xff1a;直接赋值给的是地址&#xff0c;如果修改赋值后的变量&#xff0c;实际上连同原变量的值一并修改了。 浅拷贝 展开运算符 {...obj} 拷贝对象 Object.assign(新&#xff0c;旧) 深拷贝 递归&#xff1a;自己调用自己 以下实际是浅拷贝 递归调用处理数组问题…
阅读更多...
PySpark学习笔记5-SparkSQL

PySpark学习笔记5-SparkSQL

sparkSql的数据抽象有两种。 一类是data set适用于java和Scala 一类是data frame适用于java&#xff0c;Scala&#xff0c;python 将r d d转换为data frame #方式一 df spark.createDataFrame(rdd,schema[name,age]) #方式二 schema Structtype(). add(id,integertype(),nu…
阅读更多...
【医院绩效管理专题】2.绩效管理：医院发展的核心驱动力

【医院绩效管理专题】2.绩效管理：医院发展的核心驱动力

医院成本核算、绩效管理、运营统计、内部控制、管理会计专题索引 一、引言 在当今医疗行业快速发展的背景下，医院管理面临着日益复杂的挑战。绩效管理作为医院管理的核心组成部分，对于提升医院运营效率、优化医疗服务质量以及实现可持续发展具有举足轻重的作用。它不仅是医…
阅读更多...
unity学习32：角色相关1，基础移动控制

unity学习32：角色相关1，基础移动控制

目录 0 应用商店 1 角色上新增CharacterController 组件 1.1 角色上新增CharacterController 组件 1.2 如果没有这个则会报错​编辑 2 速度 2.1 默认速度 2.2 修改速度为按时间计算 2.2 movespeed&#xff0c; 3 测试移动的代码 3.1 CharacterController 变量的声明…
阅读更多...
构建复杂且高效的人机协作工作流?Agentic Workflows

构建复杂且高效的人机协作工作流?Agentic Workflows

智能创作引擎架构设计 核心原理 一个 AI 原生创作引擎&#xff0c;通过自由形式的画布界面&#xff0c;结合多线程对话、知识库 RAG 集成、上下文记忆、智能搜索和所见即所得的 AI 编辑器等功能&#xff0c;帮助用户轻松将想法转化为生产级内容。 模块详解 1. 前端模块 (apps/w…
阅读更多...
H266/VVC 环路滤波中去块滤波 DF 技术

H266/VVC 环路滤波中去块滤波 DF 技术

去块滤波 DF H266 中去方块滤波 DF 过程类似 HEVC 中处理过程&#xff0c;但也引进了一些新技术&#xff0c;用于去除方块效应。方块效应指编码块边界处的不连续现象。方块效应的成因主要是基于块的编码过程中&#xff0c;各个块的预测、 变换、量化等过程相互独立&#xff0c;…
阅读更多...
Python设计模式 - 原型模式

Python设计模式 - 原型模式

定义 原型模式是一种创建型设计模式&#xff0c;它可以通过复制现有对象来创建新对象&#xff0c;而不是直接实例化新的对象。 结构 抽象原型&#xff08;Prototype&#xff09;&#xff1a;声明 clone() 方法&#xff0c;以便派生类实现克隆自身的能力。具体原型&#xff08…
阅读更多...
电脑运行黑屏是什么原因？原因及解决方法

电脑运行黑屏是什么原因？原因及解决方法

电脑运行黑屏是指电脑在正常开机或使用过程中&#xff0c;突然出现屏幕变黑&#xff0c;无法显示任何内容的现象。这种现象可能会给用户带来很多不便&#xff0c;甚至造成数据丢失或硬件损坏。那么&#xff0c;电脑运行黑屏是什么原因呢&#xff1f;下面我们将分析几种可能的原…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023