第九节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.mzph.cn/news/601181.shtml

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

相关文章

【elastic search】下载安装、使用教程

目录 1.下载安装 1.1.ES&Kibana 1.2.分词器 2.操作 2.1.索引操作 2.1.1.索引的新增、删除、查找 2.1.2.数据类型 2.1.3.结构化 2.2.文档操作 2.2.1.文档的增、删、改 2.2.2.文档的查询 2.2.3.聚合操作 1.下载安装 1.1.ES&Kibana Kibana是一个开源的数据可…

WPF中MVVM手动实现PropertyChanged和RelayCommand

背景&#xff1a;PropertyChanged和Command总是没有记住怎么写 PropertyChanged&#xff1a; public event PropertyChangedEventHandler? PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName null) {PropertyChanged?.In…

vue3中Element Plus全局组件配置中文的两种方案

Element是一款用于制作页面样式&#xff0c;设计页面结构的框架。相比于其他的几个框架&#xff0c;这个框架设计的更为人性化&#xff0c;对企业级框架VUE的集成也很高。 Element Plus 组件 默认 使用英语&#xff0c;如果你希望使用其他语言&#xff0c;你可以参考下面的两种…

OpenHarmony如何隐藏系统状态栏、导航栏

前言 OpenHarmony源码版本&#xff1a;4.0release 开发板&#xff1a;DAYU / rk3568 一、通过setWindowSystemBarEnable方法设置 当我们应用的Alility继承的是UIAbility时&#xff0c;可以onWindowStageCreate(windowStage: window.WindowStage)方法中实现如下操作&#xf…

【AI】搭建Windows Linux子系统(WSL2)CUDA环境

0.准备工作 Windows本机安装CUDA Driver 首先去下载页面下载驱动文件 点击Get CUDA Driver进入下载页面&#xff0c;我看下载页面跟普通驱动下载页面相同&#xff0c;感觉应该不是单独的驱动&#xff0c;只要之前显卡已经安装好了CUDA的驱动&#xff0c;就可以先省略这一步。…

spi_2024.1.2

spi.h #ifndef __SPI_H__ #define __SPI_H__#include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h"#include"uart4.h" #include"key_it.h" // MOSI对应的引脚输出高低电平的信号PE14 #define MOSI_OUTPUT_H() do{GPIOE->O…

Linkage Mapper 工具参数详解——Climate Linkage Mapper

从以下链接中获取内容&#xff08;识别二维码、填写问卷、获取联系方式&#xff09; Linkage Mapper 报错_python error on **line 806** of lm_util.py in link-CSDN博客 此工具涉及参数非常多&#xff0c;后台需调用其他GIS平台&#xff08;并且限定版本&#xff09;&#x…

手写视频裁剪框

<!-- 截取框 --><divv-show"isShow"class"crop-box":style"{width: cropWidth px,height: cropHeight px,left: cropX px,top: cropY px,}"ref"cropBox"mousedown"startInteraction"><!-- 内容在这里 --…

【AI视野·今日CV 计算机视觉论文速览 第280期】Mon, 1 Jan 2024

AI视野今日CS.CV 计算机视觉论文速览 Mon, 1 Jan 2024 Totally 46 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Learning Vision from Models Rivals Learning Vision from Data Authors Yonglong Tian, Lijie Fan, Kaifeng Chen, Dina K…

React-hook-form-mui(一):基本使用

前言 在项目开发中&#xff0c;我们选择了ReactMUI作为技术栈。在使用MUI构建form表单时&#xff0c;我们发现并没有与antd类似的表单验证功能&#xff0c;于是我们选择了MUI推荐使用的react-hook-form-mui库去进行验证。但是发现网上关于这个库的使用方法和demo比较少且比较简…

二、类与对象(四)

22 内部类 22.1 内部类的概念 如果一个类定义在另一个类的内部&#xff0c;这个类就叫做内部类。内部类是一个独立的类&#xff0c;它不属于外部类&#xff0c;更不能通过外部类的对象去访问内部类的成员&#xff0c;外部类对内部类没有任何优越的访问权限&#xff0c;也就是…

LINUX基础培训之开机启动过程

前言、本章学习目标 掌握系统启动、引导过程 了解grub.conf的参数设置 熟悉系统运行级别 了解加载内核过程 一、LINUX启动引导过程 Linux系统的启动过程并不是大家想象中的那么复杂&#xff0c;其过程可以分为5个阶段&#xff1a; 1.开机自检 服务器主机开机以后&#xf…

5.SolidWorks的学习心法

学习计算机辅助设计软件&#xff08;CAD-Computer Aided Design&#xff09;的很重要的一点&#xff0c;就是要想清楚计算机辅助设计软件的本质和作用是什么。这一点非常重要&#xff0c;如果没有想清楚这一点&#xff0c;总会感觉得没有软件就做不了设计了&#xff0c;甚至是没…

LeetCode 2610. 转换二维数组【数组,哈希表】1373

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

Spring Beans的魔法门:解密多种配置方式【beans 四】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Spring Beans的魔法门&#xff1a;解密多种配置方式【beans 四】 前言XML配置方式1. 声明和配置Bean&#xff1a;2. 构造函数注入&#xff1a;3. 导入其他配置文件&#xff1a; java注解方式1. 使用Co…

算法训练营Day35

#Java #动态规划 开源学习资料 Feeling and experiences&#xff1a; 不同路径&#xff1a;力扣题目链接 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右…

MyBatisPlus学习三:Service接口、代码生成器

学习教程 黑马程序员最新MybatisPlus全套视频教程&#xff0c;4小时快速精通mybatis-plus框架 Service接口 简介 在MyBatis-Plus框架中&#xff0c;Service接口的作用是为实体类提供一系列的通用CRUD&#xff08;增删改查&#xff09;操作方法。通常情况下&#xff0c;Servi…

PyTorch 入门学习数据操作之创建

简介 在深度学习中&#xff0c;我们通常会频繁地对数据进行操作&#xff1b;要操作一般就需要先创建。 官方介绍 The torch package contains data structures for multi-dimensional tensors and defines mathematical operations over these tensors. Additionally, it pr…

k8s-二进制部署

ETCD master节点 制作证书 1、下载证书工具 [rootmaster ~]# wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 --no-check-certificate [rootmaster ~]# wget https://pkg.cfssl.org/R1.2/cfssljson_linux-amd64 --no-check-certificate [rootmaster ~]# wget https://…

SpringMVC通用后台管理系统源码

整体的SSM后台管理框架功能已经初具雏形&#xff0c;前端界面风格采用了结构简单、 性能优良、页面美观大的Layui页面展示框架 数据库支持了SQLserver,只需修改配置文件即可实现数据库之间的转换。 系统工具中加入了定时任务管理和cron生成器&#xff0c;轻松实现系统调度问…