Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“2dda19f756f9e19e7a14f4afaaa5a48b7076d24c”上不存在“paddle/fluid/git@gitcode.net:s920243400/PaddleDetection.git”
提交 ba7c4f73 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (21615) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 7f5c1996
隐藏空白更改
内联 并排
Showing with 516 addition and 355 deletion
en/application-dev/quick-start/arkts-builder.md
浏览文件 @ ba7c4f73
...@@ -21,14 +21,14 @@ Syntax: ...@@ -21,14 +21,14 @@ Syntax:
```ts ```ts
@Builder myBuilderFunction({ ... }) @Builder MyBuilderFunction({ ... })
``` ```
Usage: Usage:
```ts ```ts
this.myBuilderFunction({ ... }) this.MyBuilderFunction({ ... })
``` ```
- Defining one or more custom builder (\@Builder decorated) functions inside a custom component is allowed. Such a custom builder function can be considered as a private, special type of member functions of that component. - Defining one or more custom builder (\@Builder decorated) functions inside a custom component is allowed. Such a custom builder function can be considered as a private, special type of member functions of that component.
...@@ -66,7 +66,7 @@ There are two types of parameter passing for custom builder functions: [by-value ...@@ -66,7 +66,7 @@ There are two types of parameter passing for custom builder functions: [by-value
- The parameter type must be the same as the declared parameter type. The **undefined** or **null** constants as well as expressions evaluating to these values are not allowed. - The parameter type must be the same as the declared parameter type. The **undefined** or **null** constants as well as expressions evaluating to these values are not allowed.
- All parameters are immutable inside the custom builder function. If mutability and synchronization of the mutation is required, the custom builder should be replaced by a custom component with a [@Link](arkts-link.md) decorated variable. - All parameters are immutable inside the@Builder decorated function.
- The \@Builder function body follows the same [syntax rules](arkts-create-custom-components.md#build-function) as the **build** function. - The \@Builder function body follows the same [syntax rules](arkts-create-custom-components.md#build-function) as the **build** function.
......
en/application-dev/reference/apis/js-apis-router.md
浏览文件 @ ba7c4f73
...@@ -51,21 +51,19 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -51,21 +51,19 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushUrl({ try {
url: 'pages/routerpage2', router.pushUrl({
params: { url: 'pages/routerpage2',
data1: 'message', params: {
data2: { data1: 'message',
data3: [123, 456, 789] data2: {
data3: [123, 456, 789]
}
} }
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
}) })
} catch (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
}
``` ```
## router.pushUrl<sup>9+</sup> ## router.pushUrl<sup>9+</sup>
...@@ -146,21 +144,19 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -146,21 +144,19 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushUrl({ try {
url: 'pages/routerpage2', router.pushUrl({
params: { url: 'pages/routerpage2',
data1: 'message', params: {
data2: { data1: 'message',
data3: [123, 456, 789] data2: {
data3: [123, 456, 789]
}
} }
} }, router.RouterMode.Standard)
}, router.RouterMode.Standard) } catch (err) {
.then(() => { console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
// success }
})
.catch(err => {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
})
``` ```
## router.pushUrl<sup>9+</sup> ## router.pushUrl<sup>9+</sup>
...@@ -241,18 +237,16 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -241,18 +237,16 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.replaceUrl({ try {
url: 'pages/detail', router.replaceUrl({
params: { url: 'pages/detail',
data1: 'message' params: {
} data1: 'message'
}) }
.then(() => {
// success
})
.catch(err => {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
}) })
} catch (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
}
``` ```
## router.replaceUrl<sup>9+</sup> ## router.replaceUrl<sup>9+</sup>
...@@ -330,18 +324,16 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -330,18 +324,16 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.replaceUrl({ try {
url: 'pages/detail', router.replaceUrl({
params: { url: 'pages/detail',
data1: 'message' params: {
} data1: 'message'
}, router.RouterMode.Standard) }
.then(() => { }, router.RouterMode.Standard)
// success } catch (err) {
}) console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
.catch(err => { }
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
})
``` ```
## router.replaceUrl<sup>9+</sup> ## router.replaceUrl<sup>9+</sup>
...@@ -420,23 +412,23 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -420,23 +412,23 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushNamedRoute({ try {
name: 'myPage', router.pushNamedRoute({
params: { name: 'myPage',
data1: 'message', params: {
data2: { data1: 'message',
data3: [123, 456, 789] data2: {
data3: [123, 456, 789]
}
} }
}
})
.then(() => {
// success
})
.catch(err => {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
}) })
} catch (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
}
``` ```
For details, see [UI Development-Named Route](../../ui/arkts-routing.md#named-route).
## router.pushNamedRoute<sup>10+</sup> ## router.pushNamedRoute<sup>10+</sup>
pushNamedRoute(options: NamedRouterOptions, callback: AsyncCallback&lt;void&gt;): void pushNamedRoute(options: NamedRouterOptions, callback: AsyncCallback&lt;void&gt;): void
...@@ -515,21 +507,19 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -515,21 +507,19 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushNamedRoute({ try {
name: 'myPage', router.pushNamedRoute({
params: { name: 'myPage',
data1: 'message', params: {
data2: { data1: 'message',
data3: [123, 456, 789] data2: {
data3: [123, 456, 789]
}
} }
} }, router.RouterMode.Standard)
}, router.RouterMode.Standard) } catch (err) {
.then(() => { console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
// success }
})
.catch(err => {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
``` ```
## router.pushNamedRoute<sup>10+</sup> ## router.pushNamedRoute<sup>10+</sup>
...@@ -610,18 +600,16 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -610,18 +600,16 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.replaceNamedRoute({ try {
name: 'myPage', router.replaceNamedRoute({
params: { name: 'myPage',
data1: 'message' params: {
} data1: 'message'
}) }
.then(() => {
// success
})
.catch(err => {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
}) })
} catch (err) {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
}
``` ```
## router.replaceNamedRoute<sup>10+</sup> ## router.replaceNamedRoute<sup>10+</sup>
...@@ -693,24 +681,22 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -693,24 +681,22 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message| | ID | Error Message|
| --------- | ------- | | --------- | ------- |
| 100001 | if UI execution context not found, only throw in standard system. | | 100001 | if can not get the delegate, only throw in standard system. |
| 100004 | if the named route is not exist. | | 100004 | if the named route is not exist. |
**Example** **Example**
```ts ```ts
router.replaceNamedRoute({ try {
name: 'myPage', router.replaceNamedRoute({
params: { name: 'myPage',
data1: 'message' params: {
} data1: 'message'
}, router.RouterMode.Standard) }
.then(() => { }, router.RouterMode.Standard)
// success } catch (err) {
}) console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
.catch(err => { }
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
})
``` ```
## router.replaceNamedRoute<sup>10+</sup> ## router.replaceNamedRoute<sup>10+</sup>
...@@ -932,7 +918,7 @@ Describes the page routing options. ...@@ -932,7 +918,7 @@ Describes the page routing options.
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ | | ------ | ------ | ---- | ------------------------------------------------------------ |
| url | string | Yes | URL of the target page, in either of the following formats:<br>- Absolute path of the page. The value is available in the pages list in the **config.json** file, for example:<br>- pages/index/index<br>- pages/detail/detail<br>- Particular path. If the URL is a slash (/), the home page is displayed.| | url | string | Yes | URL of the target page, in either of the following formats:<br>- Absolute path of the page. The value is available in the pages list in the **config.json** file, for example:<br>- pages/index/index<br>- pages/detail/detail<br>- Particular path. If the URL is a slash (/), the home page is displayed.|
| params | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.| | params | object | No | Data that needs to be passed to the target page during redirection. The received data becomes invalid when the page is switched to another page. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.<br>**NOTE**<br>The **params** parameter cannot pass objects returned by methods and system APIs, for example, **PixelMap** objects defined and returned by media APIs. To pass such objects, extract from them the basic type attributes to be passed, and then construct objects of the object type.|
> **NOTE** > **NOTE**
......
en/application-dev/reference/apis/js-apis-webview.md
浏览文件 @ ba7c4f73
...@@ -254,20 +254,20 @@ struct WebComponent { ...@@ -254,20 +254,20 @@ struct WebComponent {
.onClick(() => { .onClick(() => {
// Use the local port to send messages to HTML5. // Use the local port to send messages to 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. Create a message port. // 1. Create a message port.
this.ports = this.controller.createWebMessagePorts(true); this.ports = this.controller.createWebMessagePorts(true);
// 2. Send port 1 to HTML5. // 2. Send port 1 to HTML5.
...@@ -276,10 +276,10 @@ struct WebComponent { ...@@ -276,10 +276,10 @@ struct WebComponent {
this.nativePort = this.ports[0]; this.nativePort = this.ports[0];
// 4. Set the callback. // 4. Set the callback.
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());
...@@ -652,71 +652,71 @@ struct WebComponent { ...@@ -652,71 +652,71 @@ struct WebComponent {
There are three methods for loading local resource files: There are three methods for loading local resource files:
1. Using $rawfile 1. Using $rawfile
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview' import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController();
build() { build() {
Column() { Column() {
Button('loadUrl') Button('loadUrl')
.onClick(() => { .onClick(() => {
try { try {
// Load a local resource file through $rawfile. // Load a local resource file through $rawfile.
this.controller.loadUrl($rawfile('index.html')); this.controller.loadUrl($rawfile('index.html'));
} catch (error) { } catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
} }
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
} }
} }
``` ```
2. Using the resources protocol 2. Using the resources protocol
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview' import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController();
build() { build() {
Column() { Column() {
Button('loadUrl') Button('loadUrl')
.onClick(() => { .onClick(() => {
try { try {
// Load a local resource file through the resource protocol. // Load local resource files through the resource protocol.
this.controller.loadUrl("resource://rawfile/index.html"); this.controller.loadUrl("resource://rawfile/index.html");
} catch (error) { } catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
} }
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
} }
} }
``` ```
3. Using a sandbox path. For details, see the example of loading local resource files in the sandbox in [Web](../arkui-ts/ts-basic-components-web.md#web). 3. Using a sandbox path. For details, see the example of loading local resource files in the sandbox in [Web](../arkui-ts/ts-basic-components-web.md#web).
HTML file to be loaded: HTML file to be loaded:
```html ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<p>Hello World</p> <p>Hello World</p>
</body> </body>
</html> </html>
``` ```
### loadData ### loadData
...@@ -4320,6 +4320,107 @@ export default class EntryAbility extends UIAbility { ...@@ -4320,6 +4320,107 @@ export default class EntryAbility extends UIAbility {
} }
``` ```
### setCustomUserAgent<sup>10+</sup>
setCustomUserAgent(userAgent: string): void
Set a custom user agent.
**System capability**: SystemCapability.Web.Webview.Core
**Parameters**
| Name | Type | Mandatory | Description |
| ---------------| ------- | ---- | ------------- |
| userAgent | string | Yes | Information about the custom user agent.|
**Error codes**
For details about the error codes, see [Webview Error Codes](../errorcodes/errorcode-webview.md).
| ID | Error Message |
| -------- | ------------------------------------------------------------ |
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
**Example**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State userAgent: string = 'test'
build() {
Column() {
Button('setCustomUserAgent')
.onClick(() => {
try {
this.controller.setCustomUserAgent(this.userAgent);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### getCustomUserAgent<sup>10+</sup>
getCustomUserAgent(): string
Obtains a custom user agent.
**System capability**: SystemCapability.Web.Webview.Core
**Return value**
| Type | Description |
| ------ | ------------------------- |
| string | Information about the custom user agent.|
**Error codes**
For details about the error codes, see [Webview Error Codes](../errorcodes/errorcode-webview.md).
| ID | Error Message |
| -------- | ------------------------------------------------------------ |
| 17100001 | Init error. The WebviewController must be associated with a Web component. |
**Example**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State userAgent: string = ''
build() {
Column() {
Button('getCustomUserAgent')
.onClick(() => {
try {
this.userAgent = this.controller.getCustomUserAgent();
console.log("userAgent: " + this.userAgent);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
## WebCookieManager ## WebCookieManager
Implements a **WebCookieManager** instance to manage behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookieManager** instance. Implements a **WebCookieManager** instance to manage behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookieManager** instance.
......
en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ ba7c4f73
...@@ -13,44 +13,54 @@ Supported ...@@ -13,44 +13,54 @@ Supported
Since API version 9, it is recommended that this component be used together with the **[\<NavRouter>](ts-basic-components-navrouter.md)** component. Since API version 9, it is recommended that this component be used together with the **[\<NavRouter>](ts-basic-components-navrouter.md)** component.
## APIs ## APIs
**API 1**: Navigation() ### Navigation
Navigation()
### Navigation<sup>10+</sup>
**API 2**: Navigation(pathInfos: NavPathStack)<sup>10+</sup> Navigation(pathInfos: NavPathStack)<sup>10+</sup>
Binds a navigation stack to the **\<Navigation>** component. Binds a navigation stack to the **\<Navigation>** component.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | ------------- | | --------- | ------------------------------- | ---- | ------ |
| pathInfos | [NavPathStack](#navpathstack10) | No | Information about the navigation stack.| | pathInfos | [NavPathStack](#navpathstack10) | No | Information about the navigation stack.|
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| ----------------------------- | ---------------------------------------- | ---------------------------------------- | | ---------------------------------- | ---------------------------------------- | ---------------------------------------- |
| 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> | Page title.<br>**NOTE**<br>When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.<br>When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...); (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).| | 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> | Page title.<br>**NOTE**<br>When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.<br>When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...); (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).|
| subTitle<sup>(deprecated)</sup> | string | Subtitle of the page. If this attribute is not set, no subtitle is displayed. This attribute is deprecated since API version 9. You are advised to use **title** instead.| | subTitle<sup>(deprecated)</sup> | string | Subtitle of the page. If this attribute is not set, no subtitle is displayed. This attribute is deprecated since API version 9. You are advised to use **title** instead.|
| menus | Array<[NavigationMenuItem](#navigationmenuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Menu items in the upper right corner of the page. If this attribute is not set, no menu item is displayed. When the value type is Array\<[NavigationMenuItem](#navigationmenuitem)>, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, with excess icons (if any) placed under the automatically generated **More** icon.| | menus | Array<[NavigationMenuItem](#navigationmenuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Menu items in the upper right corner of the page. If this attribute is not set, no menu item is displayed. When the value type is Array<[NavigationMenuItem](#navigationmenuitem)&gt;, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, with excess icons (if any) placed under the automatically generated **More** icon.|
| titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**| | titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**|
| toolBar<sup>(deprecated)</sup> | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar. If this attribute is not set, no toolbar is displayed.<br>**items**: items on the toolbar.<br>**NOTE**<br>Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area. If the text is too long, it is scaled down level by level, wrapped in two lines, and then clipped with an ellipsis (...).<br>This API is deprecated since API version 10. You are advised to use **toolbarConfiguration** instead.| | toolBar<sup>(deprecated)</sup> | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar. If this attribute is not set, no toolbar is displayed.<br>**items**: all items on the toolbar.<br>**NOTE**<br>Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area. If the text is too long, it is scaled down level by level, wrapped in two lines, and then clipped with an ellipsis (...).<br>This API is deprecated since API version 10. You are advised to use **toolbarConfiguration** instead.|
| toolbarConfiguration<sup>10+</sup> | Array<[ToolbarItem](#toolbaritem10)<sup>10+</sup>&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar. If this attribute is not set, no toolbar is displayed.<br>**NOTE**<br>When the value type is Array<[ToolbarItem](#ToolbarItem>, the toolbar exhibits the following features:<br>Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area.<br>If any item contains overlong text and there are fewer than five items, the following measures are taken: 1. Increase the item's width to accommodate the text until it is as large as the screen width; 2. Scale down the text level by level; 3. Wrap the text in two lines; 4. Clip the text with an ellipsis (...).<br>The toolbar shows a maximum of five icons in portrait mode, with excess icons (if any) placed under the automatically generated **More** icon. In landscape mode, this attribute must be used together with Array<[NavigationMenuItem](#navigationmenuitem)> of the **menus** attribute; the toolbar at the bottom is automatically hidden, and all items on the toolbar are moved to the menu in the upper right corner of the screen.<br>When the value type is [CustomBuilder](ts-types.md#custombuilder8), and the toolbar does not exhibit the preceding features except that items are evenly distributed on the toolbar at the bottom.| | toolbarConfiguration<sup>10+</sup> | Array<[ToolbarItem](#toolbaritem10)<sup>10+</sup>&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar. If this attribute is not set, no toolbar is displayed.<br>**NOTE**<br>When the value type is Array<[ToolbarItem](#ToolbarItem>, the toolbar exhibits the following features:<br>Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area.<br>If any item contains overlong text and there are fewer than five items, the following measures are taken: 1. Increase the item's width to accommodate the text until it is as large as the screen width; 2. Scale down the text level by level; 3. Wrap the text in two lines; 4. Clip the text with an ellipsis (...).<br>The toolbar shows a maximum of five icons in portrait mode, with excess icons (if any) placed under the automatically generated **More** icon. In landscape mode, this attribute must be used together with Array<[NavigationMenuItem](#navigationmenuitem)> of the **menus** attribute; the toolbar at the bottom is automatically hidden, and all items on the toolbar are moved to the menu in the upper right corner of the screen.<br>When the value type is [CustomBuilder](ts-types.md#custombuilder8), and the toolbar does not exhibit the preceding features except that items are evenly distributed on the toolbar at the bottom.|
| hideToolBar | boolean | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Display the toolbar.| | hideToolBar | boolean | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Display the toolbar.|
| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.| | hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
| hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false**<br>**true**: Hide the back button.<br>**false**: Display the back button.<br>The back button in the title bar of the **\<NavDestination>** component cannot be hidden.<br>**NOTE**<br>The back button works only when **titleMode** is set to **NavigationTitleMode.Mini**.| | hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false**<br>**true**: Hide the back button.<br>**false**: Display the back button.<br>The back button in the title bar of the **\<NavDestination>** component cannot be hidden.<br>**NOTE**<br>The back button works only when **titleMode** is set to **NavigationTitleMode.Mini**.|
| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | Width of the navigation bar.<br>Default value: **240**<br>Unit: vp<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.| | navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | Width of the navigation bar.<br>Default value: **240**<br>Unit: vp<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.|
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.| | navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.|
| mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**<br>At the default settings, the component adapts to a single column or two columns based on the component width.<br>**NOTE**<br>Available options are **Stack**, **Split**, and **Auto**.| | mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**<br>At the default settings, the component adapts to a single column or two columns based on the component width.<br>**NOTE**<br>Available options are **Stack**, **Split**, and **Auto**.|
| backButtonIcon<sup>9+</sup> | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The back button in the title bar of the **\<NavDestination>** component cannot be hidden.| | backButtonIcon<sup>9+</sup> | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The back button in the title bar of the **\<NavDestination>** component cannot be hidden.|
| hideNavBar<sup>9+</sup> | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.| | hideNavBar<sup>9+</sup> | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.|
| navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | Creates a **\<NavDestination>** component.<br>**NOTE**<br>The **builder** function is used, with the **name** and **param** parameters passed in. In the builder, a layer of custom components can be included outside the **\<NavDestination>** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.| | navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | Creates a **\<NavDestination>** component.<br>**NOTE**<br>The **builder** function is used, with the **name** and **param** parameters passed in. In the builder, a layer of custom components can be included outside the **\<NavDestination>** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.|
| navBarWidthRange<sup>10+</sup> | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | Minimum and maximum widths of the navigation bar (valid in dual-column mode).<br>Default value: **240** for the minimum value; 40% of the component width (not greater than 432) for the maximum value<br>Unit: vp<br>Priority rules:<br>Custom value > Default value<br>Minimum value > Maximum value<br>navBar > content<br>If values conflict, the global value takes precedence, and the local minimum value depends on the container size.| | navBarWidthRange<sup>10+</sup> | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | Minimum and maximum widths of the navigation bar (valid in dual-column mode).<br>Default value: **240** for the minimum value; 40% of the component width (not greater than 432) for the maximum value<br>Unit: vp<br>Priority rules:<br>Custom value > Default value<br>Minimum value > Maximum value<br>navBar > content<br>If values conflict, the global value takes precedence, and the local minimum value depends on the container size.|
| minContentWidth<sup>10+</sup> | [Dimension](ts-types.md#dimension10) | Minimum width of the navigation bar content area (valid in dual-column mode).<br>Default value: **360**<br>Unit: vp<br>Priority rules:<br>Custom value > Default value<br>Minimum value > Maximum value<br>navBar > content<br>If values conflict, the global value takes precedence, and the local minimum value depends on the container size.<br>Breakpoint calculation in Auto mode: default 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp)| | minContentWidth<sup>10+</sup> | [Dimension](ts-types.md#dimension10) | Minimum width of the navigation bar content area (valid in dual-column mode).<br>Default value: **360**<br>Unit: vp<br>Priority rules:<br>Custom value > Default value<br>Minimum value > Maximum value<br>navBar > content<br>If values conflict, the global value takes precedence, and the local minimum value depends on the container size.<br>Breakpoint calculation in Auto mode: default 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp)|
## Events
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | Called when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
| onNavBarStateChange(callback: (isVisible: boolean) =&gt; void) | Called when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite.|
## NavPathStack<sup>10+</sup> ## NavPathStack<sup>10+</sup>
...@@ -64,9 +74,9 @@ Pushes the NavDestination page information specified by **info** to the stack. ...@@ -64,9 +74,9 @@ Pushes the NavDestination page information specified by **info** to the stack.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ---- | ----------------------------- | ---- | -------------------- |
| info | [NavPathInfo](#navpathinfo10) | Yes | Information about the navigation destination page. | | info | [NavPathInfo](#navpathinfo10) | Yes | Information about the navigation destination page.|
### pushPathByName<sup>10+</sup> ### pushPathByName<sup>10+</sup>
...@@ -76,10 +86,10 @@ Pushes the navigation destination page specified by **name** to the navigation s ...@@ -76,10 +86,10 @@ Pushes the navigation destination page specified by **name** to the navigation s
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------- | ---- | --------------------- |
| name | string | Yes | Name of the navigation destination page. | | name | string | Yes | Name of the navigation destination page. |
| param | unknown | Yes | Parameter information of the navigation destination page. | | param | unknown | Yes | Parameter information of the navigation destination page.|
### pop<sup>10+</sup> ### pop<sup>10+</sup>
...@@ -89,10 +99,10 @@ Pops the top element out of the navigation stack. ...@@ -89,10 +99,10 @@ Pops the top element out of the navigation stack.
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | ----------- | ------------------------ |
| NavPathInfo | Returns the information about the navigation destination page at the top of the stack.| | NavPathInfo | Returns the information about the navigation destination page at the top of the stack.|
| undefined | Returns **undefined** if the navigation stack is empty.| | undefined | Returns **undefined** if the navigation stack is empty. |
### popToName<sup>10+</sup> ### popToName<sup>10+</sup>
...@@ -102,14 +112,14 @@ Returns the navigation stack to the first navigation destination page that match ...@@ -102,14 +112,14 @@ Returns the navigation stack to the first navigation destination page that match
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ---- | ------ | ---- | ------------------- |
| name | string | Yes | Name of the navigation destination page. | | name | string | Yes | Name of the navigation destination page.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | ------ | ---------------------------------------- |
| number | Returns the index of the first navigation destination page that matches the value of **name** if it exists in the navigation stack; returns **-1** otherwise.| | number | Returns the index of the first navigation destination page that matches the value of **name** if it exists in the navigation stack; returns **-1** otherwise.|
### popToIndex<sup>10+</sup> ### popToIndex<sup>10+</sup>
...@@ -120,9 +130,9 @@ Returns the navigation stack to the navigation destination page that matches the ...@@ -120,9 +130,9 @@ Returns the navigation stack to the navigation destination page that matches the
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------ | ---- | ---------------------- |
| index | number | Yes | Index of the navigation destination page. | | index | number | Yes | Index of the navigation destination page.|
### moveToTop<sup>10+</sup> ### moveToTop<sup>10+</sup>
...@@ -132,14 +142,14 @@ Moves to the top of the navigation stack the first navigation destination page t ...@@ -132,14 +142,14 @@ Moves to the top of the navigation stack the first navigation destination page t
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ---- | ------ | ---- | ------------------- |
| name | string | Yes | Name of the navigation destination page. | | name | string | Yes | Name of the navigation destination page.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | ------ | ---------------------------------------- |
| number | Returns the index of the first navigation destination page that matches the value of **name** if it exists in the navigation stack; returns **-1** otherwise.| | number | Returns the index of the first navigation destination page that matches the value of **name** if it exists in the navigation stack; returns **-1** otherwise.|
### moveIndexToTop<sup>10+</sup> ### moveIndexToTop<sup>10+</sup>
...@@ -150,9 +160,9 @@ Moves to the top of the navigation stack the navigation destination page that ma ...@@ -150,9 +160,9 @@ Moves to the top of the navigation stack the navigation destination page that ma
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------ | ---- | ---------------------- |
| index | number | Yes | Index of the navigation destination page. | | index | number | Yes | Index of the navigation destination page.|
### clear<sup>10+</sup> ### clear<sup>10+</sup>
...@@ -168,8 +178,8 @@ Obtains the names of all navigation destination pages in the navigation stack. ...@@ -168,8 +178,8 @@ Obtains the names of all navigation destination pages in the navigation stack.
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | -------------- | -------------------------- |
| Array<string\> | Names of all navigation destination pages in the navigation stack.| | Array<string\> | Names of all navigation destination pages in the navigation stack.|
### getParamByIndex<sup>10+</sup> ### getParamByIndex<sup>10+</sup>
...@@ -180,16 +190,16 @@ Obtains the parameter information of the navigation destination page that matche ...@@ -180,16 +190,16 @@ Obtains the parameter information of the navigation destination page that matche
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------ | ---- | ---------------------- |
| index | number | Yes | Index of the navigation destination page. | | index | number | Yes | Index of the navigation destination page.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | --------- | -------------------------- |
| unknown | Returns the parameter information of the matching navigation destination page.| | unknown | Returns the parameter information of the matching navigation destination page.|
| undefined | Returns **undefined** if the passed index is invalid.| | undefined | Returns **undefined** if the passed index is invalid. |
### getParamByName<sup>10+</sup> ### getParamByName<sup>10+</sup>
...@@ -199,15 +209,15 @@ Obtains the parameter information of all the navigation destination pages that m ...@@ -199,15 +209,15 @@ Obtains the parameter information of all the navigation destination pages that m
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ---- | ------ | ---- | ------------------- |
| name | string | Yes | Name of the navigation destination page. | | name | string | Yes | Name of the navigation destination page.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | --------------- | --------------------------------- |
| Array<unknown\> | Parameter information of all the matching navigation destination pages.| | Array<unknown\> | Parameter information of all the matching navigation destination pages.|
### getIndexByName<sup>10+</sup> ### getIndexByName<sup>10+</sup>
...@@ -217,15 +227,15 @@ Obtains the indexes information of all the navigation destination pages that mat ...@@ -217,15 +227,15 @@ Obtains the indexes information of all the navigation destination pages that mat
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ---- | ------ | ---- | ------------------- |
| name | string | Yes | Name of the navigation destination page. | | name | string | Yes | Name of the navigation destination page.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | -------------- | --------------------------------- |
| Array<number\> | Indexes of all the matching navigation destination pages.| | Array<number\> | Indexes of all the matching navigation destination pages.|
### size<sup>10+</sup> ### size<sup>10+</sup>
...@@ -235,9 +245,9 @@ Obtains the stack size. ...@@ -235,9 +245,9 @@ Obtains the stack size.
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | ------ | ------ |
| number | Stack size.| | number | Stack size.|
## NavPathInfo<sup>10+</sup> ## NavPathInfo<sup>10+</sup>
...@@ -249,52 +259,52 @@ constructor(name: string, param: unknown) ...@@ -249,52 +259,52 @@ constructor(name: string, param: unknown)
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ----- | ------- | ---- | --------------------- |
| name | string | Yes | Name of the navigation destination page. | | name | string | Yes | Name of the navigation destination page. |
| param | unknown | No | Parameter information of the navigation destination page. | | param | unknown | No | Parameter information of the navigation destination page.|
## NavigationMenuItem ## NavigationMenuItem
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ------ | ------------- | ---- | --------------- |
| value | string | Yes | Text of a menu item. | | value | string | Yes | Text of a menu item. |
| icon | string | No | Icon path of a menu item.| | icon | string | No | Icon path of a menu item.|
| action | () =&gt; void | No | Callback invoked when a menu item is selected. | | action | () =&gt; void | No | Callback invoked when a menu item is selected. |
## object ## object
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | --------------- | | ------ | ------------- | ---- | --------------- |
| value | string | Yes | Text of a toolbar item. | | value | string | Yes | Text of a toolbar item. |
| icon | string | No | Icon path of a toolbar item.| | icon | string | No | Icon path of a toolbar item.|
| action | () =&gt; void | No | Callback invoked when a toolbar item is selected. | | action | () =&gt; void | No | Callback invoked when a toolbar item is selected. |
## ToolbarItem<sup>10+</sup> ## ToolbarItem<sup>10+</sup>
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ---------- | ------------------------------------------------- | ---- | ----------------------------------------------------------- | | ---------- | ---------------------------------------- | ---- | ---------------------------------------- |
| value | ResourceStr | Yes | Text of a toolbar item. | | value | ResourceStr | Yes | Text of a toolbar item. |
| icon | ResourceStr | No | Icon path of a toolbar item. | | icon | ResourceStr | No | Icon path of a toolbar item. |
| action | () =&gt; void | No | Callback invoked when a toolbar item is selected. | | action | () =&gt; void | No | Callback invoked when a toolbar item is selected. |
| status | [ToolbarItemStatus](#toolbaritemstatus10) | No | Status of a toolbar item.<br>Default value: **ToolbarItemStatus.NORMAL**| | status | [ToolbarItemStatus](#toolbaritemstatus10) | No | Status of a toolbar item.<br>Default value: **ToolbarItemStatus.NORMAL**|
| activeIcon | ResourceStr | No | Icon path of the toolbar item in the active state. | | activeIcon | ResourceStr | No | Icon path of the toolbar item in the active state. |
## ToolbarItemStatus<sup>10+</sup> ## ToolbarItemStatus<sup>10+</sup>
| Name | Description | | Name | Description |
| -------- | ------------------------------------------------------------ | | -------- | ---------------------------------------- |
| NORMAL | Normal state. In this state, the toolbar item takes on the default style and can switch to another state-specific style by responding to the hover, press, and focus events.| | NORMAL | Normal state. In this state, the toolbar item takes on the default style and can switch to another state-specific style by responding to the hover, press, and focus events.|
| DISABLED | Disabled state. In this state, the toolbar item is disabled and does not allow for user interactions.| | DISABLED | Disabled state. In this state, the toolbar item is disabled and does not allow for user interactions.|
| ACTIVE | Active state. In this state, the toolbar item can update its icon to the one specified by **activeIcon** by responding to a click event.| | ACTIVE | Active state. In this state, the toolbar item can update its icon to the one specified by **activeIcon** by responding to a click event.|
## NavigationTitleMode ## NavigationTitleMode
| Name| Description | | Name | Description |
| ---- | ------------------------------------------------------------ | | ---- | ---------------------------------------- |
| Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.<br>**NOTE**<br>The size linkage effect works only when **title** is set to **ResourceStr** or **NavigationCommonTitle**. If **title** is set to any other value type, the main title changes in mere location when pulled down.| | Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls up to the top.<br>**NOTE**<br>The size linkage effect works only when **title** is set to **ResourceStr** or **NavigationCommonTitle**. If **title** is set to any other value type, the main title changes in mere location when pulled down.|
| Mini | The title is fixed at mini mode. | | Mini | The title is fixed at mini mode. |
| Full | The title is fixed at full mode. | | Full | The title is fixed at full mode. |
## NavigationCommonTitle ## NavigationCommonTitle
...@@ -322,7 +332,7 @@ constructor(name: string, param: unknown) ...@@ -322,7 +332,7 @@ constructor(name: string, param: unknown)
| Name | Description | | Name | Description |
| ----- | ------------------------------------------------------------ | | ----- | ------------------------------------------------------------ |
| Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages. | | Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages. |
| Split | The navigation bar and content area are displayed in different columns. | | Split | The navigation bar and content area are displayed in different columns.<br>The values of **navBarWidthRange** are represented by [minNavBarWidth,maxNavBarWidth].<br>1. When the value of **navBarWidth** is beyond the value range specified by **navBarWidthRange**, **navBarWidth** is set according to the following rules:<br>Value of **navBarWidth** < Value of **minNavBarWidth**: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Component width - Value of **minContentWidth** - Divider width (1 vp) > Value of **maxNavBarWidth**: The value of **navBarWidth** is changed to that of **maxNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Component width - Value of **minContentWidth** - Divider width (1 vp) < Value of **minNavBarWidth**: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Component width - Value of **minContentWidth** - Divider width (1 vp) is within the value range specified by **navBarWidthRange**: The value of **navBarWidth** is changed to Component width - Value of **minContentWidth** - Divider width (1 vp).<br>2. When the value of **navBarWidth** is within the value range specified by **navBarWidthRange**, **navBarWidth** is set according to the following rules:<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) > = Component width: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width and Value of **navBarWidth** + Value of **minContentWidth** + Divider width (1 vp) > = Component width: The value of **navBarWidth** is changed to Component width - Value of **minContentWidth** - Divider width (1 vp).<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width and Value of **navBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width: The value of **navBarWidth** is the set value. <br>3. When the component size is decreased, the content area is shrunk until its width reaches the value defined by **minContentWidth**, and then the navigation bar is shrunk until its width reaches the value defined by **minNavBarWidth**; if the component size is further decreased, the content area is further shrunk until it disappears, and then navigation bar is shrunk.<br>4. When the navigation bar is set to a fixed size and the component size is continuously decreased, the navigation bar is shrunk.<br>5. If only **navBarWidth** is set, the width of the navigation bar is fixed at the value of **navBarWidth**, and the divider cannot be dragged.|
| Auto | In API version 9 and earlier versions: When the window width is greater than or equal to 520 vp, the Split mode is used. In other cases, the Stack mode is used.<br>In API version 10 and later versions: When the window width is greater than or equal to 600 vp, the Split mode is used. In other cases, the Stack mode is used. 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp).| | Auto | In API version 9 and earlier versions: When the window width is greater than or equal to 520 vp, the Split mode is used. In other cases, the Stack mode is used.<br>In API version 10 and later versions: When the window width is greater than or equal to 600 vp, the Split mode is used. In other cases, the Stack mode is used. 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp).|
## TitleHeight ## TitleHeight
...@@ -334,17 +344,10 @@ constructor(name: string, param: unknown) ...@@ -334,17 +344,10 @@ constructor(name: string, param: unknown)
> **NOTE** > **NOTE**
>
> Among the scrollable components, only **\<List>** is supported. > Among the scrollable components, only **\<List>** is supported.
## Events
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | Called when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
| onNavBarStateChange(callback: (isVisible: boolean) =&gt; void) | Called when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite.|
## Example ## Example
```ts ```ts
......
en/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ ba7c4f73
...@@ -41,7 +41,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -41,7 +41,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------------ | ---------------------------------------- | ---- | ---------------------------------------- | | ------------ | ---------------------------------------- | ---- | ---------------------------------------- |
| space | number \| string | No | Spacing between list items along the main axis.<br>Default value: **0**<br>**NOTE**<br>If the set value is a negative number, the default value will be used.<br>If the value of **space** is less than the width of the list divider, the latter is used as the spacing.| | space | number \| string | No | Spacing between list items along the main axis.<br>Default value: **0**<br>**NOTE**<br>If this parameter is set to a negative number or a value greater than or equal to the length of the list content area, the default value is used.<br>If this parameter is set to a value less than the width of the list divider, the width of the list divider is used as the spacing.|
| initialIndex | number | No | Item displayed at the beginning of the viewport when the current list is loaded for the first time, that is, the first item to be displayed.<br>Default value: **0**<br>**NOTE**<br>If the set value is a negative number or is greater than the index of the last item in the list, the value is invalid. In this case, the default value will be used.| | initialIndex | number | No | Item displayed at the beginning of the viewport when the current list is loaded for the first time, that is, the first item to be displayed.<br>Default value: **0**<br>**NOTE**<br>If the set value is a negative number or is greater than the index of the last item in the list, the value is invalid. In this case, the default value will be used.|
| scroller | [Scroller](ts-container-scroll.md#scroller) | No | Scroller, which can be bound to scrollable components.<br>**NOTE**<br>The scroller cannot be bound to other scrollable components.| | scroller | [Scroller](ts-container-scroll.md#scroller) | No | Scroller, which can be bound to scrollable components.<br>**NOTE**<br>The scroller cannot be bound to other scrollable components.|
...@@ -49,23 +49,24 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -49,23 +49,24 @@ Since API version 9, this API is supported in ArkTS widgets.
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.<br>Default value: **Axis.Vertical**<br>Since API version 9, this API is supported in ArkTS widgets.| | listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.<br>Default value: **Axis.Vertical**<br>Since API version 9, this API is supported in ArkTS widgets.|
| divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md#resourcecolor),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.<br>Since API version 9, this API is supported in ArkTS widgets.<br>The sum of **endMargin** and **startMargin** cannot exceed the column width.<br>**startMargin** and **endMargin** cannot be set in percentage.<br>The divider is drawn between list items along the main axis, and not above the first list item and below the last list item.<br>In multi-column mode, the value of **startMargin** is calculated from the start edge of the cross axis of each column. In other cases, it is calculated from the start edge of the cross axis of the list.| | divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md#resourcecolor),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.<br>Since API version 9, this API is supported in ArkTS widgets.<br>The sum of **endMargin** and **startMargin** cannot exceed the column width.<br>**startMargin** and **endMargin** cannot be set in percentage.<br>The divider is drawn between list items along the main axis, and not above the first list item and below the last list item.<br>In multi-column mode, the value of **startMargin** is calculated from the start edge of the cross axis of each column. In other cases, it is calculated from the start edge of the cross axis of the list.|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>In API version 9 and earlier versions, the default value is **BarState.Off**. In API version 10, the default value is **BarState.Auto**.| | scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>In API version 9 and earlier versions, the default value is **BarState.Off**. In API version 10, the default value is **BarState.Auto**.|
| cachedCount | number | Number of list items or list item groups to be preloaded (cached). It works only in [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md). A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/arkts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>In single-column mode, the number of the list items to be cached before and after the currently displayed one equals the value of **cachedCount**.<br>In multi-column mode, the number of the list items to be cached is the value of **cachedCount** multiplied by the number of columns.| | cachedCount | number | Number of list items or list item groups to be preloaded (cached). It works only in [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md). A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/arkts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>In single-column mode, the number of the list items to be cached before and after the currently displayed one equals the value of **cachedCount**.<br>In multi-column mode, the number of the list items to be cached is the value of **cachedCount** multiplied by the number of columns.|
| editMode<sup>(deprecated)</sup> | boolean | Whether to enter editing mode.<br>This API is deprecated since API version 9. For details about how to implement deletion of a selected list item, see [Example 3](#example-3).<br>Default value: **false**| | editMode<sup>(deprecated)</sup> | boolean | Whether to enter editing mode.<br>This API is deprecated since API version 9. For details about how to implement deletion of a selected list item, see [Example 3](#example-3).<br>Default value: **false**|
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Edge scrolling effect. The spring effect and shadow effect are supported.<br>Default value: **EdgeEffect.Spring**<br>Since API version 9, this API is supported in ArkTS widgets.| | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Edge scrolling effect. The spring effect and shadow effect are supported.<br>Default value: **EdgeEffect.Spring**<br>Since API version 9, this API is supported in ArkTS widgets.|
| chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When chained animations are in motion, the list divider is not displayed.<br>The following prerequisites must be met for the chained animations to take effect:<br> - The edge scrolling effect of the list is of the Spring type.<br> - The multi-column mode is not enabled for the list.| | chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When chained animations are in motion, the list divider is not displayed.<br>The following prerequisites must be met for the chained animations to take effect:<br> - The edge scrolling effect of the list is of the Spring type.<br> - The multi-column mode is not enabled for the list.|
| chainAnimationOptions<sup>10+</sup> | [ChainAnimationOptions](#chainanimationoptions10) | Chained animation settings.<br>**System API**: This is a system API. | | chainAnimationOptions<sup>10+</sup> | [ChainAnimationOptions](#chainanimationoptions10) | Chained animation settings.<br>**System API**: This is a system API. |
| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.| | multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain),<br>gutter<sup>10+</sup>?:[Dimension](ts-types.md#dimension10) | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>Default value: **1**<br>The rules are as follows:<br>- If the value is set to a number, the column width is calculated by dividing the cross-axis width of the **\<List>** component by the specified number.<br>- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized.<br>- If the value is set to {minLength, maxLength}, and the cross-axis width constraint of the parent component is infinite, the parent component is arranged by column, and the column width is calculated based on the largest list item in the display area.<br>- Each list item group occupies one row in multi-column mode. Its child list items are arranged based on the **lanes** attribute of the list.<br>- If the value is set to {minLength, maxLength}, the number of columns is calculated based on the cross-axis width of the list item group. If the cross-axis width of the list item group is different from that of the list, the number of columns in the list item group may be different from that in the list.<br>If the value is set to the **gutter** type, it indicates the column spacing. It takes effect when the number of columns is greater than 1.<br>Default value: **0**<br>This API is supported in ArkTS widgets.| | lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain),<br>gutter<sup>10+</sup>?:[Dimension](ts-types.md#dimension10) | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>Default value: **1**<br>The rules are as follows:<br>- If the value is set to a number, the column width is calculated by dividing the cross-axis width of the **\<List>** component by the specified number.<br>- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized.<br>- If the value is set to {minLength, maxLength}, and the cross-axis width constraint of the parent component is infinite, the parent component is arranged by column, and the column width is calculated based on the largest list item in the display area.<br>- Each list item group occupies one row in multi-column mode. Its child list items are arranged based on the **lanes** attribute of the list.<br>- If the value is set to {minLength, maxLength}, the number of columns is calculated based on the cross-axis width of the list item group. If the cross-axis width of the list item group is different from that of the list, the number of columns in the list item group may be different from that in the list.<br>If the value is set to the **gutter** type, it indicates the column spacing. It takes effect when the number of columns is greater than 1.<br>Default value: **0**<br>This API is supported in ArkTS widgets.|
| alignListItem<sup>9+</sup> | [ListItemAlign](#listitemalign9) | Alignment mode of list items along the cross axis when: Cross-axis width of the **\<List>** component > Cross-axis width of list items x Value of **lanes**.<br>Default value: **ListItemAlign.Start**<br>This API is supported in ArkTS widgets.| | alignListItem<sup>9+</sup> | [ListItemAlign](#listitemalign9) | Alignment mode of list items along the cross axis when: Cross-axis width of the **\<List>** component > Cross-axis width of list items x Value of **lanes**.<br>Default value: **ListItemAlign.Start**<br>This API is supported in ArkTS widgets.|
| sticky<sup>9+</sup> | [StickyStyle](#stickystyle9) | Whether to pin the header to the top or the footer to the bottom in the **\<ListItemGroup>** component. This attribute is used together with the **[\<ListItemGroup>](ts-container-listitemgroup.md)** component.<br>Default value: **StickyStyle.None**<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.| | sticky<sup>9+</sup> | [StickyStyle](#stickystyle9) | Whether to pin the header to the top or the footer to the bottom in the **\<ListItemGroup>** component. This attribute is used together with the **[\<ListItemGroup>](ts-container-listitemgroup.md)** component.<br>Default value: **StickyStyle.None**<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.|
| scrollSnapAlign<sup>10+</sup> | [ScrollSnapAlign](#scrollsnapalign10) | Alignment mode of list items when scrolling ends.<br>Default value: **ScrollSnapAlign.NONE**<br>**NOTE**<br>This attribute is available only when the heights of list items are the same.| | scrollSnapAlign<sup>10+</sup> | [ScrollSnapAlign](#scrollsnapalign10) | Alignment mode of list items when scrolling ends.<br>Default value: **ScrollSnapAlign.NONE**<br>**NOTE**<br>This attribute is available only when the heights of list items are the same.|
| enableScrollInteraction<sup>10+</sup> | boolean | Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true** | | enableScrollInteraction<sup>10+</sup> | boolean | Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true**|
| nestedScroll<sup>10+</sup> | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10) | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component.| | nestedScroll<sup>10+</sup> | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10) | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component. |
| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource) | Friction coefficient. It applies only to gestures in the scrolling area, and it affects only indirectly the scroll chaining during the inertial scrolling process.<br>Default value: **0.9** for wearable devices and **0.6** for non-wearable devices<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.|
## ListItemAlign<sup>9+</sup> ## ListItemAlign<sup>9+</sup>
...@@ -126,9 +127,9 @@ When list items are left-, right-, top-, or bottom-aligned, the items at the end ...@@ -126,9 +127,9 @@ When list items are left-, right-, top-, or bottom-aligned, the items at the end
This API is available only when the heights of list items are the same. This API is available only when the heights of list items are the same.
| Name | Description | | Name | Description |
| ------ | ------------------------------------------------------------ | | ------ | ---------------------------------------- |
| NONE | No alignment. This is the default value. When scrolling ends, the list items are not aligned. | | NONE | No alignment. This is the default value. When scrolling ends, the list items are not aligned. |
| START | The first item in the view is aligned at the start of the list.<br>**NOTE**<br>When the list hits the end, the items at the end must be completely displayed. In this case, the items at the start may not be aligned.| | START | The first item in the view is aligned at the start of the list.<br>**NOTE**<br>When the list hits the end, the items at the end must be completely displayed. In this case, the items at the start may not be aligned.|
| CENTER | The middle items in the view are aligned in the center of the list.<br>**NOTE**<br>The items at the start and end can be aligned in the center of the list. In this case, the list may have a blank area exposed, and the first or last item is aligned to the center.| | CENTER | The middle items in the view are aligned in the center of the list.<br>**NOTE**<br>The items at the start and end can be aligned in the center of the list. In this case, the list may have a blank area exposed, and the first or last item is aligned to the center.|
| END | The last item in the view is aligned at the end of the list.<br>**NOTE**<br>When the list hits the start, the items at the start must be completely displayed. In this case, the items at the end may not be aligned.| | END | The last item in the view is aligned at the end of the list.<br>**NOTE**<br>When the list hits the start, the items at the start must be completely displayed. In this case, the items at the end may not be aligned.|
...@@ -155,23 +156,23 @@ This API is available only when the heights of list items are the same. ...@@ -155,23 +156,23 @@ This API is available only when the heights of list items are the same.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------------ | | ------ | ---------------------------------------- |
| Idle | Idle. The list enters this state when an API in the controller is used to scroll the list or when the scrollbar is dragged.<br>**NOTE**<br> Since API version 10, the list enters this state when it is not scrolling or an API in the controller that does not apply an animation is called.| | Idle | Idle. The list enters this state when an API in the controller is used to scroll the list or when the scrollbar is dragged.<br>**NOTE**<br> Since API version 10, the list enters this state when it is not scrolling or an API in the controller that does not apply an animation is called.|
| Scroll | Scrolling. The list enters this state when the user drags the list to scroll.<br>**NOTE**<br> Since API version 10, the list also enters this state when the user drags the scrollbar or the mouse wheel to scroll the list. | | Scroll | Scrolling. The list enters this state when the user drags the list to scroll.<br>**NOTE**<br> Since API version 10, the list also enters this state when the user drags the scrollbar or the mouse wheel to scroll the list.|
| Fling | Inertial scrolling. The list enters this state when inertial scrolling occurs or when the list bounces back after being released from a fling.<br>**NOTE**<br> Since API version 10, the list enters this state when: inertial scrolling occurs after a fling; the list bounces back after being released from a fling; inertial scrolling occurs after quick dragging of the built-in scrollbar; scrolling occurs after an API in the controller that applies an animation is called.| | Fling | Inertial scrolling. The list enters this state when inertial scrolling occurs or when the list bounces back after being released from a fling.<br>**NOTE**<br> Since API version 10, the list enters this state when: inertial scrolling occurs after a fling; the list bounces back after being released from a fling; inertial scrolling occurs after quick dragging of the built-in scrollbar; scrolling occurs after an API in the controller that applies an animation is called.|
The table below lists the changes in the **ScrollState** enums. The table below lists the changes in the **ScrollState** enums.
| Scenario | API version 9 and earlier |API version 10 and later | | Scenario | API Version 9 and Earlier| API Version 10 and Later|
| ------ | ------------------------------ |------------------------------ | | ------------- | ---------------- | ---------------- |
| Finger dragging | Scroll | Scroll | | Finger dragging | Scroll | Scroll |
| Inertial scrolling | Fling | Fling | | Inertial scrolling | Fling | Fling |
| Cross-boundary bouncing | Fling | Fling | | Cross-boundary bouncing | Fling | Fling |
| Scrolling by mouse wheel | Idle | Scroll | | Scrolling by mouse wheel | Idle | Scroll |
| Scrollbar dragging | Idle | Scroll | | Scrollbar dragging | Idle | Scroll |
| Scrolling by the scrolling controller (with animation) | Idle | Fling | | Scrolling by the scrolling controller (with animation) | Idle | Fling |
| Scrolling by the scrolling controller (without animation) | Idle | Idle | | Scrolling by the scrolling controller (without animation)| Idle | Idle |
> **NOTE** > **NOTE**
> >
...@@ -213,6 +214,7 @@ struct ListExample { ...@@ -213,6 +214,7 @@ struct ListExample {
} }
.listDirection(Axis.Vertical) // Arrangement direction .listDirection(Axis.Vertical) // Arrangement direction
.scrollBar(BarState.Off) .scrollBar(BarState.Off)
.friction(0.6)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider
.edgeEffect(EdgeEffect.Spring) // Set the edge scrolling effect to Spring. .edgeEffect(EdgeEffect.Spring) // Set the edge scrolling effect to Spring.
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => { .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
...@@ -264,6 +266,7 @@ struct ListLanesExample { ...@@ -264,6 +266,7 @@ struct ListLanesExample {
} }
.height(300) .height(300)
.width("90%") .width("90%")
.friction(0.6)
.border({ width: 3, color: Color.Red }) .border({ width: 3, color: Color.Red })
.lanes({ minLength: 40, maxLength: 40 }) .lanes({ minLength: 40, maxLength: 40 })
.alignListItem(this.alignListItem) .alignListItem(this.alignListItem)
...@@ -283,7 +286,7 @@ struct ListLanesExample { ...@@ -283,7 +286,7 @@ struct ListLanesExample {
} }
``` ```
![list](figures/list1.gif) ![list](figures/list-alignListItem.gif)
### Example 3 ### Example 3
...@@ -327,6 +330,7 @@ struct ListExample{ ...@@ -327,6 +330,7 @@ struct ListExample{
}, item => item) }, item => item)
}.width('90%') }.width('90%')
.scrollBar(BarState.Off) .scrollBar(BarState.Off)
.friction(0.6)
}.width('100%') }.width('100%')
Button('edit list') Button('edit list')
......
en/application-dev/ui/arkts-layout-development-create-list.md
浏览文件 @ ba7c4f73
...@@ -299,7 +299,7 @@ List() { ...@@ -299,7 +299,7 @@ List() {
}) })
``` ```
This example draws a divider with a stroke thickness of 1 vp from a position 60 vp away from the start edge of the list to a position 10 vp away from the end edge of the list. The effect is shown in Figure 8. This example draws a divider with a stroke thickness of 1 vp from a position 60 vp away from the start edge of the list to a position 10 vp away from the end edge of the list. The effect is shown in Figure 9.
>**NOTE** >**NOTE**
> >
...@@ -653,8 +653,6 @@ The following describes the implementation of the pull-and-refresh feature: ...@@ -653,8 +653,6 @@ The following describes the implementation of the pull-and-refresh feature:
3. Listen for the finger lift event. If the movement reaches the maximum value, trigger data loading and display the refresh view. After the loading is complete, hide the view. 3. Listen for the finger lift event. If the movement reaches the maximum value, trigger data loading and display the refresh view. After the loading is complete, hide the view.
You can also use the third-party component [PullToRefresh](https://gitee.com/openharmony-sig/PullToRefresh) to implement this feature.
## Editing a List ## Editing a List
......
en/application-dev/ui/arkts-routing.md
浏览文件 @ ba7c4f73
...@@ -11,23 +11,26 @@ Page redirection is an important part of the development process. When using an ...@@ -11,23 +11,26 @@ Page redirection is an important part of the development process. When using an
**Figure 1** Page redirection **Figure 1** Page redirection
![router-jump-to-detail](figures/router-jump-to-detail.gif) ![router-jump-to-detail](figures/router-jump-to-detail.gif)
The **Router** module provides two redirection modes: [router.pushUrl()](../reference/apis/js-apis-router.md#routerpushurl9) and [router.replaceUrl()](../reference/apis/js-apis-router.md#routerreplaceurl9). The two modes determine whether the target page will replace the current page. The **Router** module provides two redirection modes: [router.pushUrl()](../reference/apis/js-apis-router.md#routerpushurl9) and [router.replaceUrl()](../reference/apis/js-apis-router.md#routerreplaceurl9). Whether the target page will replace the current page depends on the mode used.
- **router.pushUrl()**: The target page does not replace the current page. Instead, it is pushed into the [page stack](../application-models/page-mission-stack.md). In this way, the state of the current page can be retained, and users can return to the current page by pressing the back button or calling the [router.back()](../reference/apis/js-apis-router.md#routerback) API. - **router.pushUrl()**: The target page is pushed into the [page stack](../application-models/page-mission-stack.md) and does not replace the current page. In this mode, the state of the current page is retained, and users can return to the current page by pressing the back button or calling the [router.back()](../reference/apis/js-apis-router.md#routerback) API.
- **router.replaceUrl()**: The target page replaces the current page and destroys the current page. In this way, the resources of the current page can be released, and users cannot return to the current page. - **router.replaceUrl()**: The target page replaces and destroys the current page. In this mode, the resources of the current page can be released, and users cannot return to the current page.
>**NOTE** >**NOTE**
> >
>The maximum capacity of a page stack is 32 pages. If this limit is exceeded, the [router.clear()](../reference/apis/js-apis-router.md#routerclear) API can be called to clear the historical page stack and free the memory. >- When creating a page, configure the route to this page by following instructions in [Building the Second Page](../quick-start/start-with-ets-stage.md).
>
>
>- The maximum capacity of a page stack is 32 pages. If this limit is exceeded, the [router.clear()](../reference/apis/js-apis-router.md#routerclear) API can be called to clear the historical page stack and free the memory.
The **Router** module also provides two instance modes: **Standard** and **Single**. The two modes determine whether the target URL corresponds to multiple instances. The **Router** module also provides two instance modes: **Standard** and **Single**. Depending on the mode, the target URL is mapped to one or more instances.
- **Standard**: standard instance mode, which is the default instance mode. Each time this API is called, a target page is created and pushed to the top of the stack. - **Standard**: multi-instance mode. It is the default instance mode. In this mode, the target page is added to the top of the page stack, regardless of whether a page with the same URL exists in the stack.
- **Single**: singleton mode. If the URL of the target page already exists in the page stack, the page with the same URL closest to the top of the stack is moved to the top of the stack and reloaded. If the URL of the target page does not exist in the page stack, the page is redirected in standard mode. - **Single**: singleton mode. In this mode, if the URL of the target page already exists in the page stack, the page closest to the top of the stack with the same URL is moved to the top of the stack and becomes the new page. If the URL of the target page does not exist in the page stack, the page is redirected in standard mode.
Before using the **Router** module, you need to import it to the code. Before using the **Router** module, import it first.
```ts ```ts
...@@ -54,7 +57,7 @@ import router from '@ohos.router'; ...@@ -54,7 +57,7 @@ import router from '@ohos.router';
>**NOTE** >**NOTE**
> >
>In **Standard** instance mode, the **router.RouterMode.Standard** parameter can be omitted. >In standard (multi-instance) mode, the **router.RouterMode.Standard** parameter can be omitted.
- Scenario 2: There is a login page (**Login**) and a personal center page (**Profile**). After a user successfully logs in from the **Login** page, the **Profile** page is displayed. At the same time, the **Login** page is destroyed, and the application exits when the back button is pressed. In this scenario, you can use the **replaceUrl()** API and use the Standard instance mode (which can also be omitted). - Scenario 2: There is a login page (**Login**) and a personal center page (**Profile**). After a user successfully logs in from the **Login** page, the **Profile** page is displayed. At the same time, the **Login** page is destroyed, and the application exits when the back button is pressed. In this scenario, you can use the **replaceUrl()** API and use the Standard instance mode (which can also be omitted).
...@@ -76,7 +79,7 @@ import router from '@ohos.router'; ...@@ -76,7 +79,7 @@ import router from '@ohos.router';
>**NOTE** >**NOTE**
> >
>In **Standard** instance mode, the **router.RouterMode.Standard** parameter can be omitted. >In standard (multi-instance) mode, the **router.RouterMode.Standard** parameter can be omitted.
- Scenario 3: There is a setting page (**Setting**) and a theme switching page (**Theme**). You want to click a theme option on the **Setting** page to go to the **Theme** page. In addition, you want to ensure that only one **Theme** page exists in the page stack at a time. When the back button is clicked on the **Theme** page, the **Setting** page is displayed. In this scenario, you can use the **pushUrl()** API and use the **Single** instance mode. - Scenario 3: There is a setting page (**Setting**) and a theme switching page (**Theme**). You want to click a theme option on the **Setting** page to go to the **Theme** page. In addition, you want to ensure that only one **Theme** page exists in the page stack at a time. When the back button is clicked on the **Theme** page, the **Setting** page is displayed. In this scenario, you can use the **pushUrl()** API and use the **Single** instance mode.
...@@ -115,7 +118,7 @@ import router from '@ohos.router'; ...@@ -115,7 +118,7 @@ import router from '@ohos.router';
The preceding scenarios do not involve parameter transfer. The preceding scenarios do not involve parameter transfer.
If you need to transfer some data to the target page during redirection, you can add a **params** attribute and specify an object as a parameter when invoking an API of the **Router** module. Example: If you need to transfer data to the target page during redirection, you can add a **params** attribute and specify an object as a parameter when invoking an API of the **Router** module. Example:
```ts ```ts
...@@ -150,11 +153,11 @@ function onJumpClick(): void { ...@@ -150,11 +153,11 @@ function onJumpClick(): void {
} }
``` ```
On the target page, you can call the [getParams()](../reference/apis/js-apis-router.md#routergetparams) API of the **Router** module to obtain the transferred parameters. Example: On the target page, you can call the [getParams()](../reference/apis/js-apis-router.md#routergetparams) API of the **Router** module to obtain the passed parameters. Example:
```ts ```ts
const params = router.getParams(); // Obtain the transferred parameter object. const params = router.getParams(); // Obtain the passed parameters.
const id = params['id']; // Obtain the value of the id attribute. const id = params['id']; // Obtain the value of the id attribute.
const age = params['info'].age; // Obtain the value of the age attribute. const age = params['info'].age; // Obtain the value of the age attribute.
``` ```
...@@ -162,13 +165,13 @@ const age = params['info'].age; // Obtain the value of the age attribute. ...@@ -162,13 +165,13 @@ const age = params['info'].age; // Obtain the value of the age attribute.
## Page Return ## Page Return
After a user completes an operation on a page, the user usually needs to return to the previous page or a specified page. In this case, the page return function is required. During the return process, the data may need to be transferred to the target page, which requires the data transfer function. Implement the page return feature so that users can return to the previous page or a specified page. You can pass parameters to the target page during the return process.
**Figure 2** Page return **Figure 2** Page return
![router-back-to-home](figures/router-back-to-home.gif) ![router-back-to-home](figures/router-back-to-home.gif)
Before using the **Router** module, you need to import it to the code. Before using the **Router** module, import it first.
```ts ```ts
...@@ -195,7 +198,7 @@ You can use any of the following methods to return to a page: ...@@ -195,7 +198,7 @@ You can use any of the following methods to return to a page:
}); });
``` ```
This method allows you to return to a specified page. You need to specify the path of the target page. For this method to work, the target page must it exist in the page stack. This method allows uesrs to return to a page with the specified path. For this method to work, the target page must exist in the page stack.
- Method 3: Return to the specified page and transfer custom parameter information. - Method 3: Return to the specified page and transfer custom parameter information.
...@@ -209,14 +212,14 @@ You can use any of the following methods to return to a page: ...@@ -209,14 +212,14 @@ You can use any of the following methods to return to a page:
}); });
``` ```
This method not only allows you to return to the specified page, but also transfer custom parameter information when returning. The parameter information can be obtained and parsed by invoking the **router.getParams()** API on the target page. This method not only allows you to return to the specified page, but also pass in custom parameter information during the return process. The parameter information can be obtained and parsed by invoking the **router.getParams()** API on the target page.
On the target page, call the **router.getParams()** API at the position where parameters need to be obtained, for example, in the **onPageShow()** lifecycle callback: On the target page, call the **router.getParams()** API at the position where parameters need to be obtained, for example, in the **onPageShow()** lifecycle callback:
```ts ```ts
onPageShow() { onPageShow() {
const params = router.getParams(); // Obtain the transferred parameter object. const params = router.getParams(); // Obtain the passed parameters.
const info = params['info']; // Obtain the value of the info attribute. const info = params['info']; // Obtain the value of the info attribute.
} }
``` ```
...@@ -243,7 +246,7 @@ Such a dialog box can be in the [default style](#default-confirmation-dialog-box ...@@ -243,7 +246,7 @@ Such a dialog box can be in the [default style](#default-confirmation-dialog-box
To implement this function, you can use the [router.showAlertBeforeBackPage()](../reference/apis/js-apis-router.md#routershowalertbeforebackpage9) and [router.back()](../reference/apis/js-apis-router.md#routerback) APIs provided by the **Router** module. To implement this function, you can use the [router.showAlertBeforeBackPage()](../reference/apis/js-apis-router.md#routershowalertbeforebackpage9) and [router.back()](../reference/apis/js-apis-router.md#routerback) APIs provided by the **Router** module.
Before using the **Router** module, you need to import it to the code. Before using the **Router** module, import it first.
```ts ```ts
...@@ -272,17 +275,16 @@ function onBackClick(): void { ...@@ -272,17 +275,16 @@ function onBackClick(): void {
The **router.showAlertBeforeBackPage()** API receives an object as a parameter. The object contains the following attributes: The **router.showAlertBeforeBackPage()** API receives an object as a parameter. The object contains the following attributes:
- **message**: content of the dialog box. The value is of the string type. **message**: content of the dialog box. The value is of the string type.
If the API is successfully called, the confirmation dialog box is displayed on the target page. Otherwise, an exception is thrown and the error code and error information is obtained through **err.code** and **err.message**. If the API is successfully called, the confirmation dialog box is displayed on the target page. Otherwise, an exception is thrown and the error code and error information is obtained through **err.code** and **err.message**.
When the user clicks the back button, a confirmation dialog box is displayed, prompting the user to confirm their operation. If the user selects Cancel, the application stays on the current page. If the user selects OK, the **router.back()** API is triggered and the redirection is performed based on the parameters.
When the user clicks the back button, a confirmation dialog box is displayed, prompting the user to confirm their operation. If the user selects Cancel, the application stays on the current page. If the user selects OK, the **router.back()** API is triggered and the redirection is performed based on the parameters.
### Custom Confirmation Dialog Box ### Custom Confirmation Dialog Box
To implement a custom confirmation dialog box, use APIs in the [PromptAction](../reference/apis/js-apis-promptAction.md#promptactionshowdialog) module or customize a popup window. This topic uses the APIs in the **PromptAction** module an example to describe how to implement a custom confirmation dialog box. To implement a custom confirmation dialog box, use APIs in the [PromptAction](../reference/apis/js-apis-promptAction.md#promptactionshowdialog) module or customize a popup window. This topic uses the APIs in the **PromptAction** module an example to describe how to implement a custom confirmation dialog box.
Before using the **Router** module, you need to import it to the code. Before using the **Router** module, import it first.
```ts ```ts
...@@ -324,3 +326,63 @@ function onBackClick() { ...@@ -324,3 +326,63 @@ function onBackClick() {
``` ```
When the user clicks the back button, the custom confirmation dialog box is displayed, prompting the user to confirm their operation. If the user selects Cancel, the application stays on the current page. If the user selects OK, the **router.back()** API is triggered and the redirection is performed based on the parameters. When the user clicks the back button, the custom confirmation dialog box is displayed, prompting the user to confirm their operation. If the user selects Cancel, the application stays on the current page. If the user selects OK, the **router.back()** API is triggered and the redirection is performed based on the parameters.
## Named Route
To redirect to a [page in a shared package](../quick-start/shared-guide.md), you can use [router.pushNamedRoute()](../reference/apis/js-apis-router.md#routerpushnamedroute10).
Before using the **Router** module, import it first.
```ts
import router from '@ohos.router';
```
In the target page in the [shared package](../quick-start/shared-guide.md), name the [@Entry decorated custom component](../quick-start/arkts-create-custom-components.md#entryoptions10).
```ts
// library/src/main/ets/pages/Index.ets
@Entry({ routeName : 'myPage' })
@Component
struct MyComponent {
}
```
When the configuration is successful, import the named route page to the page from which you want to redirect.
```ts
// entry/src/main/ets/pages/Index.ets
import router from '@ohos.router';
import 'library/src/main/ets/Index.ets' // Import the named route page from the shared package library.
@Entry
@Component
struct Index {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Hello World')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({ top: 20 })
.backgroundColor('#ccc')
.onClick(() => { // Click to go to a page in another shared package.
try {
router.pushNamedRoute({
name: 'myPage',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
})
} catch (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
}
})
}
.width('100%')
.height('100%')
}
}
```
en/release-notes/changelogs/OpenHarmony_4.0.8.1/changelogs-arkcompiler.md
浏览文件 @ ba7c4f73
# ArkCompiler Subsystem Changelog # ArkCompiler Subsystem Changelog
## cl.ArkCompiler.1 type compileMode uses es2abc by default ## cl.ArkCompiler.1 Change of Default Compiler to es2abc in Type Compilation
The composition of ArkCompiler in sdk has ts2abc compiler and es2abc compiler, supporting compilation of ets/ts/js files.<br> In the SDK, ArkCompiler has two compilers that support ets/ts/js compilation: ts2abc compiler and es2abc compiler.
Compilation Mode Introduction:<br>
​&emsp;Non-type compilation: convert ets/ts sourceCode into js sourceCode, and use ArkCompiler compiler es2abc to generate bytecode. <br>
​&emsp;type compilation: convert ets/ts sourceCode into ts sourceCode, and use ArkCompiler compiler ts2abc (previous version)/es2abc (enabled in this version) to generate bytecode. <br>
Application Project hvigor version:<br>
​&emsp;hvigorVersion field and @ohos/hvigor-ohos-plugin field in dependencies of hvigor-config.json5 file in the hvigor directory of the application project.<br>
Enable type compilation:<br>
​&emsp;When the hvigor version is greater than or equal to 2.6.0-rc.9.s, the type compilation mode is used by default, or in the build-profile.json5 file of the same level directory as the application sourceCode (src directory), configure the "aotCompileMode": "type" option under the buildOption tag<br>
When type compilation is enabled and this version of the SDK is used, the ArkCompiler compiler es2abc will be used by default to compile the ts sourceCode to generate bytecode, and it is not recommended to use the old version SDK with ts2abc enabled for type compilation.<br> Introduction to compilation modes:
**Change Impact**<br> - Non-type compilation: converts ArkTS/TS source code into JS source code, and uses the ArkCompiler compiler es2abc to generate bytecode.
With DevEco Studio development, after the type compilation mode is enabled and the new version of the SDK is used, due to the change of the compilation mode and the change of the ArkCompiler compiler, application compilation failures and runtime crashes may occur.<br>
**Key API/Component Changes**<br> - Type compilation: converts ArkTS/TS source code into TS source code, and uses the ArkCompiler compiler ts2abc (in earlier versions)/es2abc (enabled in this version) to generate bytecode.
type compileMode uses arkcompiler frontend compiler es2abc by default<br>
You can check the hvigor version of the application project in the following fields:
​**hvigorVersion** field and **@ohos/hvigor-ohos-plugin** field under **dependencies** in the **hvigor-config.json5** file in the **hvigor** directory of the application project
Enable type compilation:
If the hvigor version is 2.6.0-rc.9.s or later, the type compilation mode is enabled by default. You can also manually enable this mode by setting **aotCompileMode** to **type** under the **buildOption** tag in the **build-profile.json5** file at the same level directory as the application source code (**src** directory).
When type compilation is enabled and the SDK of this version is used, the ArkCompiler compiler es2abc is used by default. The earlier version SDK with ts2abc enabled is not recommended for type compilation.
**Change Impact**
In DevEco Studio, when the type compilation mode is enabled and the SDK of this version is used, the change in the compilation mode and ArkCompiler compiler may result in application compilation failures and runtime crashes.
**Key API/Component Changes**
In type compilation mode, the ArkCompiler compiler es2abc is used by default.
**Adaptation Guide** **Adaptation Guide**
1. When the hvigor version is greater than or equal to 2.6.0-rc.9.s, the developer needs to configure "aotCompileMode": "" in the build-profile.json5 file to switch to the original compilation mode (not type).
If the hvigor version is 2.6.0-rc.9.s or later, to switch to the original compilation mode (non-type), you need to set **aotCompileMode** in the **build-profile.json5** file.
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或