第九节HarmonyOS 常用基础组件7-RichText

1、描述

富文本组件,解析并显示HTML格式文本。

富文本(RichText)是一种特殊的文本格式,它比普通文本更加丰富多彩。富文本可以包含各种字体、颜色、大小、图像、链接、表格、视频等元素,使文本更加生动、有趣。

2、接口

RichText(content:string)

3、参数

content - string - 必填 - 表示HTML格式的字符串。

4、事件

名称

描述

onStart(callback:() => void)

加载网页时触发。

onComplete(callback:() => void)

网页加载完成后触发。

5、属性

暂时只支持通用的四大属性:width、height、size、layoutWeight。由于padding、margin、constraintSize属性使用时与通用属性描述不符,暂不支持。

6、富文本支持解析的标签

名称

描述

<h1> --<h6>

标题从1-6

<p></p>

定义段落

<br/>

插入一个简单的换行

<font/>

规定文本字体样式

<hr/>

定义一条水平线

<image><image/>

定义图片

<div></div>

用于组合块级元素,里面包含其它标签

<i><i/>

定义为斜体文本

<u><u/>

带有下划线的文本

<style><style/>

定义html文档的样式信息

style

属性规定元素的行内样式,写在标签内部,在使用的时候需用引号来进行区分,并以; 间隔样式,style=‘width: 500px;height: 500px;border: 1px soild;margin: 0 auto;‘。

<script><script/>

定义客户端脚本

7、富文本使用场景

RichText组件底层复用了Web组件来提供基础能力,包括但不限于HTML页面的解析、渲染等。

但由于Web组件比较消耗资源,所以在一些重复使用RichText组件的场景下,比如在List下循环重复使用RichText时,会出现卡顿、滑动响应慢等现象。

8、实例

import router from '@ohos.router';@Entry
@Component
struct RichTextPage {@State message: string = '富文本组件,解析并显示HTML格式文本。'@State richText: string = '<h1 style="text-align: center;">h1标题</h1>' +'<h1 style="text-align: center;"><i>h1斜体</i></h1>' +'<h1 style="text-align: center;"><u>h1下划线</u></h1>' +'<h2 style="text-align: center;">h2标题</h2>' +'<h3 style="text-align: center;">h3标题</h3>' +'<p style="text-align: center;">p常规</p><hr/>' +'<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px</p>' +'<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;"></p>' +'<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>' +'<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;"/>';build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width('96%')Blank(12)RichText(this.richText).width('96%').height(500)Blank(12)Button("Progress文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/baseComponent/richText/RichTextDesc",})})}.width('100%')}}.padding({ top: 12, bottom: 12 })}
}

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

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

相关文章

数据的创建、调用、修改、删除存储过程,以及第一类丢失更新(回滚丢失)和 第二类丢失更新(覆盖丢失/两次更新问题)

数据的创建存储过程、调用存储过程、修改存储过程、删除存储过程&#xff0c;以及第一类丢失更新&#xff08;回滚丢失&#xff09;和 第二类丢失更新&#xff08;覆盖丢失/两次更新问题&#xff09; 文章目录 一、创建存储的语法二、调用存储过程三、修改存储过程四、删除存储…

Linux第16步_安装NFS服务

NFS&#xff08;Network File System&#xff09;是一种在网络上实现的分布式文件系统&#xff0c;它允许不同的操作系统和设备之间共享文件和资源。 在创建的linux目录下&#xff0c;再创建一个“nfs“文件夹&#xff0c;用来供nfs服务器使用&#xff0c;便于”我们的开发板“…

实现网页跟随系统主题切换

如何实现网页跟随系统主题切换&#xff1f;想必大家都是用过媒体查询media (prefers-color-scheme: dark) 实现亮/暗主题的切换&#xff0c;那如何让其跟随系统自动切换呢&#xff1f;在window对象上&#xff0c;有matchMedia这个API可以帮助我们解决这个问题。它和css中的媒体…

ssm基于java web 的QQ村旅游网站的设计+vue论文

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统旅游信息管理难度大&#xff0c;容错率低&#xff0c;管理…

【精通C语言】:深入解析C语言中的while循环

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; C语言详解 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、while循环1.1语法1.2 执行过程解析1.3 break1.4 continue &#x1f324;️全篇总结 &…

Vue3 使用 Teleport 封装 一个 Dialog

文章目录 什么是Teleport ?用法:1. 通过 to 指定传送的位置2. 禁用 teleport3. 共享一个 Teleport封装一个Dialog效果:什么是Teleport ? 是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 简单的说,Telep

关于kthread_stop的疑问(linux3.16)

线程一旦启动起来后&#xff0c;会一直运行&#xff0c;除非该线程主动调用do_exit函数&#xff0c;或者其他的进程调用kthread_stop函数&#xff0c;结束线程的运行。 之前找销毁内核线程的接口时&#xff0c;发现了kthread_stop这个接口。网上说这个函数能够销毁一个内核线程…

服务号怎么改为订阅号

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;很多小伙伴想把服务号改为订阅号&#xff0c;但是不知道改了之后具体有什么作用&#xff0c;今天跟大家具体讲解一下。首先我们知道服务号一个月只能发四次文章&#xff0c;但是订阅号每天都可以发…

VMware 安装 macOS虚拟机(附工具包)

VMware 安装 macOS虚拟机&#xff0c;在Windows上体验苹果macOS系统&#xff01; 安装教程&#xff1a;VMware 安装 macOS虚拟机VMware Workstation Pro 是一款强大的虚拟机软件&#xff0c;可让您在 Windows 电脑上运行 macOS 系统。只需简单几步操作&#xff0c;即可轻松安装…

Erupt即开即用的后台管理系统【告别前端代码】

一、引子 【零前端代码&#xff0c;几行Java注解&#xff0c;搞定后台管理系统】 如果只是自己内部公司使用的话&#xff0c;大多数功能都可以满足&#xff0c;剩下的就是自己添砖加瓦了。 我用这个主要是简单快捷&#xff0c;10分钟搭建一个简易的后台管理系统。 二、基本…

YOLOv5源码中的参数超详细解析(6)— common.py

前言:Hello大家好,我是小哥谈。YOLOv5是一种先进的目标检测算法,它可以实现快速和准确的目标检测。common.py文件是YOLOv5中的一个模块,它包含了一些常用的函数和类,用于定义网络结构中的各个模块。该文件中的函数和类被其他文件引用,用于构建整个YOLOv5模型。本节课就结…

1.5 Unity中的数据存储 PlayerPrefs、XML、JSON

Unity中的三种数据存储&#xff1a;数据存储也称为数据持久化 一、PlayerPrefs PlayerPrefs是Unity引擎自身提供的一个用于本地持久化保存与读取的类&#xff0c;以键值对的形式将数据保存在文件中&#xff0c;然后程序可以根据关键字提取数值。 PlayerPrefs类支持3种数据类…