Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 0ef16b18 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (12874) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 a5bd1831
显示空白变更内容
内联 并排
Showing with 442 addition and 345 deletion
en/application-dev/reference/apis/js-apis-router.md
浏览文件 @ 0ef16b18
# Page Routing
# @ohos.router
The **Router** module provides APIs to access pages through URLs. You can use the APIs to navigate to a specified page in an application, replace the current page with another one in an application, and return to the previous page or a specified page.
......@@ -40,9 +40,9 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 100002 | Uri error. The uri of router is not exist. |
| 100003 | Page stack error. The pages are pushed too much. |
| 100001 | If UI execution context not found. |
| 100002 | If the uri is not exist. |
| 100003 | If the pages are pushed too much. |
**Example**
......@@ -54,8 +54,8 @@ try {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}
}
})
.then(() => {
// success
......@@ -89,9 +89,9 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 100002 | Uri error. The uri of router is not exist. |
| 100003 | Page stack error. The pages are pushed too much. |
| 100001 | If UI execution context not found. |
| 100002 | If the uri is not exist. |
| 100003 | If the pages are pushed too much. |
**Example**
......@@ -103,8 +103,8 @@ try {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}
}
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
......@@ -143,9 +143,9 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 100002 | Uri error. The uri of router is not exist. |
| 100003 | Page stack error. The pages are pushed too much. |
| 100001 | If UI execution context not found. |
| 100002 | If the uri is not exist. |
| 100003 | If the pages are pushed too much. |
**Example**
......@@ -157,8 +157,8 @@ try {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}
}
}, router.RouterMode.Standard)
.then(() => {
// success
......@@ -193,9 +193,9 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 100002 | Uri error. The uri of router is not exist. |
| 100003 | Page stack error. The pages are pushed too much. |
| 100001 | If UI execution context not found. |
| 100002 | If the uri is not exist. |
| 100003 | If the pages are pushed too much. |
**Example**
......@@ -207,8 +207,8 @@ try {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
......@@ -247,8 +247,8 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 200002 | Uri error. The uri of router is not exist. |
| 100001 | If UI execution context not found, only throw in standard system. |
| 200002 | If the uri is not exist. |
**Example**
......@@ -257,8 +257,8 @@ try {
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message',
},
data1: 'message'
}
})
.then(() => {
// success
......@@ -292,8 +292,8 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 200002 | Uri error. The uri of router is not exist. |
| 100001 | If UI execution context not found, only throw in standard system. |
| 200002 | If the uri is not exist. |
**Example**
......@@ -302,8 +302,8 @@ try {
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message',
},
data1: 'message'
}
}, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
......@@ -344,8 +344,8 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 200002 | Uri error. The uri of router is not exist. |
| 100001 | If UI execution context not found, only throw in standard system. |
| 200002 | If the uri is not exist. |
**Example**
......@@ -354,8 +354,8 @@ try {
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message',
},
data1: 'message'
}
}, router.RouterMode.Standard)
.then(() => {
// success
......@@ -390,8 +390,8 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 200002 | Uri error. The uri of router is not exist. |
| 100001 | If UI execution context not found, only throw in standard system. |
| 200002 | If the uri is not exist. |
**Example**
......@@ -400,8 +400,8 @@ try {
router.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message',
},
data1: 'message'
}
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
......@@ -465,7 +465,7 @@ Obtains the number of pages in the current stack.
**Example**
```js
var size = router.getLength();
let size = router.getLength();
console.log('pages stack size = ' + size);
```
......@@ -486,7 +486,7 @@ Obtains state information about the current page.
**Example**
```js
var page = router.getState();
let page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);
......@@ -498,11 +498,11 @@ Describes the page routing state.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Description |
| ----- | ------ | ---------------------------------- |
| index | number | Index of the current page in the stack. The index starts from 1 from the bottom to the top of the stack.|
| name | string | Name of the current page, that is, the file name. |
| path | string | Path of the current page. |
| Name | Type | Mandatory| Description |
| ----- | ------ | ---- | ------------------------------------------------------------ |
| index | number | Yes | Index of the current page in the stack. The index starts from 1 from the bottom to the top of the stack.|
| name | string | No | Name of the current page, that is, the file name. |
| path | string | Yes | Path of the current page. |
## router.enableBackPageAlert<sup>9+</sup>
......@@ -524,7 +524,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
| ID | Error Message|
| --------- | ------- |
| 100001 | Internal error. |
| 100001 | If UI execution context not found. |
**Example**
......@@ -590,7 +590,7 @@ Describes the page routing options.
| 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.|
| 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 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.|
> **NOTE**
......@@ -603,8 +603,8 @@ Enumerates the routing modes.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name | Description |
| -------- | ---------------------------------------- |
| Standard | Standard mode.<br>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. |
| -------- | ------------------------------------------------------------ |
| Standard | Standard mode.<br>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.<br>If the URL of the target page already exists in the page stack, the page closest to the top of the stack is moved as a new page to the top of the stack.<br>If the URL of the target page does not exist in the page stack, the page is redirected to in standard mode.|
## Examples
......@@ -618,8 +618,8 @@ export default {
router.push({
url: 'pages/detail/detail',
params: {
data1: 'message',
},
data1: 'message'
}
});
}
}
......@@ -649,11 +649,11 @@ struct Index {
text: 'This is the value on the first page.',
data: {
array: [12, 45, 78]
},
}
}
}
try {
await router.push(options)
await router.pushUrl(options)
} catch (err) {
console.info(` fail callback, code: ${err.code}, msg: ${err.msg}`)
}
......@@ -704,7 +704,7 @@ struct Second {
this.secondData = (this.data.array[1]).toString()
})
.margin({top:20})
Text('Value from the first page '+'' + this.secondData)
Text(`This is the data passed from the first page: ${this.secondData}`)
.fontSize(20)
.margin({top:20})
.backgroundColor('red')
......@@ -741,8 +741,8 @@ router.push({
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}
}
});
```
## router.push<sup>(deprecated)</sup>
......@@ -772,8 +772,8 @@ router.push({
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}
}
},router.RouterMode.Standard);
```
......@@ -799,8 +799,8 @@ This API is deprecated since API version 9. You are advised to use [replaceUrl<s
router.replace({
url: 'pages/detail',
params: {
data1: 'message',
},
data1: 'message'
}
});
```
......@@ -812,7 +812,7 @@ Replaces the current page with another one in the application and destroys the c
This API is deprecated since API version 9. You are advised to use [replaceUrl<sup>9+</sup>](#routerreplaceurl9) instead.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**System capability**: SystemCapability.ArkUI.ArkUI.Lite
**Parameters**
......@@ -827,8 +827,8 @@ This API is deprecated since API version 9. You are advised to use [replaceUrl<s
router.replace({
url: 'pages/detail/detail',
params: {
data1: 'message',
},
data1: 'message'
}
}, router.RouterMode.Standard);
```
......
en/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ 0ef16b18
# Property Animator
You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, backgroundColor, **opacity**, **scale**, **rotate**, and **translate**.
You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**.
> **NOTE**
>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
Applies a property animator to the component to animate its attributes over time.
animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
**Parameters**
| Name | Type | Mandatory | Description |
| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
| duration | number | No | Animation duration, in ms.<br>Default value: **1000**|
| tempo | number | No | Animation playback speed. A greater value indicates a higher animation playback speed.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**|
| curve | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;ICurve<sup>9+</sup> | No | Animation curve.<br>Default value: **Curve.Linear** |
| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve<sup>9+</sup> | No | Animation curve.<br>Default value: **Curve.Linear** |
| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.<br>Default value: **0** |
| iterations | number | No | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**|
......@@ -31,34 +29,49 @@ Applies a property animator to the component to animate its attributes over time
@Entry
@Component
struct AttrAnimationExample {
@State widthSize: number = 200;
@State heightSize: number = 100;
@State flag: boolean = true;
@State widthSize: number = 250
@State heightSize: number = 100
@State rotateAngle: number = 0
@State flag: boolean = true
build() {
Column() {
Button('click me')
.onClick((event: ClickEvent) => {
Button('change width and height')
.onClick(() => {
if (this.flag) {
this.widthSize = 100
this.heightSize = 50
} else {
this.widthSize = 200
this.widthSize = 250
this.heightSize = 100
}
this.flag = !this.flag
})
.width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff)
.margin(30)
.width(this.widthSize)
.height(this.heightSize)
.animation({
duration: 2000, // Animation duration
curve: Curve.EaseOut, // Animation curve
delay: 500, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal // Animation playback mode
}) // Animation configuration for the width and height attributes of the <Button> component
}.width('100%').margin({ top: 5 })
duration: 2000,
curve: Curve.EaseOut,
iterations: 3,
playMode: PlayMode.Normal
})
Button('change rotate angle')
.onClick(() => {
this.rotateAngle = 90
})
.margin(50)
.rotate({ angle: this.rotateAngle })
.animation({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times.
playMode: PlayMode.AlternateReverse
})
}.width('100%').margin({ top: 20 })
}
}
```
![en-us_image_0000001212378444](figures/en-us_image_0000001212378444.gif)
![animation](figures/animation.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @ 0ef16b18
......@@ -14,26 +14,26 @@ This component can contain only one child component.
## APIs
**Method 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean})
**API 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean})
**Parameters**
| Name | Type | Mandatory | Description |
| ----------- | ---------- | ------| --------------------------------- |
| type | ButtonType | No | Button type.<br>Default value: **ButtonType.Capsule** |
| stateEffect | boolean | No | Whether to enable the state switchover effect for when the button is touched or clicked. The value **false** indicates that the state switchover effect is disabled.<br>Default value: **true**|
| stateEffect | boolean | No | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**|
**Method 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
**API 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
Creates a button component based on text content. In this case, the component cannot contain child components.
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | ------------- |
| label | [ResourceStr](ts-types.md#resourcestr) | No | Button text. |
| options | Object | No | For details, see **options**.|
| Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | ------------- |
| label | [ResourceStr](ts-types.md#resourcestr) | No | Button text. |
| options | { type?: ButtonType, stateEffect?: boolean } | No | See parameters of API 1.|
## Attributes
......@@ -41,7 +41,7 @@ This component can contain only one child component.
| Name | Type | Description |
| ----------- | ----------- | --------------------------------- |
| type | ButtonType | Button type.<br>Default value: **ButtonType.Capsule** |
| stateEffect | boolean | Whether to enable the state switchover effect. The value **false** indicates that the state switchover effect is disabled.<br>Default value: **true**|
| stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**|
## ButtonType enums
| Name | Description |
......@@ -66,43 +66,42 @@ This component can contain only one child component.
struct ButtonExample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Text('Common button').fontSize(9).fontColor(0xCCCCCC)
Text('Normal button').fontSize(9).fontColor(0xCCCCCC)
Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Button('Ok', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
Button('OK', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() {
// To import an image, you are advised to create a Resource object through $r.
Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 })
LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
}.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90)
Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.5)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4)
.borderRadius(8).backgroundColor(0x317aff).width(90)
}
Text('Capsule button').fontSize(9).fontColor(0xCCCCCC)
Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)
Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)
Button({ type: ButtonType.Capsule, stateEffect: true }) {
Row() {
Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 })
LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
}.alignItems(VerticalAlign.Center).width(90)
}.alignItems(VerticalAlign.Center).width(90).height(40)
}.backgroundColor(0x317aff)
.onClick((event: ClickEvent) => {
AlertDialog.show({ message: 'The login is successful' })
})
Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.5)
Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4)
.backgroundColor(0x317aff).width(90)
}
Text('Circle button').fontSize(9).fontColor(0xCCCCCC)
Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.ic_public_app_filled')).width(20).height(20)
LoadingProgress().width(20).height(20).color(0xFFFFFF)
}.width(55).height(55).backgroundColor(0x317aff)
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
LoadingProgress().width(20).height(20).color(0xFFFFFF)
}.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
}
}.height(400).padding({ left: 35, right: 35, top: 35 })
......@@ -110,4 +109,4 @@ struct ButtonExample {
}
```
![en-us_image_0000001257138341](figures/en-us_image_0000001257138341.gif)
![button](figures/button.gif)
en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 0ef16b18
......@@ -20,8 +20,8 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| arrayValue | Array&lt;string&gt; | Yes| Array of strings to be displayed in the alphabetic index bar.|
| selected | number | Yes | Index of the initially selected item. |
| arrayValue | Array&lt;string&gt; | Yes| Array of strings to be displayed in the alphabetic index bar. The value cannot be null.|
| selected | number | Yes | Index of the initially selected item. If the value exceeds the value range, the default value 0 is used. |
## Attributes
......@@ -29,21 +29,21 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| ----------------------- | --------------- | ----------------------------------------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | Font color. |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the selected text. |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the pop-up text. |
| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected item. |
| popupBackground | [ResourceColor](ts-types.md#resourcecolor) | Background color of the pop-up text. |
| usingPopup | boolean | Whether to use pop-up text. |
| selectedFont | [Font](ts-types.md#font) | Font style of the selected text. |
| popupFont | [Font](ts-types.md#font) | Font style of the pop-up text. |
| font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar. |
| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. |
| color | [ResourceColor](ts-types.md#resourcecolor) | Font color.<br>Default value: **0x99000000** |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the selected text.<br>Default value: **0xFF254FF7** |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the pop-up text.<br>Default value: **0xFF254FF7** |
| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected item.<br>Default value: **0x1F0A59F7** |
| popupBackground | [ResourceColor](ts-types.md#resourcecolor) | Background color of the pop-up text.<br>Default value: **0xFFF1F3F5** |
| usingPopup | boolean | Whether to use pop-up text.<br>Default value: **false** |
| selectedFont | [Font](ts-types.md#font) | Font style of the selected text.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| popupFont | [Font](ts-types.md#font) | Font style of the pop-up text.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. This attribute cannot be set to a percentage.<br>Default value: **24.0** |
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported.<br>Default value: **IndexerAlign.Right**|
| selected | number | Index of the selected item.|
| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.|
| selected | number | Index of the selected item.<br>Default value: **0**|
| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.<br>Default value: **{x:96.0, y:48.0}**|
## IndexerAlign enums
## IndexerAlign
| Name| Description|
| -------- | -------- |
......@@ -56,9 +56,9 @@ Only the following events are supported.
| Name| Description|
| -------- | -------- |
| onSelected(callback: (index: number) =&gt; void)<sup>(deprecated)</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. |
| onSelected(callback: (index: number) =&gt; void)<sup>(deprecated)</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. This API is deprecated since API version 8. You are advised to use **onSelect**. |
| onSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. |
| onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent after an item in the alphabetic indexer bar is selected.<br>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling.|
| onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent after an item in the alphabetic indexer bar is selected.<br>The return value is a string array corresponding to the selected index. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling.|
| onPopupSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. |
......@@ -69,25 +69,97 @@ Only the following events are supported.
@Entry
@Component
struct AlphabetIndexerSample {
private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
private arrayA:string[] = ['Ann']
private arrayB: string[] = ['Ben', 'Bob']
private arrayC: string[] = ['Calvin', 'Cameron', 'Charlie', 'Charlotte']
private arrayL: string[] = ['Daisy', 'Daniel', 'Darla', 'David', 'Derek', 'Dorothy', 'Duke']
private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N',
'O', 'P', 'Q', 'R', 'S', 'T', 'U',
'V', 'W', 'X', 'Y', 'Z']
build() {
Stack({ alignContent: Alignment.Start }) {
Row() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arrayA, (item) => {
ListItem() {
Text(item)
.width('80%')
.height('5%')
.fontSize(30)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
ForEach(this.arrayB, (item) => {
ListItem() {
Text(item)
.width('80%')
.height('5%')
.fontSize(30)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
ForEach(this.arrayC, (item) => {
ListItem() {
Text(item)
.width('80%')
.height('5%')
.fontSize(30)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
ForEach(this.arrayL, (item) => {
ListItem() {
Text(item)
.width('80%')
.height('5%')
.fontSize(30)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}
.width('50%')
.height('100%')
AlphabetIndexer({ arrayValue: this.value, selected: 0 })
.selectedColor(0xffffff) // Font color of the selected text
.popupColor(0xFFFAF0) // Font color of the pop-up text
.selectedBackgroundColor(0xCCCCCC) // Background color of the selected text
.popupBackground(0xD2B48C) // Background color of the pop-up text
.usingPopup(true) // Whether to use pop-up text
.selectedFont({ size: 16, weight: FontWeight.Bolder }) // Font style of the selected text
.popupFont({ size: 30, weight: FontWeight.Bolder }) // Font style of the pop-up text
.itemSize(28) // Size of each item (square)
.alignStyle(IndexerAlign.Left) // Left aligned
.selectedColor(0xFFFFFF) // Font color of the selected text.
.popupColor(0xFFFAF0) // Font color of the pop-up text.
.selectedBackgroundColor(0xCCCCCC) // Background color of the selected item.
.popupBackground(0xD2B48C) // Background color of the pop-up text.
.usingPopup(true) // Whether to use pop-up text.
.selectedFont({size: 16, weight: FontWeight.Bolder}) // Font style of the selected text.
.popupFont({ size: 30, weight: FontWeight.Bolder}) // Font style of the pop-up text.
.itemSize(28) // Size of an item in the alphabetic index bar.
.alignStyle(IndexerAlign.Left) // The pop-up window is displayed on the right of the alphabetic index bar.
.onSelect((index: number) => {
console.info(this.value[index] + 'Selected') // Event indicating that an item is selected
console.info(this.value[index] + ' Selected!')
})
.onRequestPopupData((index: number) => {
if (this.value[index] == 'A') {
return this.arrayA // When index A is selected, the pop-up window displays arrayA corresponding to index A. The same applies when other indexes are selected.
} else if (this.value[index] == 'B') {
return this.arrayB
} else if (this.value[index] == 'C') {
return this.arrayC
} else if (this.value[index] == 'L') {
return this.arrayL
} else {
return [] // When no array is available for the selected index, the pop-up window is empty.
}
})
.margin({ left: 50 })
.onPopupSelect((index: number) => {
console.info('onPopupSelected:' + index)
})
}
.width('100%')
.height('100%')
}
}
}
```
![en-us_image_0000001212378392](figures/en-us_image_0000001212378392.gif)
![alphabet](figures/alphabet.gif)
en/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 0ef16b18
......@@ -7,10 +7,12 @@ You can create explicit animation with your custom settings.
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
| API | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| animateTo(value: [AnimateParam](#animateparam), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
animateTo(value: AnimateParam, event: () => void): void
| Name | Type | Mandatory | Description |
| ---------------- | ------------ | -------------------- | -------------------- |
| value | [AnimateParam](#animateparam)| Yes| Animation settings.|
| event | () => void | Yes| Closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
## AnimateParam
......@@ -25,7 +27,6 @@ You can create explicit animation with your custom settings.
| onFinish | () =&gt; void | Callback invoked when the animation playback is complete.|
## Example
```ts
......@@ -33,26 +34,24 @@ You can create explicit animation with your custom settings.
@Entry
@Component
struct AnimateToExample {
@State widthSize: number = 200
@State widthSize: number = 250
@State heightSize: number = 100
@State rotateAngle: number = 0
private flag: boolean = true
build() {
Column() {
Button('click me')
Button('change width and height')
.width(this.widthSize)
.height(this.heightSize)
.backgroundColor(0x317aff)
.onClick((event: ClickEvent) => {
// Animation configuration for the width and height attributes of the <Button> component
.margin(30)
.onClick(() => {
if (this.flag) {
animateTo({
duration: 1000, // Animation duration
tempo: 0.5, // Playback speed
curve: Curve.EaseInOut, // Animation curve
delay: 200, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal // Animation playback mode
duration: 2000,
curve: Curve.EaseOut,
iterations: 3,
playMode: PlayMode.Normal,
onFinish: () => {
console.info('play end')
}
......@@ -61,25 +60,39 @@ struct AnimateToExample {
this.heightSize = 50
})
} else {
animateTo({}, () => {
this.widthSize = 250
this.heightSize = 100
})
}
this.flag = !this.flag
})
Button('change rotate angle')
.margin(50)
.rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
.onClick(() => {
animateTo({
duration: 200, // Animation duration
curve: Curve.Ease, // Animated curve
delay: 200, // Animation delay
iterations: 1, // Number of playback times
playMode: PlayMode.Normal // Animation playback mode
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times.
playMode: PlayMode.AlternateReverse,
onFinish: () => {
console.info('play end')
}
}, () => {
this.widthSize = 200
this.heightSize = 100
this.rotateAngle = 90
})
}
this.flag = !this.flag
})
}.width('100%').margin({ top: 5 })
}
}
```
![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif)
The figure below shows two buttons in their initial state.
![animation](figures/animation.PNG)
Clicking the first button plays the animation of resizing the button, and clicking the second button plays the animation of rotating the button clockwise by 90 degrees. The figure below shows the two buttons when the animations have finished.
![animation1](figures/animation1.PNG)
en/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 0ef16b18
......@@ -22,12 +22,12 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
**Parameters**
| Name | Type | Mandatory| Description |
| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string \| [Resource](ts-types.md) | No | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: **1.0** \| PlaybackSpeed.Speed_Forward_1_00_X |
| Name | Type | Mandatory | Description |
| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| src | string \| [Resource](ts-types.md) | No | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which indicates that the path is provided by a Data ability. For details about the path, see [Data Ability Development](../../application-models/dataability-overview.md).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: **1.0** \| **PlaybackSpeed.Speed_Forward_1_00_X** |
| previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](ts-types.md) | No | Path of the preview image. |
| controller | [VideoController](#videocontroller) | No | Controller. |
| controller | [VideoController](#videocontroller) | No | Video controller. |
## PlaybackSpeed<sup>8+</sup>
......@@ -44,7 +44,7 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description |
| --------- | ---------------------------------------- | ----------------------------------------------- |
| --------- | ---------------------------------------- | ---------------------------- |
| muted | boolean | Whether to mute the video.<br>Default value: **false** |
| autoPlay | boolean | Whether to enable auto play.<br>Default value: **false** |
| controls | boolean | Whether to display the video playback control bar.<br>Default value: **true**|
......@@ -56,7 +56,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| ---------------------------------------- | ---------------------------------------- |
| onStart(event:() =&gt; void) | Triggered when the video is played. |
| onPause(event:() =&gt; void) | Triggered when the video playback is paused. |
| onFinish(event:() =&gt; void) | Triggered when the video playback is finished. |
......@@ -65,7 +65,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| onSeeking(callback:(event?: { time: number }) =&gt; void) | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| onSeeked(callback:(event?: { time: number }) =&gt; void) | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| onUpdate(callback:(event?: { time: number }) =&gt; void) | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
| onFullscreenChange(callback:(event?: { fullscreen: boolean }) =&gt; void) | Triggered when the playback mode is switched between full-screen mode and non-full-screen mode. The value **true** means that the playback is in full-screen mode, and **false** means that the playback is non-full-screen mode. |
| onFullscreenChange(callback:(event?: { fullscreen: boolean }) =&gt; void) | Triggered when the playback mode is switched between full-screen mode and non-full-screen mode. The value **true** means that the playback is in full-screen mode, and **false** means that the playback is non-full-screen mode.|
## VideoController
......@@ -76,7 +76,7 @@ Defines a **VideoController** object to control one or more videos.
### Objects to Import
```ts
controller: VideoController = new VideoController();
controller: VideoController = new VideoController()
```
......@@ -90,13 +90,13 @@ Starts playback.
pause(): void
Pauses playback.
Pauses playback. The current frame is then displayed, and playback will be resumed from this paused position.
### stop
stop(): void
Stops playback.
Stops playback. The current frame is then displayed, and playback will restart from the very beginning.
### setCurrentTime
......@@ -106,8 +106,8 @@ Sets the video playback position.
**Parameters**
| Name| Type| Mandatory| Description |
| ------ | -------- | ---- | --------------------------- |
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | -------------- |
| value | number | Yes | Video playback position, in seconds.|
### requestFullscreen
......@@ -119,7 +119,7 @@ Requests full-screen mode.
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ------- |
| ----- | ------- | ---- | --------------------- |
| value | boolean | Yes | Whether the playback is in full-screen mode.<br>Default value: **false**|
### exitFullscreen
......@@ -136,9 +136,9 @@ Sets the video playback position with the specified seek mode.
**Parameters**
| Name | Type| Mandatory| Description |
| -------- | -------- | ---- | ------------------ |
| value | number | Yes | Video playback position.|
| Name | Type | Mandatory | Description |
| -------- | -------- | ---- | -------------- |
| value | number | Yes | Video playback position, in seconds.|
| seekMode | SeekMode | Yes | Seek mode. |
## SeekMode<sup>8+</sup>
......@@ -159,77 +159,89 @@ Sets the video playback position with the specified seek mode.
@Entry
@Component
struct VideoCreateComponent {
@State srcs: Resource = $rawfile('video1.mp4');
@State previewUris: Resource = $r('app.media.img');
@State currentProgressRates: number = 1;
@State autoPlays: boolean = false;
@State controlsss: boolean = true;
controller: VideoController = new VideoController();
@State videoSrc: Resource = $rawfile('video1.mp4')
@State previewUri: Resource = $r('app.media.poster1')
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
@State isAutoPlay: boolean = false
@State showControls: boolean = true
controller: VideoController = new VideoController()
build() {
Column() {
Video({
src: this.srcs,
previewUri: this.previewUris,
currentProgressRate: this.currentProgressRates,
src: this.videoSrc,
previewUri: this.previewUri,
currentProgressRate: this.curRate,
controller: this.controller
}).width(700).height(500)
.autoPlay(this.autoPlays)
.controls(this.controlsss)
}).width(800).height(600)
.autoPlay(this.isAutoPlay)
.controls(this.showControls)
.onStart(() => {
console.error('onStart');
console.info('onStart')
})
.onPause(() => {
console.error('onPause');
console.info('onPause')
})
.onFinish(() => {
console.error('onFinish');
console.info('onFinish')
})
.onError(() => {
console.error('onFinish');
console.info('onFinish')
})
.onPrepared((e) => {
console.error('onPrepared is ' + e.duration);
console.info('onPrepared is ' + e.duration)
})
.onSeeking((e) => {
console.error('onSeeking is ' + e.time);
console.info('onSeeking is ' + e.time)
})
.onSeeked((e) => {
console.error('onSeekedis ' + e.time);
console.info('onSeeked is ' + e.time)
})
.onUpdate((e) => {
console.error('onUpdateis ' + e.time);
console.info('onUpdate is ' + e.time)
})
Row() {
Button("src").onClick(() => {
this.srcs = $rawfile('video2.mp4');
});
Button("previewUri").onClick(() => {
this.previewUris = $r('app.media.img1');
});
Button("controlsss").onClick(() => {
this.controlsss = !this.controlsss;
});
Button('src').onClick(() => {
this.videoSrc = $rawfile('video2.mp4') // Switch the video source.
}).margin(5)
Button('previewUri').onClick(() => {
this.previewUri = $r('app.media.poster2') // Switch the preview image.
}).margin(5)
Button('controls').onClick(() => {
this.showControls = !this.showControls // Specify whether to show the control bar.
}).margin(5)
}
Row() {
Button("start").onClick(() => {
this.controller.start();
});
Button("pause").onClick(() => {
this.controller.pause();
});
Button("stop").onClick(() => {
this.controller.stop();
});
Button('start').onClick(() => {
this.controller.start() // Start playback.
}).margin(5)
Button('pause').onClick(() => {
this.controller.pause() // Pause playback.
}).margin(5)
Button('stop').onClick(() => {
this.controller.stop() // Stop playback.
}).margin(5)
Button('setTime').onClick(() => {
this.controller.setCurrentTime(10, SeekMode.Accurate) // Seek to the 10s position of the video.
}).margin(5)
}
Row() {
Button("setCurrentTime").onClick(() => {
this.controller.setCurrentTime(9, SeekMode.Accurate);
});
Button('rate 0.75').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // Play the video at the 0.75x speed.
}).margin(5)
Button('rate 1').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // Play the video at the 1x speed.
}).margin(5)
Button('rate 2').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // Play the video at the 2x speed.
}).margin(5)
}
}
}
}
```
<!--no_check-->
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
浏览文件 @ 0ef16b18
......@@ -12,12 +12,12 @@ Shared element transition can be used for transition between pages, for example,
| Name | Parameters | Description |
| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| sharedTransition | id: string,<br>{<br>duration?: number,<br>curve?: Curve \| string,<br>delay?: number,<br>motionPath?: <br>{<br>path: string,<br>form?: number,<br>to?: number,<br>rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: Animation duration, in ms. The default duration is 1000 ms.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: Delay of animation playback, in ms. By default, the playback is not delayed.<br>- **motionPath**: motion path information.<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
| sharedTransition | id: string,<br>{<br> duration?: number,<br> curve?: Curve \| string,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: animation duration, in ms. The default duration is 1000 ms.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: Delay of animation playback, in ms. By default, the playback is not delayed.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
## Example
The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image.
The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image.
```ts
// xxx.ets
......@@ -27,20 +27,14 @@ struct SharedTransitionExample {
@State active: boolean = false
build() {
List() {
ListItem() {
Row() {
Navigator({ target: 'pages/common/Animation/transAnimation/PageB', type: NavigationType.Push }) {
Column() {
Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
Image($r('app.media.ic_health_heart')).width(50).height(50)
.sharedTransition('sharedImage1', { duration: 800, curve: Curve.Linear, delay: 100 })
}.padding({ left: 10 })
.sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
}.padding({ left: 20, top: 20 })
.onClick(() => {
this.active = true
})
Text('SharedTransition').width(80).height(80).textAlign(TextAlign.Center)
}
}
}
}
}
......@@ -50,14 +44,13 @@ struct SharedTransitionExample {
// PageB.ets
@Entry
@Component
struct BExample {
struct pageBExample {
build() {
Stack() {
Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1')
}.width('100%').height(400)
Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage')
}.width('100%').height('100%')
}
}
```
![en-us_image_0000001211898494](figures/en-us_image_0000001211898494.gif)
![shared](figures/shared.gif)
en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 0ef16b18
......@@ -10,10 +10,10 @@
| Name | Type | Description |
| ---------- | ---------------------------------------- | ---------------------------------------- |
| flexBasis | number \| string | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
| flexBasis | number \| string | Base size of the component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)<br>This attribute cannot be set in percentage.|
| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0** |
| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**. |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis, which overwrites the default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto**|
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container.<br>Default value: **ItemAlign.Auto**|
## Example
......@@ -30,82 +30,79 @@ struct FlexExample {
// The value of flexBasis() can be 'auto' or a number, which is equivalent to .width()/.height().
Flex() {
Text('flexBasis(100)')
.flexBasis('100')
.flexBasis(100) // The width is 100 vp.
.height(100)
.lineHeight(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('flexBasis("auto")')
.flexBasis('auto')
Text(`flexBasis('auto')`)
.flexBasis('auto') // The width is 60% of the original width.
.width('60%')
.height(100)
.lineHeight(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
// Percentage of the remaining space
// flexGrow() specifies the percentage of the remaining space allocated to the component.
// flexGrow() indicates the percentage of the remaining space allocated to the component.
Flex() {
Text('flexGrow(2)')
.flexGrow(2)
.flexGrow(2) // The width allocated to the <Text> component is 2/3 of the remaining width of the parent container.
.height(100)
.lineHeight(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('flexGrow(1)')
.flexGrow(1)
.flexGrow(1) // The width allocated to the <Text> component is 1/3 of the remaining width of the parent container.
.height(100)
.lineHeight(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
// flexShrink() specifies the percentage of the shrink size allocated to the component.
// The ratio of text1 is 0, and the default values of other parameters are 1. If the components cannot be completely displayed, the last two components are shrunk proportionally. The first component is not shrunk.
// flexShrink() indicates the percentage of the shrink size allocated to the component.
// The value is 0 for the first <Text> component and 1 for the other two <Text> components. This means that, if the components cannot be completely displayed in the parent container, the latter two are shrunk proportionally, while the former is not shrunk.
Flex({ direction: FlexDirection.Row }) {
Text('flexShrink(0)')
.flexShrink(0)
.width('50%')
.height(100)
.lineHeight(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('no flexShrink')
Text('default flexShrink') // The default value is 1.
.width('40%')
.height(100)
.lineHeight(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
Text('flexShrink(2)')
.flexShrink(2)
Text('flexShrink(1)')
.flexShrink(1)
.width('40%')
.height(100)
.lineHeight(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
// alignSelf() overwrites the default alignItems configuration in the flex layout.
// The alignSelf setting overrides the alignItems setting of the parent container.
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Text('no alignSelf,height:80').width('33%').height(80)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('alignSelf stretch')
.alignSelf(ItemAlign.Stretch)
Text('no alignSelf,height:70')
.width('33%')
.height(80)
.lineHeight(70)
.height(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('alignSelf End')
.alignSelf(ItemAlign.End)
.width('33%')
.height(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
Text('no alignSelf,height:100').width('34%').height(100)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('no alignSelf,height:100%')
.width('34%')
.height('100%')
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}
}
```
![en-us_image_0000001212378394](figures/en-us_image_0000001212378394.png)
![flex](figures/flex.PNG)
en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
浏览文件 @ 0ef16b18
......@@ -46,7 +46,7 @@ struct PositionExample1 {
.fontSize(16)
.backgroundColor(0xFFE4C4)
// To arrange the child components from left to right, set direction of the parent container to Direction.Auto or Direction.Ltr, or leave it to the default value.
// To arrange the child components from left to right, set direction of the parent container to Direction.Ltr.
Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
......@@ -55,19 +55,19 @@ struct PositionExample1 {
Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
}
.width('90%')
.direction(Direction.Auto)
.direction(Direction.Ltr)
// To arrange the child components from right to left, set direction of the parent container to Direction.Rtl.
Row() {
Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End)
Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End)
Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End)
Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End)
}
.width('90%')
.direction(Direction.Rtl)
}
}
.width('100%').margin({ top: 5 }).direction(Direction.Rtl)
.width('100%').margin({ top: 5 })
}
}
```
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-restoreId.md
浏览文件 @ 0ef16b18
......@@ -10,14 +10,14 @@ The **restoreId** attribute identifies a component in distributed migration scen
| Name| Type| Description|
| -------- | -------- | -------- |
| restoreId | number | ID of the component used for matching during distributed migration. This ID must be unique within an application.|
| restoreId | number | ID of the component used for device matching during distributed migration. This ID must be unique within an application.|
## Components with Distributed Migration Support
| Name| Initial Version| Migration Status|
| Name| Initial API Version| Migration Status|
| -------- | -------- | -------- |
| List | 8 | The sequence number of the item displayed on the top of the current device will be migrated to the remote device. After the migration, the item is completely displayed on the top of the remote device.|
| Grid | 9 | The sequence number of the item displayed on the top of the current device will be migrated to the remote device. After the migration, the item is completely displayed on the top of the remote device. The position of the scrollbar cannot be migrated.|
| List | 8 | The index of the list item displayed at the top of the list on the current device will be migrated to the remote device. After the migration, the list item that matches the index is displayed at the top of the list on the remote device.|
| Grid | 9 | The index of the grid item displayed at the top of the grid on the current device will be migrated to the remote device. After the migration, the grid item that matches the index is displayed at the top of the grid on the remote device. The position of the scrollbar cannot be migrated.|
| Scroll | 9 | The absolute distance with the top edge for scrolling will be migrated. Due to layout inconsistency resulting from differences in the display specifications between devices, the migration effect may be affected.|
| TextArea | 9 | The text content and the position of the caret will be migrated.|
| TextInput | 9 | The text content and the position of the caret will be migrated.|
......@@ -39,7 +39,6 @@ struct RestoreIdExample {
.width('100%')
.height(100)
.fontSize(16)
.fontColor(0xFFFFFF)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.Pink)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
浏览文件 @ 0ef16b18
......@@ -12,8 +12,8 @@ Shape clipping changes the visible portion of a component through clipping or ma
| Name | Type | Description |
| -----| ------------------------------------------ | ------------------------------------ |
| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Specifies a clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline.<br>Default value: **false**|
| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Adds a mask of the specified shape to the current component.|
| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Clip mode. If the value is a shape, the component is clipped based on the specified shape. If the value is of the Boolean type, it specifies whether to clip the component based on the edge outline of the parent container.<br>Default value: **false**|
| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Mask of the specified shape to add to the component.|
## Example
......@@ -24,34 +24,33 @@ Shape clipping changes the visible portion of a component through clipping or ma
@Component
struct ClipAndMaskExample {
build() {
Column({ space: 5 }) {
Text('clip').fontSize(9).width('90%').fontColor(0xCCCCCC)
// Clip the image by using a circle with a diameter of 280px.
Image($r('app.media.example'))
.clip(new Circle({ width: 80, height: 80 }))
.width('500px').height('280px')
Column({ space: 15 }) {
Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC')
Row() {
Image($r('app.media.example')).width('500px').height('280px')
Image($r('app.media.testImg')).width('500px').height('280px')
}
.clip(true)
.clip(true) // If clip is not set to true, the image is not confined by the rounded corners of the <Row> component and may extend beyond the <Row> component.
.borderRadius(20)
// Clip the image based on a circle with a diameter of 280 px.
Image($r('app.media.testImg'))
.clip(new Circle({ width: '280px', height: '280px' }))
.width('500px').height('280px')
Text('mask').fontSize(9).width('90%').fontColor(0xCCCCCC)
// Add a 500 px x 280 px mask to the image.
Image($r('app.media.example'))
Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC')
// Add a 500 px x 280 px square mask to the image.
Image($r('app.media.testImg'))
.mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
.width('500px').height('280px')
// Add a 280 px x 280 px circle mask to the image.
Image($r('app.media.example'))
// Add a 280 px x 280 px circular mask to the image.
Image($r('app.media.testImg'))
.mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray))
.width('500px').height('281px')
.width('500px').height('280px')
}
.width('100%')
.margin({ top: 5 })
.margin({ top: 15 })
}
}
```
![en-us_image_0000001212218452](figures/en-us_image_0000001212218452.png)
![clipAndMask](figures/clipAndMask.PNG)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或