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

!6672 翻译完成 6498:ts-universal-attributes-layout-constraints.md.

Merge pull request !6672 from ester.zhou/TR-6498
# Layout Constraints # Layout Constraints
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
>
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -13,16 +14,17 @@ None ...@@ -13,16 +14,17 @@ None
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| aspectRatio | number | - | Specifies an aspect ratio for the current component. | | aspectRatio | number | - | Aspect ratio of the current component. |
| displayPriority | number | - | Sets a display priority for the current component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> This parameter is valid only for the Row/Column/Flex (single-row) container component. | | displayPriority | number | - | Display priority of the current component in the container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br/>**NOTE**<br/>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components. |
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AspectRatioExample { struct AspectRatioExample {
...@@ -76,8 +78,7 @@ struct AspectRatioExample { ...@@ -76,8 +78,7 @@ struct AspectRatioExample {
**Figure2** Landscape display **Figure2** Landscape display
![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif) ![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif)
```ts
```
class ContainerInfo { class ContainerInfo {
label : string = '' label : string = ''
size : string = '' size : string = ''
...@@ -94,13 +95,15 @@ struct DisplayPriorityExample { ...@@ -94,13 +95,15 @@ struct DisplayPriorityExample {
private container : ContainerInfo[] = [ private container : ContainerInfo[] = [
{label: 'Big container', size: '90%'}, {label: 'Big container', size: '90%'},
{label: 'Middle container', size: '50%'}, {label: 'Middle container', size: '50%'},
{label: 'Small container', size: '30%'}] {label: 'Small container', size: '30%'}
]
private children : ChildInfo[] = [ private children : ChildInfo[] = [
{text: '1\n(priority:2)', priority: 2}, {text: '1\n(priority:2)', priority: 2},
{text: '2\n(priority:1)', priority: 1}, {text: '2\n(priority:1)', priority: 1},
{text: '3\n(priority:3)', priority: 3}, {text: '3\n(priority:3)', priority: 3},
{text: '4\n(priority:1)', priority: 1}, {text: '4\n(priority:1)', priority: 1},
{text: '5\n(priority:2)', priority: 2}] {text: '5\n(priority:2)', priority: 2}
]
@State currentIndex : number = 0 @State currentIndex : number = 0
build() { build() {
...@@ -128,4 +131,4 @@ struct DisplayPriorityExample { ...@@ -128,4 +131,4 @@ struct DisplayPriorityExample {
``` ```
![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif) ![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册