
OpenHarmony应用开发-基础组件Rating/RemoteWindow/ScrollBar
版本:v3.2 Release
Rating
提供在给定范围内选择评分的组件。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
Rating(options?: { rating: number, indicator?: boolean })
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
rating | number | 是 | 设置并接收评分值。 默认值:0 取值范围: [0, stars] 小于0取0,大于stars取最大值stars。 |
indicator | boolean | 否 | 设置评分组件作为指示器使用,不可改变评分。 默认值:false, 可进行评分 说明: indicator=true时,默认组件高度height=12.0vp,组件width=heightstars。 |
属性
名称 | 参数类型 | 描述 |
stars | number | 设置评分总数。 默认值:5 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 设置为小于0的值时,按默认值显示。 |
stepSize | number | 操作评级的步长。 默认值:0.5 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 设置为小于0的值时,按默认值显示。 取值范围为[0.1, stars]。 |
starStyle | { backgroundUri: string, foregroundUri: string, secondaryUri?: string } | backgroundUri:未选中的星级的图片链接,可由用户自定义或使用系统默认图片。 foregroundUri:选中的星级的图片路径,可由用户自定义或使用系统默认图片。 secondaryUir:部分选中的星级的图片路径,可由用户自定义或使用系统默认图片。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: startStyle属性所支持的图片类型能力参考Image组件。 支持加载本地图片和网络图片,暂不支持PixelMap类型和Resource资源。 默认图片加载方式为异步,暂不支持同步加载。 设置值为undefined或者空字符串时,rating会选择加载系统默认星型图源。 |
说明:
rating宽高为[width, height]时,单个图片的绘制区域为[width / stars, height]。
为了指定绘制区域为方形,建议自定义宽高时采取[height * stars, height], width = height * stars的方式。
事件
名称 | 功能描述 |
onChange(callback:(value: number) => void) | 操作评分条的评星发生改变时触发该回调。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
示例
示例1
示例2
RemoteWindow
远程控制窗口组件,可以通过此组件控制应用窗口,提供启动退出过程中控件动画和应用窗口联动动画的能力。
说明:
该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
该组件为系统接口。
子组件
不可以包含子组件。
接口
RemoteWindow(target: WindowAnimationTarget)
通过窗口动画对象创建组件。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
target | 是 | 需要控制的动画窗口的描述。 |
WindowAnimationTarget
目标窗口,用来远程控制实现动画。
参数 | 类型 | 描述 |
bundleName | string | 动画窗口所对应的进程。 |
abilityName | string | 动画窗口所对应的Ability。 |
windowBounds | RRect | 动画窗口实际大小。 |
missionId | number | 任务ID。 |
RRect
圆角矩形。
参数 | 类型 | 描述 |
left | number | 动画窗口左上角相对于屏幕横坐标。 |
top | number | 动画窗口左上角相对于屏幕纵坐标。 |
width | number | 动画窗口宽度大小。 |
height | number | 动画窗口高度大小。 |
radius | number | 动画窗口圆角大小。 |
属性
支持通用属性。
事件
支持通用事件。
示例
RichText
富文本组件,解析并显示HTML格式文本。
说明:
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 使用该组件时请设置高度值。
子组件
不包含子组件。
接口
RichText(content:string)
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
content | string | 是 | 表示HTML格式的字符串。 |
事件
名称 | 描述 |
onStart(callback: () => void) | 加载网页时触发。 |
onComplete(callback: () => void) | 网页加载结束时触发。 |
属性
只支持通用属性中width,height,size,layoutWeight四个属性。由于padding,margin,constraintSize属性使用时与通用属性描述不符,暂不支持。
支持标签
名称 | 描述 | 示例 |
<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时,会出现卡顿、滑动响应慢等现象。
ScrollBar
滚动条组件ScrollBar,用于配合可滚动组件使用,如List、Grid、Scroll。
说明:
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含单个子组件。
接口
ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
scroller | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | |
direction | 否 | 滚动条的方向,控制可滚动组件对应方向的滚动。 默认值:ScrollBarDirection.Vertical | |
state | 否 | 滚动条状态。 默认值:BarState.Auto |
说明: ScrollBar组件负责定义可滚动区域的行为样式,ScrollBar的子节点负责定义滚动条的行为样式。
滚动条组件与可滚动组件通过Scroller进行绑定,且只有当两者方向相同时,才能联动,ScrollBar与可滚动组件仅支持一对一绑定。
ScrollBarDirection枚举说明
名称 | 描述 |
Vertical | 纵向滚动条。 |
Horizontal | 横向滚动条。 |
示例
