Skip to content

富文本

效果

参数

content

表示 HTML 格式的字符串

属性

事件

onStart

加载网页的时候触发

onComplete

网页加载结束触发

示例

js
@Entry
@Component
struct Index5 {
    @State data: 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/>' +
        '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;">' +
        '<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>';

    build() {
        Column() {
            Row() {
                RichText(this.data)
                    .onStart(() => {
                        console.info('RichText onStart');
                    })
                    .onComplete(() => {
                        console.info('RichText onComplete');
                    })
                    .width(500)
                    .height(500)
                    .backgroundColor(0XBDDB69)
            }
        }
    }
}