回复
HarmonyOS API：基础组件
joytrian
发布于 2023-3-24 11:53
浏览
0收藏
版本：v3.1 Beta
RichText
更新时间: 2023-02-17 09:19
富文本组件，解析并显示HTML格式文本。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
不包含子组件。
接口
RichText(content:string)
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
content | string | 是 | 表示HTML格式的字符串。 |
事件
名称 | 描述 |
onStart(callback: () => void) | 加载网页时触发。 |
onComplete(callback: () => void) | 网页加载结束时触发。 |
支持标签
名称 | 描述 | 示例 |
<h1>--<h6> | 被用来定义HTML，<h1>定义重要等级最高的标题，<h6>定义重要等级最低的标题。 | <h1>这是一个标题</h1><h2>这是h2标题</h2> |
<p></p> | 定义段落。 | <p>这是一个段落</p> |
<br/> | 插入一个简单的换行符。 | <p>这是一个段落<br/>这是换行段落</p> |
<font/> | 规定文本的字体、字体尺寸、字体颜色。 | <font size="3" face="arial" color="red">这是一段红色字体。</font> |
<hr/> | 定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。 | <p>这个一个段落</p><hr/><p>这是一个段落</p> |
<image></image> | 用来定义图片。 | <image src="file:///data/storage/el1/bundle/entry/resources/rawfile/icon.png"></image> |
<div></div> | 常用于组合块级元素，以便通过CSS来对这些元素进行格式化。 | <div style='color:#0000FF'><h3>这是一个在div元素中的标题。</h3></div> |
<i></i> | 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。 | <i>这是一个斜体</i> |
<u></u> | 定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词，应尽量避免使用<u>为文本加下划线，用户会把它混淆为一个超链接。 | <p><u>这是带有下划线的段落</u></p> |
<style></style> | 定义HTML文档的样式信息。 | <style>h1{color:red;}p{color:blue;}</style> |
style | 属性规定元素的行内样式，写在标签内部，在使用的时候需用引号来进行区分，并以; 间隔样式，style='width: 500px;height: 500px;border: 1px soild;margin: 0 auto;'。 | <h1 style='color:blue;text-align:center'>这是一个标题</h1><p style='color:green'>这是一个段落。</p> |
<script></script> | 用于定义客户端文本，比如JavaScript。 | <script>document.write("Hello World!")</script> |
示例
示例效果请以真机运行为准，当前IDE预览器不支持。
RichText组件底层复用了Web组件来提供基础能力，包括但不限于HTML页面的解析、渲染等。但由于Web组件比较消耗资源，所以在一些重复使用RichText组件的场景下，比如在List下循环重复使用RichText时，会出现卡顿、滑动响应慢等现象。
// xxx.ets
@Entry
@Component
struct RichTextExample {
@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: 0auto;">' +
'<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() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
RichText(this.data)
.onStart(() => {
console.info('RichText onStart');
})
.onComplete(() => {
console.info('RichText onComplete');
})
}
}
}
ScrollBar
更新时间: 2023-02-17 09:19
滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
可以包含单个子组件。
接口
ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
scroller | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | |
direction | ScrollBarDirection | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。 默认值：ScrollBarDirection.Vertical |
state | 否 | 滚动条状态。 默认值：BarState.Auto |
说明
ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。
滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。
ScrollBarDirection枚举说明
名称 | 描述 |
Vertical | 纵向滚动条。 |
Horizontal | 横向滚动条。 |
示例
// xxx.ets
@Entry
@Component
struct ScrollBarExample {
private scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() {
Column() {
Stack({ alignContent: Alignment.End }) {
Scroll(this.scroller) {
Flex({ direction: FlexDirection.Column }) {
ForEach(this.arr, (item) => {
Row() {
Text(item.toString())
.width('90%')
.height(100)
.backgroundColor('#3366CC')
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 5 })
}
}, item => item)
}.margin({ left: 52 })
}
.scrollBar(BarState.Off)
.scrollable(ScrollDirection.Vertical)
ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
Text()
.width(30)
.height(100)
.borderRadius(10)
.backgroundColor('#C0C0C0')
}.width(30).backgroundColor('#ededed')
}
}
}
}
Search
更新时间: 2023-02-17 09:19
搜索框组件，适用于浏览器的搜索内容输入框等应用场景。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
value | string | 否 | 设置当前显示的搜索文本内容。 |
placeholder | string | 否 | 设置无输入时的提示文本。 |
icon | string | 否 | 设置搜索图标路径，默认使用系统搜索图标，图标支持的图源格式: svg、jpg和png。 |
controller | SearchController | 否 | 设置Search组件控制器。 |
属性
除支持通用属性外，还支持以下属性：
名称 | 参数类型 | 描述 |
searchButton | string | 搜索框末尾搜索按钮文本内容，默认无搜索按钮。 |
placeholderColor | 设置placeholder文本颜色。 | |
placeholderFont | Font | 设置placeholder文本样式。 |
textFont | Font | 设置搜索框内输入文本样式。 |
textAlign | 设置文本在搜索框中的对齐方式。 默认值：TextAlign.Start | |
copyOption9+ | 设置输入的文本是否可复制。 |
事件
除支持通用事件外，还支持以下事件：
名称 | 功能描述 |
onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。 -value: 当前搜索框中输入的文本内容。 |
onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。 -value: 当前搜索框中输入的文本内容。 |
SearchController
Search组件的控制器，目前通过它可控制Search组件的光标位置。
导入对象
controller: SearchController = new SearchController()
caretPosition
caretPosition(value: number): void
设置输入光标的位置。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
value | number | 是 | 从字符串开始到光标所在位置的长度。 |
示例
// xxx.ets
@Entry
@Component
struct SearchExample {
@State changeValue: string = ''
@State submitValue: string = ''
controller: SearchController = new SearchController()
build() {
Column() {
Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
Text('onChange:' + this.changeValue).fontSize(18).margin(15)
Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
.searchButton('SEARCH')
.width(400)
.height(40)
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.onSubmit((value: string) => {
this.submitValue = value
})
.onChange((value: string) => {
this.changeValue = value
})
.margin(20)
Button('Set caretPosition 1')
.onClick(() => {
// 设置光标位置到输入的第一个字符后
this.controller.caretPosition(1)
})
}.width('100%')
}
}
已于2023-3-24 11:53:52修改
赞
收藏
回复
相关推荐
