未验证 提交 aed42fbb 编写于 作者: O openharmony_ci 提交者: Gitee

!22212 问题修改同步OHOS

Merge pull request !22212 from LiAn/master
...@@ -300,9 +300,9 @@ struct CompA { ...@@ -300,9 +300,9 @@ struct CompA {
``` ```
### 兄弟节点之间同步状态变量 ### 兄弟组件之间同步状态变量
下面的示例展示了通过\@LocalStorageLink双向同步兄弟节点之间的状态。 下面的示例展示了通过\@LocalStorageLink双向同步兄弟组件之间的状态。
先看Parent自定义组件中发生的变化: 先看Parent自定义组件中发生的变化:
......
...@@ -254,20 +254,20 @@ struct WebComponent { ...@@ -254,20 +254,20 @@ struct WebComponent {
.onClick(() => { .onClick(() => {
// 使用本侧端口发送消息给HTML5 // 使用本侧端口发送消息给HTML5
try { try {
console.log("In eTS side send true start"); console.log("In ArkTS side send true start");
if (this.nativePort) { if (this.nativePort) {
this.message.setString("helloFromEts"); this.message.setString("helloFromEts");
this.nativePort.postMessageEventExt(this.message); this.nativePort.postMessageEventExt(this.message);
} }
} }
catch (error) { catch (error) {
console.log("In eTS side send message catch error:" + error.code + ", msg:" + error.message); console.log("In ArkTS side send message catch error:" + error.code + ", msg:" + error.message);
} }
}) })
Web({ src: $rawfile('index.html'), controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
.onPageEnd((e)=>{ .onPageEnd((e)=>{
console.log("In eTS side message onPageEnd init mesaage channel"); console.log("In ArkTS side message onPageEnd init mesaage channel");
// 1. 创建消息端口 // 1. 创建消息端口
this.ports = this.controller.createWebMessagePorts(true); this.ports = this.controller.createWebMessagePorts(true);
// 2. 发送端口1到HTML5 // 2. 发送端口1到HTML5
...@@ -276,10 +276,10 @@ struct WebComponent { ...@@ -276,10 +276,10 @@ struct WebComponent {
this.nativePort = this.ports[0]; this.nativePort = this.ports[0];
// 4. 设置回调函数 // 4. 设置回调函数
this.nativePort.onMessageEventExt((result) => { this.nativePort.onMessageEventExt((result) => {
console.log("In eTS side got message"); console.log("In ArkTS side got message");
try { try {
var type = result.getType(); var type = result.getType();
console.log("In eTS side getType:" + type); console.log("In ArkTS side getType:" + type);
switch (type) { switch (type) {
case web_webview.WebMessageType.STRING: { case web_webview.WebMessageType.STRING: {
this.msg1 = "result type:" + typeof (result.getString()); this.msg1 = "result type:" + typeof (result.getString());
......
...@@ -11,19 +11,22 @@ Navigation组件一般作为Page页面的根容器,通过属性设置来展示 ...@@ -11,19 +11,22 @@ Navigation组件一般作为Page页面的根容器,通过属性设置来展示
可以包含子组件。从API Version 9开始,推荐与[NavRouter](ts-basic-components-navrouter.md)组件搭配使用。 可以包含子组件。从API Version 9开始,推荐与[NavRouter](ts-basic-components-navrouter.md)组件搭配使用。
## 接口 ## 接口
**方法1:** Navigation() ### Navigation
Navigation()
**方法2:** Navigation(pathInfos: NavPathStack)<sup>10+</sup> ### Navigation<sup>10+</sup>
绑定路由栈到Navigation组件。 Navigation(pathInfos: NavPathStack)<sup>10+</sup>
绑定路由栈到Navigation组件。
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ----------------------------------- | ---- | ------------- | | --------- | ------------------------------- | ---- | ------ |
| pathInfos | [NavPathStack](#navpathstack10) | 否 | 路由栈信息。 | | pathInfos | [NavPathStack](#navpathstack10) | 否 | 路由栈信息。 |
## 属性 ## 属性
...@@ -31,25 +34,32 @@ Navigation组件一般作为Page页面的根容器,通过属性设置来展示 ...@@ -31,25 +34,32 @@ Navigation组件一般作为Page页面的根容器,通过属性设置来展示
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性: 除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ----------------------------- | ---------------------------------------- | ---------------------------------------- | | ---------------------------------- | ---------------------------------------- | ---------------------------------------- |
| title | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup>&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>&nbsp;\|&nbsp;[NavigationCommonTitle](#navigationcommontitle类型说明)<sup>9+</sup>&nbsp;\|&nbsp;[NavigationCustomTitle](#navigationcustomtitle类型说明)<sup>9+</sup> | 页面标题。<br/>**说明:** <br/>使用NavigationCustomTitle类型设置height高度时,titleMode属性不会生效。<br/>字符串超长时,如果不设置副标题,先缩小再换行(2行)最后...截断。如果设置副标题,先缩小最后...截断。 | | title | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> \| [NavigationCommonTitle](#navigationcommontitle类型说明)<sup>9+</sup> \| [NavigationCustomTitle](#navigationcustomtitle类型说明)<sup>9+</sup> | 页面标题。<br/>**说明:** <br/>使用NavigationCustomTitle类型设置height高度时,titleMode属性不会生效。<br/>字符串超长时,如果不设置副标题,先缩小再换行(2行)最后...截断。如果设置副标题,先缩小最后...截断。 |
| subTitle<sup>(deprecated)</sup> | string | 页面副标题。不设置时不显示副标题。从API Version 9开始废弃,建议使用title代替。 | | subTitle<sup>(deprecated)</sup> | string | 页面副标题。不设置时不显示副标题。从API Version 9开始废弃,建议使用title代替。 |
| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。不设置时不显示菜单项。使用Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt;&nbsp;写法时,竖屏最多支持显示3个图标,横屏最多支持显示5个图标,多余的图标会被放入自动生成的更多图标。 | | menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。不设置时不显示菜单项。使用Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt; 写法时,竖屏最多支持显示3个图标,横屏最多支持显示5个图标,多余的图标会被放入自动生成的更多图标。 |
| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。<br/>默认值:NavigationTitleMode.Free | | titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。<br/>默认值:NavigationTitleMode.Free |
| toolBar<sup>(deprecated)</sup> | [object](#object类型说明)&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>items:&nbsp;工具栏所有项。<br/>**说明:** <br/>items均分底部工具栏,在每个均分内容区布局文本和图标,文本超长时,逐级缩小,缩小之后换行,最后...截断。<br/>从API version 10开始,该接口不再维护,推荐使用toolbarConfiguration代替。 | | toolBar<sup>(deprecated)</sup> | [object](#object类型说明) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>items: 工具栏所有项。<br/>**说明:** <br/>items均分底部工具栏,在每个均分内容区布局文本和图标,文本超长时,逐级缩小,缩小之后换行,最后...截断。<br/>从API version 10开始,该接口不再维护,推荐使用toolbarConfiguration代替。 |
| toolbarConfiguration<sup>10+</sup> | Array<[ToolbarItem](#toolbaritem10类型说明)<sup>10+</sup>&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>**说明:** <br/>使用Array<[ToolbarItem](#ToolbarItem类型说明)>写法设置的工具栏有如下特性:<br/>工具栏所有选项均分底部工具栏,在每个均分内容区布局文本和图标。<br/>文本超长时,若工具栏选项个数小于5个,优先拓展选项的宽度,最大宽度与屏幕等宽,其次逐级缩小,缩小之后换行,最后...截断。<br/>竖屏最多支持显示5个图标,多余的图标会被放入自动生成的更多图标。横屏下必须配合menus属性的Array<[NavigationMenuItem](#navigationmenuitem类型说明)>使用,底部工具栏会自动隐藏,同时底部工具栏所有选项移动至页面右上角菜单。<br/>使用[CustomBuilder](ts-types.md#custombuilder8)写法为用户自定义工具栏选项,除均分底部工具栏外不具备以上功能。 | | toolbarConfiguration<sup>10+</sup> | Array<[ToolbarItem](#toolbaritem10类型说明)<sup>10+</sup>&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>**说明:** <br/>使用Array<[ToolbarItem](#ToolbarItem类型说明)>写法设置的工具栏有如下特性:<br/>工具栏所有选项均分底部工具栏,在每个均分内容区布局文本和图标。<br/>文本超长时,若工具栏选项个数小于5个,优先拓展选项的宽度,最大宽度与屏幕等宽,其次逐级缩小,缩小之后换行,最后...截断。<br/>竖屏最多支持显示5个图标,多余的图标会被放入自动生成的更多图标。横屏下必须配合menus属性的Array<[NavigationMenuItem](#navigationmenuitem类型说明)>使用,底部工具栏会自动隐藏,同时底部工具栏所有选项移动至页面右上角菜单。<br/>使用[CustomBuilder](ts-types.md#custombuilder8)写法为用户自定义工具栏选项,除均分底部工具栏外不具备以上功能。 |
| hideToolBar | boolean | 隐藏工具栏。<br/>默认值:false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 | | hideToolBar | boolean | 隐藏工具栏。<br/>默认值:false<br/>true: 隐藏工具栏。<br/>false: 显示工具栏。 |
| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值:false<br/>true:&nbsp;隐藏标题栏。<br/>false:&nbsp;显示标题栏。 | | hideTitleBar | boolean | 隐藏标题栏。<br/>默认值:false<br/>true: 隐藏标题栏。<br/>false: 显示标题栏。 |
| hideBackButton | boolean | 隐藏返回键。<br/>默认值:false<br/>true:&nbsp;隐藏返回键。<br/>false:&nbsp;显示返回键。 <br>不支持隐藏NavDestination组件标题栏中的返回图标。<br/>**说明:** <br/>返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。 | | hideBackButton | boolean | 隐藏返回键。<br/>默认值:false<br/>true: 隐藏返回键。<br/>false: 显示返回键。 <br>不支持隐藏NavDestination组件标题栏中的返回图标。<br/>**说明:** <br/>返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。 |
| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | 导航栏宽度。<br/>默认值:240<br/>单位:vp<br/>**说明:** <br/>仅在Navigation组件分栏时生效。 | | navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | 导航栏宽度。<br/>默认值:240<br/>单位:vp<br/>**说明:** <br/>仅在Navigation组件分栏时生效。 |
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition枚举说明) | 导航栏位置。<br/>默认值:NavBarPosition.Start<br/>**说明:** <br/>仅在Navigation组件分栏时生效。 | | navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition枚举说明) | 导航栏位置。<br/>默认值:NavBarPosition.Start<br/>**说明:** <br/>仅在Navigation组件分栏时生效。 |
| mode<sup>9+</sup> | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。<br/>默认值:NavigationMode.Auto<br/>自适应:基于组件宽度自适应单栏和双栏。<br/>**说明:** <br/>支持Stack、Split与Auto模式。 | | mode<sup>9+</sup> | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。<br/>默认值:NavigationMode.Auto<br/>自适应:基于组件宽度自适应单栏和双栏。<br/>**说明:** <br/>支持Stack、Split与Auto模式。 |
| backButtonIcon<sup>9+</sup> | string&nbsp;\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。 | | backButtonIcon<sup>9+</sup> | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。 |
| hideNavBar<sup>9+</sup> | boolean | 是否显示导航栏(仅在mode为NavigationMode.Split时生效)。 | | hideNavBar<sup>9+</sup> | boolean | 是否显示导航栏(仅在mode为NavigationMode.Split时生效)。 |
| navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | 创建NavDestination组件。<br/>**说明:** <br/>使用builder函数,基于name和param构造NavDestination组件。builder中允许在NavDestination组件外包含一层自定义组件, 但自定义组件不允许设置属性和事件,否则仅显示空白。 | | navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | 创建NavDestination组件。<br/>**说明:** <br/>使用builder函数,基于name和param构造NavDestination组件。builder中允许在NavDestination组件外包含一层自定义组件, 但自定义组件不允许设置属性和事件,否则仅显示空白。 |
| navBarWidthRange<sup>10+</sup> | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | 导航栏最小和最大宽度(双栏模式下生效)。<br/>默认值:最小默认值 240,最大默认值为组件宽度的40% ,且不大于 432。<br/>单位:vp<br/>规则:<br/>开发者设置优先级 > 默认值<br/>最小值优先级 > 最大值<br/>navBar 优先级 > content优先级<br/>开发者设置多个值冲突,以全局数值优先,局部最小值跟随容器大小。 | | navBarWidthRange<sup>10+</sup> | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | 导航栏最小和最大宽度(双栏模式下生效)。<br/>默认值:最小默认值 240,最大默认值为组件宽度的40% ,且不大于 432。<br/>单位:vp<br/>规则:<br/>开发者设置优先级 > 默认值<br/>最小值优先级 > 最大值<br/>navBar 优先级 > content优先级<br/>开发者设置多个值冲突,以全局数值优先,局部最小值跟随容器大小。 |
| minContentWidth<sup>10+</sup> | [Dimension](ts-types.md#dimension10) | 导航栏内容区最小宽度(双栏模式下生效)。<br/>默认值:360<br/>单位:vp<br/>规则:<br/>开发者设置优先级 > 默认值<br/>最小值优先级 > 最大值<br/>navBar优先级 > content优先级<br/>开发者设置多个值冲突,以全局数值优先,局部最小值跟随容器大小。<br/>Auto模式断点计算:默认600vp,minNavBarWidth(240vp) + minContentWidth (360vp) | | minContentWidth<sup>10+</sup> | [Dimension](ts-types.md#dimension10) | 导航栏内容区最小宽度(双栏模式下生效)。<br/>默认值:360<br/>单位:vp<br/>规则:<br/>开发者设置优先级 > 默认值<br/>最小值优先级 > 最大值<br/>navBar优先级 > content优先级<br/>开发者设置多个值冲突,以全局数值优先,局部最小值跟随容器大小。<br/>Auto模式断点计算:默认600vp,minNavBarWidth(240vp) + minContentWidth (360vp) |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | 当titleMode为NavigationTitleMode.Free时,随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
| onNavBarStateChange(callback: (isVisible: boolean) =&gt; void) | 导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示,为false时表示隐藏。 |
## NavPathStack<sup>10+</sup> ## NavPathStack<sup>10+</sup>
Navigation路由栈。 Navigation路由栈。
...@@ -63,7 +73,7 @@ pushPath(info: NavPathInfo): void ...@@ -63,7 +73,7 @@ pushPath(info: NavPathInfo): void
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ---- | ----------------------------- | ---- | -------------------- |
| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | | info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 |
### pushPathByName<sup>10+</sup> ### pushPathByName<sup>10+</sup>
...@@ -75,7 +85,7 @@ pushPathByName(name: string, param: unknown): void ...@@ -75,7 +85,7 @@ pushPathByName(name: string, param: unknown): void
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------- | ---- | --------------------- |
| name | string | 是 | NavDestination页面名称。 | | name | string | 是 | NavDestination页面名称。 |
| param | unknown | 是 | NavDestination页面详细参数。 | | param | unknown | 是 | NavDestination页面详细参数。 |
...@@ -88,7 +98,7 @@ pop(): NavPathInfo | undefined ...@@ -88,7 +98,7 @@ pop(): NavPathInfo | undefined
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------- | | ----------- | ------------------------ |
| NavPathInfo | 返回栈顶NavDestination页面的信息。 | | NavPathInfo | 返回栈顶NavDestination页面的信息。 |
| undefined | 当路由栈为空时返回undefined。 | | undefined | 当路由栈为空时返回undefined。 |
...@@ -101,13 +111,13 @@ popToName(name: string): number ...@@ -101,13 +111,13 @@ popToName(name: string): number
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ---- | ------ | ---- | ------------------- |
| name | string | 是 | NavDestination页面名称。 | | name | string | 是 | NavDestination页面名称。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------- | | ------ | ---------------------------------------- |
| number | 如果栈中存在名为name的NavDestination页面,则返回第一个名为name的NavDestination页面的索引,否则返回-1。 | | number | 如果栈中存在名为name的NavDestination页面,则返回第一个名为name的NavDestination页面的索引,否则返回-1。 |
### popToIndex<sup>10+</sup> ### popToIndex<sup>10+</sup>
...@@ -119,7 +129,7 @@ popToIndex(index: number): void ...@@ -119,7 +129,7 @@ popToIndex(index: number): void
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------ | ---- | ---------------------- |
| index | number | 是 | NavDestination页面的位置索引。 | | index | number | 是 | NavDestination页面的位置索引。 |
### moveToTop<sup>10+</sup> ### moveToTop<sup>10+</sup>
...@@ -131,13 +141,13 @@ moveToTop(name: string): number ...@@ -131,13 +141,13 @@ moveToTop(name: string): number
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ---- | ------ | ---- | ------------------- |
| name | string | 是 | NavDestination页面名称。 | | name | string | 是 | NavDestination页面名称。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------- | | ------ | ---------------------------------------- |
| number | 如果栈中存在名为name的NavDestination页面,则返回第一个名为name的NavDestination页面的当前索引,否则返回-1。 | | number | 如果栈中存在名为name的NavDestination页面,则返回第一个名为name的NavDestination页面的当前索引,否则返回-1。 |
### moveIndexToTop<sup>10+</sup> ### moveIndexToTop<sup>10+</sup>
...@@ -149,7 +159,7 @@ moveIndexToTop(index: number): void ...@@ -149,7 +159,7 @@ moveIndexToTop(index: number): void
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------ | ---- | ---------------------- |
| index | number | 是 | NavDestination页面的位置索引。 | | index | number | 是 | NavDestination页面的位置索引。 |
### clear<sup>10+</sup> ### clear<sup>10+</sup>
...@@ -167,7 +177,7 @@ getAllPathName(): Array<string\> ...@@ -167,7 +177,7 @@ getAllPathName(): Array<string\>
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------- | | -------------- | -------------------------- |
| Array<string\> | 返回栈中所有NavDestination页面的名称。 | | Array<string\> | 返回栈中所有NavDestination页面的名称。 |
### getParamByIndex<sup>10+</sup> ### getParamByIndex<sup>10+</sup>
...@@ -179,13 +189,13 @@ getParamByIndex(index: number): unknown | undefined ...@@ -179,13 +189,13 @@ getParamByIndex(index: number): unknown | undefined
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------ | ---- | ---------------------- |
| index | number | 是 | NavDestination页面的位置索引。 | | index | number | 是 | NavDestination页面的位置索引。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------- | | --------- | -------------------------- |
| unknown | 返回对应NavDestination页面的参数信息。 | | unknown | 返回对应NavDestination页面的参数信息。 |
| undefined | 传入index无效时返回undefined。 | | undefined | 传入index无效时返回undefined。 |
...@@ -198,13 +208,13 @@ getParamByName(name: string): Array<unknown\> ...@@ -198,13 +208,13 @@ getParamByName(name: string): Array<unknown\>
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ---- | ------ | ---- | ------------------- |
| name | string | 是 | NavDestination页面名称。 | | name | string | 是 | NavDestination页面名称。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------- | | --------------- | --------------------------------- |
| Array<unknown\> | 返回全部名为name的NavDestination页面的参数信息。 | | Array<unknown\> | 返回全部名为name的NavDestination页面的参数信息。 |
### getIndexByName<sup>10+</sup> ### getIndexByName<sup>10+</sup>
...@@ -216,13 +226,13 @@ getIndexByName(name: string): Array<number\> ...@@ -216,13 +226,13 @@ getIndexByName(name: string): Array<number\>
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ---- | ------ | ---- | ------------------- |
| name | string | 是 | NavDestination页面名称。 | | name | string | 是 | NavDestination页面名称。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------- | | -------------- | --------------------------------- |
| Array<number\> | 返回全部名为name的NavDestination页面的位置索引。 | | Array<number\> | 返回全部名为name的NavDestination页面的位置索引。 |
### size<sup>10+</sup> ### size<sup>10+</sup>
...@@ -234,7 +244,7 @@ size(): number ...@@ -234,7 +244,7 @@ size(): number
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------- | | ------ | ------ |
| number | 返回栈大小。 | | number | 返回栈大小。 |
## NavPathInfo<sup>10+</sup> ## NavPathInfo<sup>10+</sup>
...@@ -248,40 +258,40 @@ constructor(name: string, param: unknown) ...@@ -248,40 +258,40 @@ constructor(name: string, param: unknown)
**参数:** **参数:**
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------- | ---- | --------------------- |
| name | string | 是 | NavDestination页面名称。 | | name | string | 是 | NavDestination页面名称。 |
| param | unknown | 否 | NavDestination页面详细参数。 | | param | unknown | 否 | NavDestination页面详细参数。 |
## NavigationMenuItem类型说明 ## NavigationMenuItem类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ------ | ------------- | ---- | --------------- |
| value | string | 是 | 菜单栏单个选项的显示文本。 | | value | string | 是 | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | 菜单栏单个选项的图标资源路径。 | | icon | string | 否 | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 | | action | () =&gt; void | 否 | 当前选项被选中的事件回调。 |
## object类型说明 ## object类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- | | ------ | ------------- | ---- | --------------- |
| value | string | 是 | 工具栏单个选项的显示文本。 | | value | string | 是 | 工具栏单个选项的显示文本。 |
| icon | string | 否 | 工具栏单个选项的图标资源路径。 | | icon | string | 否 | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 | | action | () =&gt; void | 否 | 当前选项被选中的事件回调。 |
## ToolbarItem<sup>10+</sup>类型说明 ## ToolbarItem<sup>10+</sup>类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ---------- | ------------------------------------------------- | ---- | ----------------------------------------------------------- | | ---------- | ---------------------------------------- | ---- | ---------------------------------------- |
| value | ResourceStr | 是 | 工具栏单个选项的显示文本。 | | value | ResourceStr | 是 | 工具栏单个选项的显示文本。 |
| icon | ResourceStr | 否 | 工具栏单个选项的图标资源路径。 | | icon | ResourceStr | 否 | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 | | action | () =&gt; void | 否 | 当前选项被选中的事件回调。 |
| status | [ToolbarItemStatus](#toolbaritemstatus10枚举说明) | 否 | 工具栏单个选项的状态。<br/>默认值:ToolbarItemStatus.NORMAL | | status | [ToolbarItemStatus](#toolbaritemstatus10枚举说明) | 否 | 工具栏单个选项的状态。<br/>默认值:ToolbarItemStatus.NORMAL |
| activeIcon | ResourceStr | 否 | 工具栏单个选项处于ACTIVE态时的图标资源路径。 | | activeIcon | ResourceStr | 否 | 工具栏单个选项处于ACTIVE态时的图标资源路径。 |
## ToolbarItemStatus<sup>10+</sup>枚举说明 ## ToolbarItemStatus<sup>10+</sup>枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | ------------------------------------------------------------ | | -------- | ---------------------------------------- |
| NORMAL | 设置工具栏单个选项为NORMAL态,该选项显示默认样式,可以触发Hover,Press,Focus事件并显示对应的多态样式。 | | NORMAL | 设置工具栏单个选项为NORMAL态,该选项显示默认样式,可以触发Hover,Press,Focus事件并显示对应的多态样式。 |
| DISABLED | 设置工具栏单个选项为DISABLED态, 该选项显示DISABLED态样式,并且不可交互。 | | DISABLED | 设置工具栏单个选项为DISABLED态, 该选项显示DISABLED态样式,并且不可交互。 |
| ACTIVE | 设置工具栏单个选项为ACTIVE态, 该选项通过点击事件可以将icon图标更新为activeIcon对应的图片资源。 | | ACTIVE | 设置工具栏单个选项为ACTIVE态, 该选项通过点击事件可以将icon图标更新为activeIcon对应的图片资源。 |
...@@ -289,7 +299,7 @@ constructor(name: string, param: unknown) ...@@ -289,7 +299,7 @@ constructor(name: string, param: unknown)
## NavigationTitleMode枚举说明 ## NavigationTitleMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---- | ------------------------------------------------------------ | | ---- | ---------------------------------------- |
| Free | 当内容为可滚动组件时,标题随着内容向上滚动而缩小(子标题的大小不变、淡出)。向下滚动内容到顶时则恢复原样。<br/>**说明:** <br/>标题随着内容滚动大小联动的动效在title设置为ResourceStr和NavigationCommonTitle时生效,设置成其余自定义节点类型时字体样式无法变化,下拉时只影响标题栏偏移。 | | Free | 当内容为可滚动组件时,标题随着内容向上滚动而缩小(子标题的大小不变、淡出)。向下滚动内容到顶时则恢复原样。<br/>**说明:** <br/>标题随着内容滚动大小联动的动效在title设置为ResourceStr和NavigationCommonTitle时生效,设置成其余自定义节点类型时字体样式无法变化,下拉时只影响标题栏偏移。 |
| Mini | 固定为小标题模式。 | | Mini | 固定为小标题模式。 |
| Full | 固定为大标题模式。 | | Full | 固定为大标题模式。 |
...@@ -306,7 +316,7 @@ constructor(name: string, param: unknown) ...@@ -306,7 +316,7 @@ constructor(name: string, param: unknown)
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------- | ---------------------------------------- | ---- | -------- | | ------- | ---------------------------------------- | ---- | -------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 | | builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 |
| height | [TitleHeight](#titleheight枚举说明)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 是 | 设置标题栏高度。 | | height | [TitleHeight](#titleheight枚举说明) \| [Length](ts-types.md#length) | 是 | 设置标题栏高度。 |
## NavBarPosition枚举说明 ## NavBarPosition枚举说明
...@@ -318,7 +328,7 @@ constructor(name: string, param: unknown) ...@@ -318,7 +328,7 @@ constructor(name: string, param: unknown)
## NavigationMode枚举说明 ## NavigationMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ----- | ------------------------------------------------------------ | | ----- | ---------------------------------------- |
| Stack | 导航栏与内容区独立显示,相当于两个页面。 | | Stack | 导航栏与内容区独立显示,相当于两个页面。 |
| Split | 导航栏与内容区分两栏显示。<br/>以下navBarWidthRange的值用[minNavBarWidth,maxNavBarWidth]表示<br/>1.当navBarWidth属性的值,在navBarWidthRange属性的值范围以外时,navBarWidth按如下规则显示:<br/>navBarWidth < minNavBarWidth时navBarWidth修正为minNavBarWidth;<br/>navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth大于maxNavBarWidth时,navBarWidth修正为maxNavBarWidth;<br/>navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth小于minNavBarWidth时,navBarWidth修正为minNavBarWidth;<br/>navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth在navBarWidthRange范围内,navBarWidth修正为组件宽度 - minContentWidth。<br/>2.缩小组件尺寸时,先缩小内容区的尺寸至minContentWidth,然后再缩小导航栏的尺寸至minNavBarWidth。若继续缩小,先缩小内容区,内容区消失后再缩小导航栏。<br/>3.设置导航栏为固定尺寸时,若持续缩小组件尺寸,导航栏最后压缩显示。<br/>4.当navBarWidth值与minContentWidth的值相加大于组件尺寸时,会优先显示导航栏。 | | Split | 导航栏与内容区分两栏显示。<br/>以下navBarWidthRange的值用[minNavBarWidth,maxNavBarWidth]表示<br/>1.当navBarWidth属性的值,在navBarWidthRange属性的值范围以外时,navBarWidth按如下规则显示:<br/>navBarWidth < minNavBarWidth时navBarWidth修正为minNavBarWidth;<br/>navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth大于maxNavBarWidth时,navBarWidth修正为maxNavBarWidth;<br/>navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth小于minNavBarWidth时,navBarWidth修正为minNavBarWidth;<br/>navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth在navBarWidthRange范围内,navBarWidth修正为组件宽度 - minContentWidth。<br/>2.缩小组件尺寸时,先缩小内容区的尺寸至minContentWidth,然后再缩小导航栏的尺寸至minNavBarWidth。若继续缩小,先缩小内容区,内容区消失后再缩小导航栏。<br/>3.设置导航栏为固定尺寸时,若持续缩小组件尺寸,导航栏最后压缩显示。<br/>4.当navBarWidth值与minContentWidth的值相加大于组件尺寸时,会优先显示导航栏。 |
| Auto | API version 9之前:窗口宽度>=520vp时,采用Split模式显示;窗口宽度<520vp时采用Stack模式显示。<br/>API version 10及以上:窗口宽度>=600vp时,采用Split模式显示;窗口宽度<600vp时,采用Stack模式显示,600vp等于minNavBarWidth(240vp) + minContentWidth (360vp)。 | | Auto | API version 9之前:窗口宽度>=520vp时,采用Split模式显示;窗口宽度<520vp时采用Stack模式显示。<br/>API version 10及以上:窗口宽度>=600vp时,采用Split模式显示;窗口宽度<600vp时,采用Stack模式显示,600vp等于minNavBarWidth(240vp) + minContentWidth (360vp)。 |
...@@ -332,17 +342,10 @@ constructor(name: string, param: unknown) ...@@ -332,17 +342,10 @@ constructor(name: string, param: unknown)
> **说明:** > **说明:**
>
> 目前可滚动组件只支持List。 > 目前可滚动组件只支持List。
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时,随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
| onNavBarStateChange(callback:&nbsp;(isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示,为false时表示隐藏。 |
## 示例 ## 示例
```ts ```ts
......
...@@ -50,7 +50,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -50,7 +50,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性: 除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。<br/>默认值:Axis.Vertical<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。<br/>默认值:Axis.Vertical<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:[ResourceColor](ts-types.md#resourcecolor),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式,默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>endMargin +startMargin 不能超过列宽度。 <br/>startMargin和endMargin不支持设置百分比。<br/>List的分割线画在主轴方向两个子组件之间,第一个子组件上方和最后一个子组件下方不会绘制分割线。<br/>多列模式下,ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算,其他情况从List交叉轴方向起始边开始计算。 | | divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:[ResourceColor](ts-types.md#resourcecolor),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式,默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>endMargin +startMargin 不能超过列宽度。 <br/>startMargin和endMargin不支持设置百分比。<br/>List的分割线画在主轴方向两个子组件之间,第一个子组件上方和最后一个子组件下方不会绘制分割线。<br/>多列模式下,ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算,其他情况从List交叉轴方向起始边开始计算。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>API version 9及以下版本默认值为BarState.Off,API version 10的默认值为BarState.Auto。 | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>API version 9及以下版本默认值为BarState.Off,API version 10的默认值为BarState.Auto。 |
...@@ -128,7 +128,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -128,7 +128,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
只支持item等高场景限位,不等高场景可能存在不准确的情况。 只支持item等高场景限位,不等高场景可能存在不准确的情况。
| 名称 | 描述 | | 名称 | 描述 |
| ------ | ------------------------------------------------------------ | | ------ | ---------------------------------------- |
| NONE | 默认无项目滚动对齐效果。滚动结束列表项何时将无限制地停止。 | | NONE | 默认无项目滚动对齐效果。滚动结束列表项何时将无限制地停止。 |
| START | 视图中的第一项将在列表的开头对齐。<br/>**说明:**<br/>当列表位移至末端,需要将末端的item完整显示,可能出现开头不对齐的情况。 | | START | 视图中的第一项将在列表的开头对齐。<br/>**说明:**<br/>当列表位移至末端,需要将末端的item完整显示,可能出现开头不对齐的情况。 |
| CENTER | 视图中的中间项将在列表中心对齐。<br/>**说明:**<br/>顶端和末尾的item都可以在列表中心对齐,列表显示可能露出空白,第一个或最后一个item会对齐到中间位置。 | | CENTER | 视图中的中间项将在列表中心对齐。<br/>**说明:**<br/>顶端和末尾的item都可以在列表中心对齐,列表显示可能露出空白,第一个或最后一个item会对齐到中间位置。 |
...@@ -157,15 +157,15 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -157,15 +157,15 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
从API version 9开始,该接口支持在ArkTS卡片中使用。 从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 | | 名称 | 描述 |
| ------ | ------------------------------ | | ------ | ---------------------------------------- |
| Idle | 空闲状态。使用控制器提供的方法控制滚动时触发,拖动滚动条滚动时触发。<br/>**说明:** <br/> 从API version 10开始,调整为滚动状态回归空闲时触发,控制器提供的无动画方法控制滚动时触发。 | | Idle | 空闲状态。使用控制器提供的方法控制滚动时触发,拖动滚动条滚动时触发。<br/>**说明:** <br/> 从API version 10开始,调整为滚动状态回归空闲时触发,控制器提供的无动画方法控制滚动时触发。 |
| Scroll | 滚动状态。使用手指拖动List滚动时触发。<br/>**说明:** <br/> 从API version 10开始,拖动滚动条滚动和滚动鼠标滚轮时也会触发。 | | Scroll | 滚动状态。使用手指拖动List滚动时触发。<br/>**说明:** <br/> 从API version 10开始,拖动滚动条滚动和滚动鼠标滚轮时也会触发。 |
| Fling | 惯性滚动状态。快速划动松手后进行惯性滚动和划动到边缘回弹时触发。<br/>**说明:** <br/> 从API version 10开始,由动画控制的滚动都触发。包括快速划动松手后的惯性滚动,划动到边缘回弹的滚动,快速拖动内置滚动条松手后的惯性滚动,使用滚动控制器提供的带动画的方法控制的滚动。 | | Fling | 惯性滚动状态。快速划动松手后进行惯性滚动和划动到边缘回弹时触发。<br/>**说明:** <br/> 从API version 10开始,由动画控制的滚动都触发。包括快速划动松手后的惯性滚动,划动到边缘回弹的滚动,快速拖动内置滚动条松手后的惯性滚动,使用滚动控制器提供的带动画的方法控制的滚动。 |
ScrollState枚举变更如下。 ScrollState枚举变更如下。
| 场景 | API version 9及以下 |API version 10开始 | | 场景 | API version 9及以下 | API version 10开始 |
| ------ | ------------------------------ |------------------------------ | | ------------- | ---------------- | ---------------- |
| 手指拖动滑动 | Scroll | Scroll | | 手指拖动滑动 | Scroll | Scroll |
| 惯性滚动 | Fling | Fling | | 惯性滚动 | Fling | Fling |
| 过界回弹 | Fling | Fling | | 过界回弹 | Fling | Fling |
...@@ -286,7 +286,7 @@ struct ListLanesExample { ...@@ -286,7 +286,7 @@ struct ListLanesExample {
} }
``` ```
![list](figures/list1.gif) ![list](figures/list-alignListItem.gif)
### 示例3 ### 示例3
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | -------------------------------- | ---------------------------------------- | ------ | ---------------------------------------- |
| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)<sup>10+</sup> | - | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时,可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时,可指定不同阴影样式。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用,ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 | | shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)<sup>10+</sup> | - | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时,可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时,可指定不同阴影样式。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用,ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 |
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例,值为1则完全是深褐色的,值为0图像无变化。&nbsp;(百分比)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例,值为1则完全是深褐色的,值为0图像无变化。&nbsp;(百分比)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| hueRotate | number&nbsp;\|&nbsp;string | '0deg' | 色相旋转效果,输入参数为旋转角度。<br/>取值范围:(-∞, +∞)<br/>**说明:** <br/>色调旋转360度会显示原始颜色。先将色调旋转180 度,然后再旋转-180度会显示原始颜色。数据类型为number时,值为90和'90deg'效果一致。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | hueRotate | number&nbsp;\|&nbsp;string | '0deg' | 色相旋转效果,输入参数为旋转角度。<br/>取值范围:(-∞, +∞)<br/>**说明:** <br/>色调旋转360度会显示原始颜色。先将色调旋转180 度,然后再旋转-180度会显示原始颜色。数据类型为number时,值为90和'90deg'效果一致。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| colorBlend&nbsp;<sup>8+</sup> | [Color](ts-appendix-enums.md#color)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | colorBlend&nbsp;<sup>8+</sup> | [Color](ts-appendix-enums.md#color)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| sphericalEffect<sup>10+</sup> | number | - | 设置组件的图像球面化程度。<br/>取值范围:[0,1]。<br/>**说明:**<br/>1. 如果value等于0则图像保持原样,如果value等于1则图像为完全球面化效果。在0和1之间,数值越大,则球面化程度越高。<br/>`value < 0 `或者` value > 1`为异常情况,`value < 0`按0处理,`value > 1`按1处理。<br/> 2. 如果组件的图像使用异步加载,则不支持球面效果。例如Image组件默认使用异步加载,如果要使用球面效果,就要设置`syncLoad``true`,但是这种做法不推荐。`backgroundImage`也是使用异步加载,所以如果设置了`backgroundImage`,不支持球面效果。<br/>3. 如果组件设置了阴影,不支持球面效果。<br>此接口为系统接口。 | | sphericalEffect<sup>10+</sup> | number | - | 设置组件的图像球面化程度。<br/>取值范围:[0,1]。<br/>**说明:**<br/>1. 如果value等于0则图像保持原样,如果value等于1则图像为完全球面化效果。在0和1之间,数值越大,则球面化程度越高。<br/>`value < 0 `或者` value > 1`为异常情况,`value < 0`按0处理,`value > 1`按1处理。<br/> 2. 如果组件的图像使用异步加载,则不支持球面效果。例如Image组件默认使用异步加载,如果要使用球面效果,就要设置`syncLoad``true`,但是这种做法不推荐。`backgroundImage`也是使用异步加载,所以如果设置了`backgroundImage`,不支持球面效果。<br/>3. 如果组件设置了阴影,不支持球面效果。<br>**系统接口:** 此接口为系统接口。 |
| lightUpEffect<sup>10+</sup> | number | - | 设置组件图像亮起程度。<br/>取值范围:[0,1]。<br/>如果value等于0则图像为全黑,如果value等于1则图像为全亮效果。0到1之间数值越大,表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况,`value < 0`按0处理,`value > 1`按1处理。 <br>此接口为系统接口。| | lightUpEffect<sup>10+</sup> | number | - | 设置组件图像亮起程度。<br/>取值范围:[0,1]。<br/>如果value等于0则图像为全黑,如果value等于1则图像为全亮效果。0到1之间数值越大,表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况,`value < 0`按0处理,`value > 1`按1处理。 <br>**系统接口:** 此接口为系统接口。 |
| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | 设置组件的图像边缘像素扩展距离。<br/>参数`options`包括上下左右四个方向的边缘像素扩展距离。<br/>**说明:**<br/>1. 如果距离为正值,表示向外扩展,放大原来图像大小。上下左右四个方向分别用边缘像素填充,填充的距离即为设置的边缘扩展的距离。<br/>2. 如果距离为负值,表示内缩,但是最终图像大小不变。<br/>内缩方式:<br/>图像根据`options`的设置缩小,缩小大小为四个方向边缘扩展距离的绝对值。<br/>图像用边缘像素扩展到原来大小。<br/>3. 对`options`的输入约束:<br/>上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩,方向一致。<br/>所有方向的输入均为百分比或者具体值,不支持百分比和具体值混用。<br/>所有异常情况下,显示为{0,0,0,0}效果,即跟原图保持一致。<br>此接口为系统接口。 | | pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | 设置组件的图像边缘像素扩展距离。<br/>参数`options`包括上下左右四个方向的边缘像素扩展距离。<br/>**说明:**<br/>1. 如果距离为正值,表示向外扩展,放大原来图像大小。上下左右四个方向分别用边缘像素填充,填充的距离即为设置的边缘扩展的距离。<br/>2. 如果距离为负值,表示内缩,但是最终图像大小不变。<br/>内缩方式:<br/>图像根据`options`的设置缩小,缩小大小为四个方向边缘扩展距离的绝对值。<br/>图像用边缘像素扩展到原来大小。<br/>3. 对`options`的输入约束:<br/>上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩,方向一致。<br/>所有方向的输入均为百分比或者具体值,不支持百分比和具体值混用。<br/>所有异常情况下,显示为{0,0,0,0}效果,即跟原图保持一致。<br>**系统接口:** 此接口为系统接口。 |
| linearGradientBlur<sup>10+</sup> | <br/>value: number,<br/>{<br/>fractionStops:Array<FractionStop>,<br/>direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)<br/>} <br/> | - | 为当前组件添加内容线性渐变模糊效果,<br/>-value为模糊半径,模糊半径越大越模糊,为0时不模糊。取值范围:[0, 60]<br/>线性梯度模糊包含两个部分fractionStops和direction<br/>-fractionStops数组中保存的每一个二元数组(取值0-1,小于0则为0,大于0则为1)表示[模糊程度, 模糊位置];模糊位置需严格递增,开发者传入的数据不符合规范会记录日志,渐变模糊数组中二元数组个数必须大于等于2,否则渐变模糊不生效 <br/> -direction为渐变模糊方向,默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom <br/>从API version 10开始,该接口支持在ArkTS卡片中使用。 | | linearGradientBlur<sup>10+</sup> | <br/>value: number,<br/>{<br/>fractionStops:Array<FractionStop>,<br/>direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)<br/>} <br/> | - | 为当前组件添加内容线性渐变模糊效果,<br/>-value为模糊半径,模糊半径越大越模糊,为0时不模糊。取值范围:[0, 60]<br/>线性梯度模糊包含两个部分fractionStops和direction<br/>-fractionStops数组中保存的每一个二元数组(取值0-1,小于0则为0,大于0则为1)表示[模糊程度, 模糊位置];模糊位置需严格递增,开发者传入的数据不符合规范会记录日志,渐变模糊数组中二元数组个数必须大于等于2,否则渐变模糊不生效 <br/> -direction为渐变模糊方向,默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom <br/>从API version 10开始,该接口支持在ArkTS卡片中使用。 |
## ShadowOptions对象说明 ## ShadowOptions对象说明
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
从API version 9开始,该接口支持在ArkTS卡片中使用。 从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 类型 | 必填 | 说明 | | 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | --------------- | | ------- | ---------------------------------------- | ---- | ---------------------------------------- |
| radius | number \| [Resource](ts-types.md#resource) | 是 | 阴影模糊半径。<br/>取值范围:[0, +∞)<br/>**说明:** <br/>设置小于0的值时,按值为0处理。 | | radius | number \| [Resource](ts-types.md#resource) | 是 | 阴影模糊半径。<br/>取值范围:[0, +∞)<br/>**说明:** <br/>设置小于0的值时,按值为0处理。 |
| color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | 否 | 阴影的颜色。<br/>默认为黑色。 | | color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | 否 | 阴影的颜色。<br/>默认为黑色。 |
| offsetX | number \| [Resource](ts-types.md#resource) | 否 | 阴影的X轴偏移量。<br/>默认为0。 | | offsetX | number \| [Resource](ts-types.md#resource) | 否 | 阴影的X轴偏移量。<br/>默认为0。 |
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
## ShadowStyle<sup>10+</sup>枚举说明 ## ShadowStyle<sup>10+</sup>枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ------ | -------------------------------------- | | ----------------- | ------ |
| OUTER_DEFAULT_XS | 超小阴影。 | | OUTER_DEFAULT_XS | 超小阴影。 |
| OUTER_DEFAULT_SM | 小阴影。 | | OUTER_DEFAULT_SM | 小阴影。 |
| OUTER_DEFAULT_MD | 中阴影。 | | OUTER_DEFAULT_MD | 中阴影。 |
......
...@@ -653,8 +653,6 @@ Badge({ ...@@ -653,8 +653,6 @@ Badge({
3. 监听手指抬起事件,若此时移动达到最大值,则触发数据加载并显示刷新视图,加载完成后将此视图隐藏。 3. 监听手指抬起事件,若此时移动达到最大值,则触发数据加载并显示刷新视图,加载完成后将此视图隐藏。
下拉刷新与上拉加载的具体实现可参考Codelab:[新闻数据加载](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/NewsDataArkTS)。若开发者希望快速实现此功能,也可使用三方组件[PullToRefresh](https://gitee.com/openharmony-sig/PullToRefresh)
## 编辑列表 ## 编辑列表
...@@ -847,3 +845,5 @@ List() { ...@@ -847,3 +845,5 @@ List() {
- [List组件的使用之商品列表(ArkTS)(API9)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/List) - [List组件的使用之商品列表(ArkTS)(API9)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/List)
- [List组件的使用之设置项(ArkTS)(API9)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/List_HDC) - [List组件的使用之设置项(ArkTS)(API9)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/List_HDC)
- [PullToRefresh](https://gitee.com/openharmony-sig/PullToRefresh)
\ No newline at end of file
...@@ -19,7 +19,10 @@ Router模块提供了两种跳转模式,分别是[router.pushUrl()](../referen ...@@ -19,7 +19,10 @@ Router模块提供了两种跳转模式,分别是[router.pushUrl()](../referen
>**说明:** >**说明:**
> >
>页面栈的最大容量为32个页面。如果超过这个限制,可以调用[router.clear()](../reference/apis/js-apis-router.md#routerclear)方法清空历史页面栈,释放内存空间。 >- 创建新页面时,请参考[构建第二个页面](../quick-start/start-with-ets-stage.md)配置第二个页面的路由。
>
>
>- 页面栈的最大容量为32个页面。如果超过这个限制,可以调用[router.clear()](../reference/apis/js-apis-router.md#routerclear)方法清空历史页面栈,释放内存空间。
同时,Router模块提供了两种实例模式,分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。 同时,Router模块提供了两种实例模式,分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。
......
...@@ -65,7 +65,7 @@ text是文本组件,用于呈现一段文本信息。具体用法请参考[tex ...@@ -65,7 +65,7 @@ text是文本组件,用于呈现一段文本信息。具体用法请参考[tex
- 添加划线 - 添加划线
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考 text自有样式。 设置text-decoration和text-decoration-color属性为文本添加划线和划线颜色,text-decoration枚举值请参考 text自有样式。
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
...@@ -276,4 +276,4 @@ export default { ...@@ -276,4 +276,4 @@ export default {
针对text开发,有以下相关实例可供参考: 针对text开发,有以下相关实例可供参考:
- [`JsComponentCollection`:JS组件集合(JS)(API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentClollection/JsComponentCollection) - [`JsComponentCollection`:JS组件集合(JS)(API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentCollection/JsComponentCollection)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册