diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md index 9c531eb70a6fb5e99fa31521671fa8b69a1b2395..d2bd219f5a991979a56a0b7f431fd850fc63b7b5 100644 --- a/zh-cn/application-dev/reference/apis/Readme-CN.md +++ b/zh-cn/application-dev/reference/apis/Readme-CN.md @@ -382,6 +382,7 @@ - [console (控制台)](js-apis-logs.md) - [Timer (定时器)](js-apis-timer.md) - [syscap (系统能力)](js-apis-syscap.md) + - [@system.app (应用上下文)](js-apis-system-app.md) - application - [AccessibilityExtensionContext (辅助功能扩展上下文)](js-apis-inner-application-accessibilityExtensionContext.md) @@ -433,7 +434,7 @@ - [@ohos.account.appAccount (应用帐号管理)](js-apis-appAccount.md) - [@ohos.account.distributedAccount (分布式帐号管理)](js-apis-distributed-account.md) - [@ohos.account.osAccount (系统帐号管理)](js-apis-osAccount.md) - + - 定制管理 - [@ohos.configPolicy (配置策略)](js-apis-configPolicy.md) @@ -504,7 +505,6 @@ - [@ohos.systemParameter (系统属性)](js-apis-system-parameter.md) - [@ohos.systemTime (系统时间、时区)](js-apis-system-time.md) - [@ohos.usb (USB管理)](js-apis-usb-deprecated.md) - - [@system.app (应用上下文)](js-apis-system-app.md) - [@system.battery (电量信息)](js-apis-system-battery.md) - [@system.bluetooth (蓝牙)](js-apis-system-bluetooth.md) - [@system.brightness (屏幕亮度)](js-apis-system-brightness.md) diff --git a/zh-cn/application-dev/reference/apis/js-apis-webview.md b/zh-cn/application-dev/reference/apis/js-apis-webview.md index b7e6b88c0342f2265e0df7da14606d4e2e451f19..5526105d3d2af4ca5979a52c741bcc6d2f96657c 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-webview.md +++ b/zh-cn/application-dev/reference/apis/js-apis-webview.md @@ -254,20 +254,20 @@ struct WebComponent { .onClick(() => { // 使用本侧端口发送消息给HTML5 try { - console.log("In eTS side send true start"); + console.log("In ArkTS side send true start"); if (this.nativePort) { this.message.setString("helloFromEts"); this.nativePort.postMessageEventExt(this.message); } } 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 }) .onPageEnd((e)=>{ - console.log("In eTS side message onPageEnd init mesaage channel"); + console.log("In ArkTS side message onPageEnd init mesaage channel"); // 1. 创建消息端口 this.ports = this.controller.createWebMessagePorts(true); // 2. 发送端口1到HTML5 @@ -276,10 +276,10 @@ struct WebComponent { this.nativePort = this.ports[0]; // 4. 设置回调函数 this.nativePort.onMessageEventExt((result) => { - console.log("In eTS side got message"); + console.log("In ArkTS side got message"); try { var type = result.getType(); - console.log("In eTS side getType:" + type); + console.log("In ArkTS side getType:" + type); switch (type) { case web_webview.WebMessageType.STRING: { this.msg1 = "result type:" + typeof (result.getString()); diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/list1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/list-alignListItem.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/list1.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/list-alignListItem.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index f037fe4e30d058e9f472f501a5c3eb4a7f9c93f0..420c4edd5e47e3fd3cf060e42d08eafdb07ff8a0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -11,44 +11,54 @@ Navigation组件一般作为Page页面的根容器，通过属性设置来展示 可以包含子组件。从API Version 9开始，推荐与[NavRouter](ts-basic-components-navrouter.md)组件搭配使用。 - ## 接口 -**方法1：** Navigation() +### Navigation + +Navigation() -**方法2：** Navigation(pathInfos: NavPathStack)10+ +### Navigation10+ - 绑定路由栈到Navigation组件。 +Navigation(pathInfos: NavPathStack)10+ + +绑定路由栈到Navigation组件。 **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ------- | ----------------------------------- | ---- | ------------- | -| pathInfos | [NavPathStack](#navpathstack10) | 否 | 路由栈信息。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| --------- | ------------------------------- | ---- | ------ | +| pathInfos | [NavPathStack](#navpathstack10) | 否 | 路由栈信息。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| ----------------------------- | ---------------------------------------- | ---------------------------------------- | -| title | [ResourceStr](ts-types.md#resourcestr)10+ \| [CustomBuilder](ts-types.md#custombuilder8)8+ \| [NavigationCommonTitle](#navigationcommontitle类型说明)9+ \| [NavigationCustomTitle](#navigationcustomtitle类型说明)9+ | 页面标题。
**说明：**
使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。
字符串超长时，如果不设置副标题，先缩小再换行（2行）最后...截断。如果设置副标题，先缩小最后...截断。 | -| subTitle(deprecated) | string | 页面副标题。不设置时不显示副标题。从API Version 9开始废弃，建议使用title代替。 | -| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 页面右上角菜单。不设置时不显示菜单项。使用Array<[NavigationMenuItem](#navigationmenuitem类型说明)> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 | -| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。
默认值：NavigationTitleMode.Free | -| toolBar(deprecated) | [object](#object类型说明) \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 设置工具栏内容。不设置时不显示工具栏。
items: 工具栏所有项。
**说明：**
items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。
从API version 10开始，该接口不再维护，推荐使用toolbarConfiguration代替。 | -| toolbarConfiguration10+ | Array<[ToolbarItem](#toolbaritem10类型说明)10+> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 设置工具栏内容。不设置时不显示工具栏。
**说明：**
使用Array<[ToolbarItem](#ToolbarItem类型说明)>写法设置的工具栏有如下特性：
工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。
文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。
竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏下必须配合menus属性的Array<[NavigationMenuItem](#navigationmenuitem类型说明)>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。
使用[CustomBuilder](ts-types.md#custombuilder8)写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 | -| hideToolBar | boolean | 隐藏工具栏。
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。 | -| hideTitleBar | boolean | 隐藏标题栏。
默认值：false
true: 隐藏标题栏。
false: 显示标题栏。 | -| hideBackButton | boolean | 隐藏返回键。
默认值：false
true: 隐藏返回键。
false: 显示返回键。
不支持隐藏NavDestination组件标题栏中的返回图标。
**说明：**
返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。 | -| navBarWidth9+ | [Length](ts-types.md#length) | 导航栏宽度。
默认值：240
单位：vp
**说明：**
仅在Navigation组件分栏时生效。 | -| navBarPosition9+ | [NavBarPosition](#navbarposition枚举说明) | 导航栏位置。
默认值：NavBarPosition.Start
**说明：**
仅在Navigation组件分栏时生效。 | -| mode9+ | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。
默认值：NavigationMode.Auto
自适应：基于组件宽度自适应单栏和双栏。
**说明：**
支持Stack、Split与Auto模式。 | -| backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。 | -| hideNavBar9+ | boolean | 是否显示导航栏（仅在mode为NavigationMode.Split时生效）。 | -| navDestination10+ | builder: (name: string, param: unknown) => void | 创建NavDestination组件。
**说明：**
使用builder函数，基于name和param构造NavDestination组件。builder中允许在NavDestination组件外包含一层自定义组件， 但自定义组件不允许设置属性和事件，否则仅显示空白。 | -| navBarWidthRange10+ | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | 导航栏最小和最大宽度（双栏模式下生效）。
默认值：最小默认值 240，最大默认值为组件宽度的40% ，且不大于 432。
单位：vp
规则：
开发者设置优先级 > 默认值
最小值优先级 > 最大值
navBar 优先级 > content优先级
开发者设置多个值冲突，以全局数值优先，局部最小值跟随容器大小。 | -| minContentWidth10+ | [Dimension](ts-types.md#dimension10) | 导航栏内容区最小宽度（双栏模式下生效）。
默认值：360
单位：vp
规则：
开发者设置优先级 > 默认值
最小值优先级 > 最大值
navBar优先级 > content优先级
开发者设置多个值冲突，以全局数值优先，局部最小值跟随容器大小。
Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp) | +| 名称 | 参数类型 | 描述 | +| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | +| title | [ResourceStr](ts-types.md#resourcestr)10+ \| [CustomBuilder](ts-types.md#custombuilder8)8+ \| [NavigationCommonTitle](#navigationcommontitle类型说明)9+ \| [NavigationCustomTitle](#navigationcustomtitle类型说明)9+ | 页面标题。
**说明：**
使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。
字符串超长时，如果不设置副标题，先缩小再换行（2行）最后...截断。如果设置副标题，先缩小最后...截断。 | +| subTitle(deprecated) | string | 页面副标题。不设置时不显示副标题。从API Version 9开始废弃，建议使用title代替。 | +| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 页面右上角菜单。不设置时不显示菜单项。使用Array<[NavigationMenuItem](#navigationmenuitem类型说明)> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 | +| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。
默认值：NavigationTitleMode.Free | +| toolBar(deprecated) | [object](#object类型说明) \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 设置工具栏内容。不设置时不显示工具栏。
items: 工具栏所有项。
**说明：**
items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。
从API version 10开始，该接口不再维护，推荐使用toolbarConfiguration代替。 | +| toolbarConfiguration10+ | Array<[ToolbarItem](#toolbaritem10类型说明)10+> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 设置工具栏内容。不设置时不显示工具栏。
**说明：**
使用Array<[ToolbarItem](#ToolbarItem类型说明)>写法设置的工具栏有如下特性：
工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。
文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。
竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏下必须配合menus属性的Array<[NavigationMenuItem](#navigationmenuitem类型说明)>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。
使用[CustomBuilder](ts-types.md#custombuilder8)写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 | +| hideToolBar | boolean | 隐藏工具栏。
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。 | +| hideTitleBar | boolean | 隐藏标题栏。
默认值：false
true: 隐藏标题栏。
false: 显示标题栏。 | +| hideBackButton | boolean | 隐藏返回键。
默认值：false
true: 隐藏返回键。
false: 显示返回键。
不支持隐藏NavDestination组件标题栏中的返回图标。
**说明：**
返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。 | +| navBarWidth9+ | [Length](ts-types.md#length) | 导航栏宽度。
默认值：240
单位：vp
**说明：**
仅在Navigation组件分栏时生效。 | +| navBarPosition9+ | [NavBarPosition](#navbarposition枚举说明) | 导航栏位置。
默认值：NavBarPosition.Start
**说明：**
仅在Navigation组件分栏时生效。 | +| mode9+ | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。
默认值：NavigationMode.Auto
自适应：基于组件宽度自适应单栏和双栏。
**说明：**
支持Stack、Split与Auto模式。 | +| backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。 | +| hideNavBar9+ | boolean | 是否显示导航栏（仅在mode为NavigationMode.Split时生效）。 | +| navDestination10+ | builder: (name: string, param: unknown) => void | 创建NavDestination组件。
**说明：**
使用builder函数，基于name和param构造NavDestination组件。builder中允许在NavDestination组件外包含一层自定义组件， 但自定义组件不允许设置属性和事件，否则仅显示空白。 | +| navBarWidthRange10+ | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | 导航栏最小和最大宽度（双栏模式下生效）。
默认值：最小默认值 240，最大默认值为组件宽度的40% ，且不大于 432。
单位：vp
规则：
开发者设置优先级 > 默认值
最小值优先级 > 最大值
navBar 优先级 > content优先级
开发者设置多个值冲突，以全局数值优先，局部最小值跟随容器大小。 | +| minContentWidth10+ | [Dimension](ts-types.md#dimension10) | 导航栏内容区最小宽度（双栏模式下生效）。
默认值：360
单位：vp
规则：
开发者设置优先级 > 默认值
最小值优先级 > 最大值
navBar优先级 > content优先级
开发者设置多个值冲突，以全局数值优先，局部最小值跟随容器大小。
Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp) | + +## 事件 + +| 名称 | 功能描述 | +| ---------------------------------------- | ---------------------------------------- | +| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 | +| onNavBarStateChange(callback: (isVisible: boolean) => void) | 导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示，为false时表示隐藏。 | ## NavPathStack10+ @@ -62,9 +72,9 @@ pushPath(info: NavPathInfo): void **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ----------------------------- | ---- | -------------------- | +| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | ### pushPathByName10+ @@ -74,10 +84,10 @@ pushPathByName(name: string, param: unknown): void **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| name | string | 是 | NavDestination页面名称。 | -| param | unknown | 是 | NavDestination页面详细参数。 | +| 名称 | 类型 | 必填 | 描述 | +| ----- | ------- | ---- | --------------------- | +| name | string | 是 | NavDestination页面名称。 | +| param | unknown | 是 | NavDestination页面详细参数。 | ### pop10+ @@ -87,10 +97,10 @@ pop(): NavPathInfo | undefined **返回值：** -| 类型 | 说明 | -| ------ | -------- | +| 类型 | 说明 | +| ----------- | ------------------------ | | NavPathInfo | 返回栈顶NavDestination页面的信息。 | -| undefined | 当路由栈为空时返回undefined。 | +| undefined | 当路由栈为空时返回undefined。 | ### popToName10+ @@ -100,14 +110,14 @@ popToName(name: string): number **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| name | string | 是 | NavDestination页面名称。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ------------------- | +| name | string | 是 | NavDestination页面名称。 | **返回值：** -| 类型 | 说明 | -| ------ | -------- | +| 类型 | 说明 | +| ------ | ---------------------------------------- | | number | 如果栈中存在名为name的NavDestination页面，则返回第一个名为name的NavDestination页面的索引，否则返回-1。 | ### popToIndex10+ @@ -118,9 +128,9 @@ popToIndex(index: number): void **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| index | number | 是 | NavDestination页面的位置索引。 | +| 名称 | 类型 | 必填 | 描述 | +| ----- | ------ | ---- | ---------------------- | +| index | number | 是 | NavDestination页面的位置索引。 | ### moveToTop10+ @@ -130,14 +140,14 @@ moveToTop(name: string): number **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| name | string | 是 | NavDestination页面名称。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ------------------- | +| name | string | 是 | NavDestination页面名称。 | **返回值：** -| 类型 | 说明 | -| ------ | -------- | +| 类型 | 说明 | +| ------ | ---------------------------------------- | | number | 如果栈中存在名为name的NavDestination页面，则返回第一个名为name的NavDestination页面的当前索引，否则返回-1。 | ### moveIndexToTop10+ @@ -148,9 +158,9 @@ moveIndexToTop(index: number): void **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| index | number | 是 | NavDestination页面的位置索引。 | +| 名称 | 类型 | 必填 | 描述 | +| ----- | ------ | ---- | ---------------------- | +| index | number | 是 | NavDestination页面的位置索引。 | ### clear10+ @@ -166,8 +176,8 @@ getAllPathName(): Array **返回值：** -| 类型 | 说明 | -| ------ | -------- | +| 类型 | 说明 | +| -------------- | -------------------------- | | Array | 返回栈中所有NavDestination页面的名称。 | ### getParamByIndex10+ @@ -178,16 +188,16 @@ getParamByIndex(index: number): unknown | undefined **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| index | number | 是 | NavDestination页面的位置索引。 | +| 名称 | 类型 | 必填 | 描述 | +| ----- | ------ | ---- | ---------------------- | +| index | number | 是 | NavDestination页面的位置索引。 | **返回值：** -| 类型 | 说明 | -| ------ | -------- | -| unknown | 返回对应NavDestination页面的参数信息。 | -| undefined | 传入index无效时返回undefined。 | +| 类型 | 说明 | +| --------- | -------------------------- | +| unknown | 返回对应NavDestination页面的参数信息。 | +| undefined | 传入index无效时返回undefined。 | ### getParamByName10+ @@ -197,15 +207,15 @@ getParamByName(name: string): Array **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| name | string | 是 | NavDestination页面名称。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ------------------- | +| name | string | 是 | NavDestination页面名称。 | **返回值：** -| 类型 | 说明 | -| ------ | -------- | -| Array | 返回全部名为name的NavDestination页面的参数信息。 | +| 类型 | 说明 | +| --------------- | --------------------------------- | +| Array | 返回全部名为name的NavDestination页面的参数信息。 | ### getIndexByName10+ @@ -215,15 +225,15 @@ getIndexByName(name: string): Array **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| name | string | 是 | NavDestination页面名称。 | +| 名称 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ------------------- | +| name | string | 是 | NavDestination页面名称。 | **返回值：** -| 类型 | 说明 | -| ------ | -------- | -| Array | 返回全部名为name的NavDestination页面的位置索引。 | +| 类型 | 说明 | +| -------------- | --------------------------------- | +| Array | 返回全部名为name的NavDestination页面的位置索引。 | ### size10+ @@ -233,9 +243,9 @@ size(): number **返回值：** -| 类型 | 说明 | -| ------ | -------- | -| number | 返回栈大小。 | +| 类型 | 说明 | +| ------ | ------ | +| number | 返回栈大小。 | ## NavPathInfo10+ @@ -247,52 +257,52 @@ constructor(name: string, param: unknown) **参数：** -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| name | string | 是 | NavDestination页面名称。 | -| param | unknown | 否 | NavDestination页面详细参数。 | +| 名称 | 类型 | 必填 | 描述 | +| ----- | ------- | ---- | --------------------- | +| name | string | 是 | NavDestination页面名称。 | +| param | unknown | 否 | NavDestination页面详细参数。 | ## NavigationMenuItem类型说明 -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| value | string | 是 | 菜单栏单个选项的显示文本。 | -| icon | string | 否 | 菜单栏单个选项的图标资源路径。 | -| action | () => void | 否 | 当前选项被选中的事件回调。 | +| 名称 | 类型 | 必填 | 描述 | +| ------ | ------------- | ---- | --------------- | +| value | string | 是 | 菜单栏单个选项的显示文本。 | +| icon | string | 否 | 菜单栏单个选项的图标资源路径。 | +| action | () => void | 否 | 当前选项被选中的事件回调。 | ## object类型说明 -| 名称 | 类型 | 必填 | 描述 | -| ------ | ----------------------- | ---- | --------------- | -| value | string | 是 | 工具栏单个选项的显示文本。 | -| icon | string | 否 | 工具栏单个选项的图标资源路径。 | -| action | () => void | 否 | 当前选项被选中的事件回调。 | +| 名称 | 类型 | 必填 | 描述 | +| ------ | ------------- | ---- | --------------- | +| value | string | 是 | 工具栏单个选项的显示文本。 | +| icon | string | 否 | 工具栏单个选项的图标资源路径。 | +| action | () => void | 否 | 当前选项被选中的事件回调。 | ## ToolbarItem10+类型说明 -| 名称 | 类型 | 必填 | 描述 | -| ---------- | ------------------------------------------------- | ---- | ----------------------------------------------------------- | -| value | ResourceStr | 是 | 工具栏单个选项的显示文本。 | -| icon | ResourceStr | 否 | 工具栏单个选项的图标资源路径。 | -| action | () => void | 否 | 当前选项被选中的事件回调。 | -| status | [ToolbarItemStatus](#toolbaritemstatus10枚举说明) | 否 | 工具栏单个选项的状态。
默认值：ToolbarItemStatus.NORMAL | -| activeIcon | ResourceStr | 否 | 工具栏单个选项处于ACTIVE态时的图标资源路径。 | +| 名称 | 类型 | 必填 | 描述 | +| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | +| value | ResourceStr | 是 | 工具栏单个选项的显示文本。 | +| icon | ResourceStr | 否 | 工具栏单个选项的图标资源路径。 | +| action | () => void | 否 | 当前选项被选中的事件回调。 | +| status | [ToolbarItemStatus](#toolbaritemstatus10枚举说明) | 否 | 工具栏单个选项的状态。
默认值：ToolbarItemStatus.NORMAL | +| activeIcon | ResourceStr | 否 | 工具栏单个选项处于ACTIVE态时的图标资源路径。 | ## ToolbarItemStatus10+枚举说明 -| 名称 | 描述 | -| -------- | ------------------------------------------------------------ | +| 名称 | 描述 | +| -------- | ---------------------------------------- | | NORMAL | 设置工具栏单个选项为NORMAL态，该选项显示默认样式，可以触发Hover，Press，Focus事件并显示对应的多态样式。 | | DISABLED | 设置工具栏单个选项为DISABLED态， 该选项显示DISABLED态样式，并且不可交互。 | | ACTIVE | 设置工具栏单个选项为ACTIVE态， 该选项通过点击事件可以将icon图标更新为activeIcon对应的图片资源。 | ## NavigationTitleMode枚举说明 -| 名称 | 描述 | -| ---- | ------------------------------------------------------------ | +| 名称 | 描述 | +| ---- | ---------------------------------------- | | Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。
**说明：**
标题随着内容滚动大小联动的动效在title设置为ResourceStr和NavigationCommonTitle时生效，设置成其余自定义节点类型时字体样式无法变化，下拉时只影响标题栏偏移。 | -| Mini | 固定为小标题模式。 | -| Full | 固定为大标题模式。 | +| Mini | 固定为小标题模式。 | +| Full | 固定为大标题模式。 | ## NavigationCommonTitle类型说明 @@ -306,7 +316,7 @@ constructor(name: string, param: unknown) | 名称 | 类型 | 必填 | 描述 | | ------- | ---------------------------------------- | ---- | -------- | | builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 | -| height | [TitleHeight](#titleheight枚举说明) \| [Length](ts-types.md#length) | 是 | 设置标题栏高度。 | +| height | [TitleHeight](#titleheight枚举说明) \| [Length](ts-types.md#length) | 是 | 设置标题栏高度。 | ## NavBarPosition枚举说明 @@ -317,10 +327,10 @@ constructor(name: string, param: unknown) ## NavigationMode枚举说明 -| 名称 | 描述 | -| ----- | ------------------------------------------------------------ | +| 名称 | 描述 | +| ----- | ---------------------------------------- | | Stack | 导航栏与内容区独立显示，相当于两个页面。 | -| Split | 导航栏与内容区分两栏显示。 | +| Split | 导航栏与内容区分两栏显示。 | | Auto | API version 9之前：窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。
API version 10及以上：窗口宽度>=600vp时，采用Split模式显示；窗口宽度<600vp时，采用Stack模式显示，600vp等于minNavBarWidth(240vp) + minContentWidth (360vp)。 | ## TitleHeight枚举说明 @@ -332,17 +342,10 @@ constructor(name: string, param: unknown) > **说明：** +> > 目前可滚动组件只支持List。 -## 事件 - -| 名称 | 功能描述 | -| ---------------------------------------- | ---------------------------------------- | -| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 | -| onNavBarStateChange(callback: (isVisible: boolean) => void) | 导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示，为false时表示隐藏。 | - - ## 示例 ```ts diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index 778e672edb9f31cebb7964c456c5de9f6554b15c..65ecdf48152dd8f904713e15c70d41d5de9404ce 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -49,24 +49,24 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。
默认值：Axis.Vertical
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md#resourcecolor),
startMargin?: Length,
endMargin?: Length
} \| null | 设置ListItem分割线样式，默认无分割线。
- strokeWidth: 分割线的线宽。
- color: 分割线的颜色。
- startMargin: 分割线与列表侧边起始端的距离。
- endMargin: 分割线与列表侧边结束端的距离。
从API version 9开始，该接口支持在ArkTS卡片中使用。
endMargin +startMargin 不能超过列宽度。
startMargin和endMargin不支持设置百分比。
List的分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。
多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，其他情况从List交叉轴方向起始边开始计算。 | -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
API version 9及以下版本默认值为BarState.Off，API version 10的默认值为BarState.Auto。 | -| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量，只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
单列模式下，会在List显示的ListItem前后各缓存cachedCount个ListItem。
多列模式下， 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 | -| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。可参考[示例3](#示例3)实现删除选中的list项。
默认值：false | -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果，支持弹簧效果和阴影效果。
默认值：EdgeEffect.Spring
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| chainAnimation | boolean | 设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
默认值：false
- false：不启用链式联动。
- true：启用链式联动。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
链式动效生效后，List的分割线不显示。
链式动效生效需要满足以下前提条件：
-  List边缘效果为Spring类型
-  List没有启用多列模式 | -| chainAnimationOptions10+ | [ChainAnimationOptions](#chainanimationoptions10对象说明) | 设置链式联动动效参数。
**系统API：** 此接口为系统接口。 | -| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值：false
- false：关闭框选。
- true：开启框选。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain),
gutter10+?:[Dimension](ts-types.md#dimension) | 以列模式为例（listDirection为Axis.Vertical）:
lanes用于决定List组件在交叉轴方向按几列布局。
默认值：1
规则如下：
- lanes为指定的数量时，根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。
- lanes设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的交叉轴尺寸符合最小限制。
- lanes设置了{minLength，maxLength}，如果父组件交叉轴方向尺寸约束为无穷大时，固定按一列排列，列宽度按显示区域内最大的ListItem计算
- ListItemGroup在多列模式下也是独占一行，ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。
- lanes设置了{minLength，maxLength}时，计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。
gutter为列间距，当列数大于1时生效。
默认值为 0
该接口支持在ArkTS卡片中使用。 | -| alignListItem9+ | [ListItemAlign](#listitemalign9枚举说明) | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
默认值：ListItemAlign.Start
该接口支持在ArkTS卡片中使用。 | -| sticky9+ | [StickyStyle](#stickystyle9枚举说明) | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值：StickyStyle.None
该接口支持在ArkTS卡片中使用。
**说明：**
sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 | -| scrollSnapAlign10+ | [ScrollSnapAlign](#scrollsnapalign10枚举说明) | 设置列表项滚动结束对齐效果。
默认值：ScrollSnapAlign.NONE
**说明：**
只支持ListItem等高情况下，设置列表项滚动结束对齐效果。 | -| enableScrollInteraction10+ | boolean | 设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。
默认值：true | -| nestedScroll10+ | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。 | -| friction10+ | number \| [Resource](ts-types.md#resource) | 设置摩擦系数，手动划动滚动区域时生效，只对惯性滚动过程有影响，对惯性滚动过程中的链式效果有间接影响。
默认值：非可穿戴设备为0.6，可穿戴设备为0.9
**说明：**
设置为小于等于0的值时，按默认值处理 | +| 名称 | 参数类型 | 描述 | +| ------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。
默认值：Axis.Vertical
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md#resourcecolor),
startMargin?: Length,
endMargin?: Length
} \| null | 设置ListItem分割线样式，默认无分割线。
- strokeWidth: 分割线的线宽。
- color: 分割线的颜色。
- startMargin: 分割线与列表侧边起始端的距离。
- endMargin: 分割线与列表侧边结束端的距离。
从API version 9开始，该接口支持在ArkTS卡片中使用。
endMargin +startMargin 不能超过列宽度。
startMargin和endMargin不支持设置百分比。
List的分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。
多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，其他情况从List交叉轴方向起始边开始计算。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
API version 9及以下版本默认值为BarState.Off，API version 10的默认值为BarState.Auto。 | +| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量，只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
单列模式下，会在List显示的ListItem前后各缓存cachedCount个ListItem。
多列模式下， 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 | +| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。可参考[示例3](#示例3)实现删除选中的list项。
默认值：false | +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果，支持弹簧效果和阴影效果。
默认值：EdgeEffect.Spring
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| chainAnimation | boolean | 设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
默认值：false
- false：不启用链式联动。
- true：启用链式联动。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
链式动效生效后，List的分割线不显示。
链式动效生效需要满足以下前提条件：
-  List边缘效果为Spring类型
-  List没有启用多列模式 | +| chainAnimationOptions10+ | [ChainAnimationOptions](#chainanimationoptions10对象说明) | 设置链式联动动效参数。
**系统API：** 此接口为系统接口。 | +| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值：false
- false：关闭框选。
- true：开启框选。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain),
gutter10+?:[Dimension](ts-types.md#dimension) | 以列模式为例（listDirection为Axis.Vertical）:
lanes用于决定List组件在交叉轴方向按几列布局。
默认值：1
规则如下：
- lanes为指定的数量时，根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。
- lanes设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的交叉轴尺寸符合最小限制。
- lanes设置了{minLength，maxLength}，如果父组件交叉轴方向尺寸约束为无穷大时，固定按一列排列，列宽度按显示区域内最大的ListItem计算
- ListItemGroup在多列模式下也是独占一行，ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。
- lanes设置了{minLength，maxLength}时，计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。
gutter为列间距，当列数大于1时生效。
默认值为 0
该接口支持在ArkTS卡片中使用。 | +| alignListItem9+ | [ListItemAlign](#listitemalign9枚举说明) | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
默认值：ListItemAlign.Start
该接口支持在ArkTS卡片中使用。 | +| sticky9+ | [StickyStyle](#stickystyle9枚举说明) | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值：StickyStyle.None
该接口支持在ArkTS卡片中使用。
**说明：**
sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 | +| scrollSnapAlign10+ | [ScrollSnapAlign](#scrollsnapalign10枚举说明) | 设置列表项滚动结束对齐效果。
默认值：ScrollSnapAlign.NONE
**说明：**
只支持ListItem等高情况下，设置列表项滚动结束对齐效果。 | +| enableScrollInteraction10+ | boolean | 设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。
默认值：true | +| nestedScroll10+ | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。 | +| friction10+ | number \| [Resource](ts-types.md#resource) | 设置摩擦系数，手动划动滚动区域时生效，只对惯性滚动过程有影响，对惯性滚动过程中的链式效果有间接影响。
默认值：非可穿戴设备为0.6，可穿戴设备为0.9
**说明：**
设置为小于等于0的值时，按默认值处理 | ## ListItemAlign9+枚举说明 @@ -127,9 +127,9 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? 只支持item等高场景限位，不等高场景可能存在不准确的情况。 -| 名称 | 描述 | -| ------ | ------------------------------------------------------------ | -| NONE | 默认无项目滚动对齐效果。滚动结束列表项何时将无限制地停止。 | +| 名称 | 描述 | +| ------ | ---------------------------------------- | +| NONE | 默认无项目滚动对齐效果。滚动结束列表项何时将无限制地停止。 | | START | 视图中的第一项将在列表的开头对齐。
**说明：**
当列表位移至末端，需要将末端的item完整显示，可能出现开头不对齐的情况。 | | CENTER | 视图中的中间项将在列表中心对齐。
**说明：**
顶端和末尾的item都可以在列表中心对齐，列表显示可能露出空白，第一个或最后一个item会对齐到中间位置。 | | END | 视图中的最后一项将在列表末尾对齐。
**说明：**
当列表位移至顶端，需要将顶端的item完整显示，可能出现末尾不对齐的情况。 | @@ -156,23 +156,23 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? 从API version 9开始，该接口支持在ArkTS卡片中使用。 -| 名称 | 描述 | -| ------ | ------------------------------ | +| 名称 | 描述 | +| ------ | ---------------------------------------- | | Idle | 空闲状态。使用控制器提供的方法控制滚动时触发，拖动滚动条滚动时触发。
**说明：**
从API version 10开始，调整为滚动状态回归空闲时触发，控制器提供的无动画方法控制滚动时触发。 | -| Scroll | 滚动状态。使用手指拖动List滚动时触发。
**说明：**
从API version 10开始，拖动滚动条滚动和滚动鼠标滚轮时也会触发。 | +| Scroll | 滚动状态。使用手指拖动List滚动时触发。
**说明：**
从API version 10开始，拖动滚动条滚动和滚动鼠标滚轮时也会触发。 | | Fling | 惯性滚动状态。快速划动松手后进行惯性滚动和划动到边缘回弹时触发。
**说明：**
从API version 10开始，由动画控制的滚动都触发。包括快速划动松手后的惯性滚动，划动到边缘回弹的滚动，快速拖动内置滚动条松手后的惯性滚动，使用滚动控制器提供的带动画的方法控制的滚动。 | ScrollState枚举变更如下。 -| 场景 | API version 9及以下 |API version 10开始 | -| ------ | ------------------------------ |------------------------------ | -| 手指拖动滑动 | Scroll | Scroll | -| 惯性滚动 | Fling | Fling | -| 过界回弹 | Fling | Fling | -| 鼠标滚轮滚动 | Idle | Scroll | -| 拖动滚动条 | Idle | Scroll | -| 滚动控制器滚动（带动画） | Idle | Fling | -| 滚动控制器滚动（不带动画） | Idle | Idle | +| 场景 | API version 9及以下 | API version 10开始 | +| ------------- | ---------------- | ---------------- | +| 手指拖动滑动 | Scroll | Scroll | +| 惯性滚动 | Fling | Fling | +| 过界回弹 | Fling | Fling | +| 鼠标滚轮滚动 | Idle | Scroll | +| 拖动滚动条 | Idle | Scroll | +| 滚动控制器滚动（带动画） | Idle | Fling | +| 滚动控制器滚动（不带动画） | Idle | Idle | > **说明：** > @@ -286,7 +286,7 @@ struct ListLanesExample { } ``` -![list](figures/list1.gif) +![list](figures/list-alignListItem.gif) ### 示例3 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 1fe3575b6885936a52079839a91aab5bb6dc7692..ab26f2afbc6c7c55a4c405fd43deeec340613405 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -10,23 +10,23 @@ ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | -| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| -------------------------------- | ---------------------------------------- | ------ | ---------------------------------------- | +| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)10+ | - | 为当前组件添加阴影效果。
入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
入参类型为ShadowStyle时，可指定不同阴影样式。
从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 | -| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大。
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| invert | number | 0 | 反转输入的图像。入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比）
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| hueRotate | number \| string | '0deg' | 色相旋转效果，输入参数为旋转角度。
取值范围：(-∞, +∞)
**说明：**
色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大。
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| invert | number | 0 | 反转输入的图像。入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比）
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| hueRotate | number \| string | '0deg' | 色相旋转效果，输入参数为旋转角度。
取值范围：(-∞, +∞)
**说明：**
色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| sphericalEffect10+ | number | - | 设置组件的图像球面化程度。
取值范围：[0,1]。
**说明：**
1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。
`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
2. 如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`backgroundImage`也是使用异步加载，所以如果设置了`backgroundImage`，不支持球面效果。
3. 如果组件设置了阴影，不支持球面效果。
此接口为系统接口。 | -| lightUpEffect10+ | number | - | 设置组件图像亮起程度。
取值范围：[0,1]。
如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
此接口为系统接口。| -| pixelStretchEffect10+ | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | 设置组件的图像边缘像素扩展距离。
参数`options`包括上下左右四个方向的边缘像素扩展距离。
**说明：**
1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。
2. 如果距离为负值，表示内缩，但是最终图像大小不变。
内缩方式：
图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。
图像用边缘像素扩展到原来大小。
3. 对`options`的输入约束：
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。
所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。
所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。
此接口为系统接口。 | -| linearGradientBlur10+ |
value: number,
{
fractionStops:Array,
direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)
}
| - | 为当前组件添加内容线性渐变模糊效果，
-value为模糊半径，模糊半径越大越模糊，为0时不模糊。取值范围：[0, 60]
线性梯度模糊包含两个部分fractionStops和direction
-fractionStops数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效
-direction为渐变模糊方向，默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom
从API version 10开始，该接口支持在ArkTS卡片中使用。 | +| sphericalEffect10+ | number | - | 设置组件的图像球面化程度。
取值范围：[0,1]。
**说明：**
1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。
`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
2. 如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`backgroundImage`也是使用异步加载，所以如果设置了`backgroundImage`，不支持球面效果。
3. 如果组件设置了阴影，不支持球面效果。
**系统接口：**此接口为系统接口。 | +| lightUpEffect10+ | number | - | 设置组件图像亮起程度。
取值范围：[0,1]。
如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
**系统接口：**此接口为系统接口。 | +| pixelStretchEffect10+ | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | 设置组件的图像边缘像素扩展距离。
参数`options`包括上下左右四个方向的边缘像素扩展距离。
**说明：**
1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。
2. 如果距离为负值，表示内缩，但是最终图像大小不变。
内缩方式：
图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。
图像用边缘像素扩展到原来大小。
3. 对`options`的输入约束：
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。
所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。
所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。
**系统接口：**此接口为系统接口。 | +| linearGradientBlur10+ |
value: number,
{
fractionStops:Array,
direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)
}
| - | 为当前组件添加内容线性渐变模糊效果，
-value为模糊半径，模糊半径越大越模糊，为0时不模糊。取值范围：[0, 60]
线性梯度模糊包含两个部分fractionStops和direction
-fractionStops数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效
-direction为渐变模糊方向，默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom
从API version 10开始，该接口支持在ArkTS卡片中使用。 | ## ShadowOptions对象说明 @@ -34,23 +34,23 @@ 从API version 9开始，该接口支持在ArkTS卡片中使用。 -| 名称 | 类型 | 必填 | 说明 | -| ------ | ------ | ---- | --------------- | -| radius | number \| [Resource](ts-types.md#resource) | 是 | 阴影模糊半径。
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。 | -| color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | 否 | 阴影的颜色。
默认为黑色。 | -| offsetX | number \| [Resource](ts-types.md#resource) | 否 | 阴影的X轴偏移量。
默认为0。 | -| offsetY | number \| [Resource](ts-types.md#resource) | 否 | 阴影的Y轴偏移量。
默认为0。 | +| 名称 | 类型 | 必填 | 说明 | +| ------- | ---------------------------------------- | ---- | ---------------------------------------- | +| radius | number \| [Resource](ts-types.md#resource) | 是 | 阴影模糊半径。
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。 | +| color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | 否 | 阴影的颜色。
默认为黑色。 | +| offsetX | number \| [Resource](ts-types.md#resource) | 否 | 阴影的X轴偏移量。
默认为0。 | +| offsetY | number \| [Resource](ts-types.md#resource) | 否 | 阴影的Y轴偏移量。
默认为0。 | ## ShadowStyle10+枚举说明 -| 名称 | 描述 | -| ------ | -------------------------------------- | -| OUTER_DEFAULT_XS | 超小阴影。 | -| OUTER_DEFAULT_SM | 小阴影。 | -| OUTER_DEFAULT_MD | 中阴影。 | -| OUTER_DEFAULT_LG | 大阴影。 | -| OUTER_FLOATING_SM | 浮动小阴影。 | -| OUTER_FLOATING_MD | 浮动中阴影。 | +| 名称 | 描述 | +| ----------------- | ------ | +| OUTER_DEFAULT_XS | 超小阴影。 | +| OUTER_DEFAULT_SM | 小阴影。 | +| OUTER_DEFAULT_MD | 中阴影。 | +| OUTER_DEFAULT_LG | 大阴影。 | +| OUTER_FLOATING_SM | 浮动小阴影。 | +| OUTER_FLOATING_MD | 浮动中阴影。 | ## 示例 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-list.md b/zh-cn/application-dev/ui/arkts-layout-development-create-list.md index 5e83e43a3b2dd8892fbe7238cc47d8999748dcfb..7f66bea51141aa539b71807f93dd0f8a28cee2ce 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-create-list.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-create-list.md @@ -653,8 +653,6 @@ Badge({ 3. 监听手指抬起事件，若此时移动达到最大值，则触发数据加载并显示刷新视图，加载完成后将此视图隐藏。 -下拉刷新与上拉加载的具体实现可参考Codelab：[新闻数据加载](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/NewsDataArkTS)。若开发者希望快速实现此功能，也可使用三方组件[PullToRefresh](https://gitee.com/openharmony-sig/PullToRefresh)。 - ## 编辑列表 @@ -846,4 +844,6 @@ 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) \ No newline at end of file +- [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 diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md index 29d9960107bb4ecb71244c4efe169a2b2a4a3859..c6eb36044826e363a70665cc9650ff312863214e 100644 --- a/zh-cn/application-dev/ui/ui-js-components-text.md +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -65,7 +65,7 @@ text是文本组件，用于呈现一段文本信息。具体用法请参考[tex - 添加划线 - 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 text自有样式。 + 设置text-decoration和text-decoration-color属性为文本添加划线和划线颜色，text-decoration枚举值请参考 text自有样式。 ```html diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md index dd2316adb64dffdec62e30fa3a82bc09a1a1827b..a90e59f8179ad8dd746bd199764edcf3504b02f0 100644 --- a/zh-cn/application-dev/website.md +++ b/zh-cn/application-dev/website.md @@ -1134,6 +1134,7 @@ - [console (控制台)](reference/apis/js-apis-logs.md) - [Timer (定时器)](reference/apis/js-apis-timer.md) - [syscap (系统能力)](reference/apis/js-apis-syscap.md) + - [@system.app (应用上下文)](reference/apis/js-apis-system-app.md) - application - [AccessibilityExtensionContext (辅助功能扩展上下文)](reference/apis/js-apis-inner-application-accessibilityExtensionContext.md) - 设备管理 @@ -1246,7 +1247,6 @@ - [@ohos.systemParameter (系统属性)](reference/apis/js-apis-system-parameter.md) - [@ohos.systemTime (系统时间、时区)](reference/apis/js-apis-system-time.md) - [@ohos.usb (USB管理)](reference/apis/js-apis-usb-deprecated.md) - - [@system.app (应用上下文)](reference/apis/js-apis-system-app.md) - [@system.battery (电量信息)](reference/apis/js-apis-system-battery.md) - [@system.bluetooth (蓝牙)](reference/apis/js-apis-system-bluetooth.md) - [@system.brightness (屏幕亮度)](reference/apis/js-apis-system-brightness.md)