Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
You need to sign in or sign up before continuing.
未验证 提交 89f4a66f 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!3799 3243 处理完成：VOD+格式修改 

Merge pull request !3799 from ester.zhou/TR-3243-01
上级 8f0e8abf 8a8a270c
隐藏空白更改
内联 并排
Showing with 1554 addition and 2854 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 89f4a66f
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -90,7 +91,7 @@ Sets the position of the caret. ...@@ -90,7 +91,7 @@ Sets the position of the caret.
``` ```
@Entry @Entry
@Component @Component
struct TextAreaExample2 { struct TextAreaExample1 {
@State text: string = '' @State text: string = ''
build() { build() {
Column() { Column() {
...@@ -126,7 +127,7 @@ struct TextAreaExample2 { ...@@ -126,7 +127,7 @@ struct TextAreaExample2 {
``` ```
@Entry @Entry
@Component @Component
struct TextAreaTest { struct TextAreaExample2 {
controller: TextAreaController = new TextAreaController() controller: TextAreaController = new TextAreaController()
build() { build() {
Column() { Column() {
......
en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 89f4a66f
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -23,50 +24,50 @@ None ...@@ -23,50 +24,50 @@ None
TextInput(value?:{placeholder?: string controller?: TextInputController}) TextInput(value?:{placeholder?: string controller?: TextInputController})
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ----------------------- | ---------------------------------------- | --------- | ------------- | -------------------------------------- | | -------- | -------- | -------- | -------- | -------- |
| placeholder | string | No | - | Text displayed when there is no input. | | placeholder | string | No | - | Text displayed when there is no input. |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text input controller. | | controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text input controller. |
## Attributes ## Attributes
In addition to universal attributes, the following attributes are supported. In addition to universal attributes, the following attributes are supported.
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ------------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | | -------- | -------- | -------- | -------- |
| type | InputType | InputType.Normal | Input box type. | | type | InputType | InputType.Normal | Input box type. |
| placeholderColor | Color | - | Placeholder color. | | placeholderColor | Color | - | Placeholder color. |
| placeholderFont | {<br/>size?: Length,<br/>weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. | | placeholderFont | {<br/>size?: Length,<br/>weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. |
| enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. | | enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
| caretColor | Color | - | Color of the caret (also known as the text insertion cursor). | | caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
| maxLength<sup>8+</sup> | number | - | Maximum number of characters in the text input. | | maxLength<sup>8+</sup> | number | - | Maximum number of characters in the text input. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. | | inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. |
- EnterKeyType enums - EnterKeyType enums
| Name | Description | | Name | Description |
| ------------------- | ---------------------------------- | | -------- | -------- |
| EnterKeyType.Go | The Enter key is labeled "Go." | | EnterKeyType.Go | The Enter key is labeled "Go." |
| EnterKeyType.Search | The Enter key is labeled "Search." | | EnterKeyType.Search | The Enter key is labeled "Search." |
| EnterKeyType.Send | The Enter key is labeled "Send." | | EnterKeyType.Send | The Enter key is labeled "Send." |
| EnterKeyType.Next | The Enter key is labeled "Next." | | EnterKeyType.Next | The Enter key is labeled "Next." |
| EnterKeyType.Done | The Enter key is labeled "Done." | | EnterKeyType.Done | The Enter key is labeled "Done." |
- InputType enums - InputType enums
| Name | Description | | Name | Description |
| ------------------ | ------------------------- | | -------- | -------- |
| InputType.Normal | Normal input mode. | | InputType.Normal | Normal input mode. |
| InputType.Password | Password input mode. | | InputType.Password | Password input mode. |
| InputType.Email | Email address input mode. | | InputType.Email | Email address input mode. |
| InputType.Number | Digit input mode. | | InputType.Number | Digit input mode. |
### TextInputController<sup>8+</sup> ### TextInputController<sup>8+</sup>
Implements the controller of the **&lt;TextInput&gt;** component. Implements the controller of the **&lt;TextInput&gt;** component.
| Name | Description | | Name | Description |
| --------------------------------- | ---------------------------------------- | | -------- | -------- |
| caretPosition(value: number):void | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. | | caretPosition(value: number):void | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
...@@ -85,16 +86,16 @@ caretPosition(value: number): void ...@@ -85,16 +86,16 @@ caretPosition(value: number): void
Sets the cursor in a specified position. Sets the cursor in a specified position.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | --------- | ------------- | ---------------------------------------- | | -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. | | value | number | Yes | - | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
## Events ## Events
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | -------- | -------- |
| onChange(value: string) =&gt; void | Triggered when the input changes. | | onChange(value: string) =&gt; void | Triggered when the input changes. |
| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the physical or soft keyboard is pressed. | | onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | Triggered when the input status changes. | | onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | Triggered when the input status changes. | | onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | Triggered when the input status changes. |
...@@ -112,7 +113,7 @@ Sets the cursor in a specified position. ...@@ -112,7 +113,7 @@ Sets the cursor in a specified position.
``` ```
@Entry @Entry
@Component @Component
struct TextAreaExample2 { struct TextInputExample1 {
@State text: string = '' @State text: string = ''
build() { build() {
...@@ -147,7 +148,7 @@ struct TextAreaExample2 { ...@@ -147,7 +148,7 @@ struct TextAreaExample2 {
``` ```
@Entry @Entry
@Component @Component
struct TextInputTest { struct TextInputExample2 {
@State text: string = '' @State text: string = ''
controller: TextInputController = new TextInputController() controller: TextInputController = new TextInputController()
build() { build() {
......
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 89f4a66f
# OffscreenCanvasRenderingConxt2D # OffscreenCanvasRenderingContext2D
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......
en/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @ 89f4a66f
# Creating a Simple Page # Creating a Simple Page
In this section, we will develop an infographic food details page, by building custom components through the container components &lt;Stack&gt; and &lt;Flex&gt; as well as basic components &lt;Image&gt; and &lt;Text&gt;. In this section, we will develop an infographic food details page, by building custom components through the container components **\<Stack>** and **\<Flex>** as well as basic components **\<Image>** and **\<Text>**.
## Building the Stack Layout ## Building the Stack Layout
1. Create a food name. 1. Create a food name.
Delete the code of the build method in the project template, create a &lt;Stack&gt; component, and place the &lt;Text&gt; component in the braces of the &lt;Stack&gt; component so that the &lt;Text&gt; component becomes a child component of the &lt;Stack&gt; component. A &lt;Stack&gt; component consists of one or more child components. The latter child component overwrites the former one. Delete the code of the build method in the project template, create a &lt;Stack&gt; component, and place the **\<Text>** component in the braces of the **\<Stack>** component so that the &lt;Text&gt; component becomes a child component of the &lt;Stack&gt; component. A **\<Stack>** component consists of one or more child components. The latter child component overwrites the former one.
``` ```
@Entry @Entry
...@@ -26,7 +26,7 @@ In this section, we will develop an infographic food details page, by building c ...@@ -26,7 +26,7 @@ In this section, we will develop an infographic food details page, by building c
![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png) ![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png)
2. Display food pictures. 2. Display food pictures.
Create an &lt;Image&gt; component and specify a URL for it. The &lt;Image&gt; and &lt;Text&gt; components are mandatory. To display the &lt;Text&gt; component above the &lt;Image&gt; component, you need to declare the &lt;Image&gt; component first. Image resources are stored in the rawfile folder in resources. When referencing the resources in the rawfile folder, use the `"$rawfile('filename')"` format, where filename indicates the relative path of the file in the rawfile folder. Currently, `$rawfile` only allows the &lt;Image&gt; component to reference image resources. Create an **\<Image>** component and specify a URL for it. The **\<Image>** and **\<Text>** components are mandatory. To display the **\<Text>** component above the **\<Image>** component, you need to declare the **\<Image>** component first. Image resources are stored in the **rawfile** folder in **resources**. When referencing the resources in the **rawfile** folder, use the `"$rawfile('filename')"` format, where filename indicates the relative path of the file in the **rawfile** folder. Currently, `$rawfile` only allows the **\<Image>** component to reference image resources.
``` ```
@Entry @Entry
...@@ -137,9 +137,9 @@ In this section, we will develop an infographic food details page, by building c ...@@ -137,9 +137,9 @@ In this section, we will develop an infographic food details page, by building c
![en-us_image_0000001222967772](figures/en-us_image_0000001222967772.png) ![en-us_image_0000001222967772](figures/en-us_image_0000001222967772.png)
7. Adjust the left and bottom margin of the &lt;Text&gt; component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows: 7. Adjust the left and bottom margin of the **\<Text>** component. **Margin** is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows:
1. When the parameter is set to Length, the outer margins of the four edges are specified. For example, **margin(20)** indicates that the outer margins of the top, right, bottom, and left edges are all 20. 1. To set the margins of the four edges in a unified manner, use the **Margin(Length)** format. For example, **margin(20)** indicates that the outer margins of the top, right, bottom, and left edges are all 20.
2. **{top?: Length, right?: Length, bottom?: Length, left?:Length}** specifies the margins of the four edges. For example, **margin({ left: 26, bottom: 17.4 })** indicates that the left margin is 26 and the bottom margin is 17.4. 2. To set the margins of the four edges separately, use the **{top?: Length, right?: Length, bottom?: Length, left?:Length}** format. For example, **margin({ left: 26, bottom: 17.4 })** indicates that the left margin is 26 and the bottom margin is 17.4.
``` ```
...@@ -163,7 +163,8 @@ In this section, we will develop an infographic food details page, by building c ...@@ -163,7 +163,8 @@ In this section, we will develop an infographic food details page, by building c
![en-us_image_0000001222967776](figures/en-us_image_0000001222967776.png) ![en-us_image_0000001222967776](figures/en-us_image_0000001222967776.png)
8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in **FoodDetail**, and set the alignment to **alignItems(HorizontalAlign.Center)**. Change the name of the MyComponent component to FoodImageDisplay, which is a child component of the FoodDetail component. 8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in **FoodDetail**, and set the alignment to **alignItems(HorizontalAlign.Center)**. Change the name of the **MyComponent** component to **FoodImageDisplay**, which is a child component of the **FoodDetail** component.
A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set. A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set.
...@@ -239,10 +240,11 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -239,10 +240,11 @@ You can use the Flex layout to build a food composition table. In this way you d
``` ```
2. Create a Flex component to display two food composition categories in the tomato: Calories and Nutrition. 2. Create a Flex component to display two food composition categories in the tomato: Calories and Nutrition.
Calories contains information about calories. Nutrition contains information about protein, fat, carbohydrates, and vitamin C.
Calories contains information about calories. Nutrition contains information about protein, fat, carbohydrates, and vitamin C.
Create the Calories class. Create a Flex component and set its height to 280, and the top, right, and left margins to 30. The Flex component contains three Text child components, which represent the category name (Calories), content name (Calories), and contain value (17 kcal), respectively. By default, child components in the Flex component are arranged horizontally.
Create the Calories class. Create a Flex component and set its height to 280, and the top, right, and left margins to 30. The Flex component contains three Text child components, which represent the category name (Calories), content name (Calories), and contain value (17 kcal), respectively. By default, child components in the Flex component are arranged horizontally.
In the following example, code of FoodImageDisplay is omitted, and only code of ContentTable is provided. In the following example, code of FoodImageDisplay is omitted, and only code of ContentTable is provided.
...@@ -279,7 +281,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -279,7 +281,7 @@ You can use the Flex layout to build a food composition table. In this way you d
![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png) ![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png)
3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to **2**. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1). 3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to **1**, and the total proportion of content name and content value to **2**. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1).
``` ```
@Component @Component
...@@ -336,6 +338,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -336,6 +338,7 @@ You can use the Flex layout to build a food composition table. In this way you d
![en-us_image_0000001267607901](figures/en-us_image_0000001267607901.png) ![en-us_image_0000001267607901](figures/en-us_image_0000001267607901.png)
4. Create the **Nutrient** class in a similar process. Nutrition consists of four parts: Protein, Fat, Carbohydrates, and VitaminC. The names of the last three parts are omitted in the table and represented by spaces. 4. Create the **Nutrient** class in a similar process. Nutrition consists of four parts: Protein, Fat, Carbohydrates, and VitaminC. The names of the last three parts are omitted in the table and represented by spaces.
Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**. Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**.
...@@ -467,7 +470,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -467,7 +470,7 @@ You can use the Flex layout to build a food composition table. In this way you d
} }
``` ```
When the IngredientItem API is called in the build method of ContentTable, this needs to be used to invoke the method in the scope of the component to distinguish the global method call. When the ` IngredientItem` API is called in the build method of ContentTable, ` this ` needs to be used to invoke the method in the scope of the component to distinguish the global method call.
``` ```
...@@ -488,7 +491,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -488,7 +491,7 @@ You can use the Flex layout to build a food composition table. In this way you d
} }
``` ```
The overall code of the ContentTable component is as follows: The overall code of the ContentTable component is as follows:
``` ```
...@@ -537,6 +540,6 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -537,6 +540,6 @@ You can use the Flex layout to build a food composition table. In this way you d
} }
``` ```
![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png) ![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png)
You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection. You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection.
en/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 89f4a66f
...@@ -8,7 +8,7 @@ The **\<Flex>** component is used to create a flex layout. In a flex container c ...@@ -8,7 +8,7 @@ The **\<Flex>** component is used to create a flex layout. In a flex container c
The available API is as follows: The available API is as follows:
Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign }) `Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
The **direction** parameter defines the flex layout direction. The **justifyContent** parameter defines the alignment mode of child components in the flex layout direction. The **alignContent** parameter defines the alignment mode of child components in the vertical direction. The **wrap** parameter defines whether the content can wrap onto multiple lines. The **direction** parameter defines the flex layout direction. The **justifyContent** parameter defines the alignment mode of child components in the flex layout direction. The **alignContent** parameter defines the alignment mode of child components in the vertical direction. The **wrap** parameter defines whether the content can wrap onto multiple lines.
## Flex Layout Direction ## Flex Layout Direction
...@@ -16,7 +16,7 @@ The **direction** parameter defines the flex layout direction. The **justifyCont ...@@ -16,7 +16,7 @@ The **direction** parameter defines the flex layout direction. The **justifyCont
The flex layout has two directions, following two axes. The main axis is the axis along which the child components follow each other. The cross axis is the axis perpendicular to the main axis. The **direction** parameter establishes the main axis. The available options are as follows: The flex layout has two directions, following two axes. The main axis is the axis along which the child components follow each other. The cross axis is the axis perpendicular to the main axis. The **direction** parameter establishes the main axis. The available options are as follows:
- **FlexDirection.Row** (default value): The main axis runs along the row horizontally, and the child components start from the start edge of the main axis. - **FlexDirection.Row** (default value): The main axis runs along the row horizontally, and the child components start from the start edge of the main axis.
``` ```
Flex({ direction: FlexDirection.Row }) { Flex({ direction: FlexDirection.Row }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
...@@ -32,7 +32,7 @@ The flex layout has two directions, following two axes. The main axis is the axi ...@@ -32,7 +32,7 @@ The flex layout has two directions, following two axes. The main axis is the axi
![en-us_image_0000001218579606](figures/en-us_image_0000001218579606.png) ![en-us_image_0000001218579606](figures/en-us_image_0000001218579606.png)
- **FlexDirection.RowReverse**: The main axis runs along the row horizontally, and the child components start from the end edge of the main axis, in a direction opposite to **FlexDirection.Row**. - **FlexDirection.RowReverse**: The main axis runs along the row horizontally, and the child components start from the end edge of the main axis, in a direction opposite to **FlexDirection.Row**.
``` ```
Flex({ direction: FlexDirection.RowReverse }) { Flex({ direction: FlexDirection.RowReverse }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
...@@ -48,7 +48,7 @@ The flex layout has two directions, following two axes. The main axis is the axi ...@@ -48,7 +48,7 @@ The flex layout has two directions, following two axes. The main axis is the axi
![en-us_image_0000001218739566](figures/en-us_image_0000001218739566.png) ![en-us_image_0000001218739566](figures/en-us_image_0000001218739566.png)
- **FlexDirection.Column**: The main axis runs along the column vertically, and the child components start from the start edge of the main axis. - **FlexDirection.Column**: The main axis runs along the column vertically, and the child components start from the start edge of the main axis.
``` ```
Flex({ direction: FlexDirection.Column }) { Flex({ direction: FlexDirection.Column }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
...@@ -64,7 +64,7 @@ The flex layout has two directions, following two axes. The main axis is the axi ...@@ -64,7 +64,7 @@ The flex layout has two directions, following two axes. The main axis is the axi
![en-us_image_0000001263019457](figures/en-us_image_0000001263019457.png) ![en-us_image_0000001263019457](figures/en-us_image_0000001263019457.png)
- **FlexDirection.ColumnReverse**: The main axis runs along the column vertically, and the child components start from the end edge of the main axis, in a direction opposite to **FlexDirection.Column**. - **FlexDirection.ColumnReverse**: The main axis runs along the column vertically, and the child components start from the end edge of the main axis, in a direction opposite to **FlexDirection.Column**.
``` ```
Flex({ direction: FlexDirection.ColumnReverse }) { Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
...@@ -85,7 +85,7 @@ The flex layout has two directions, following two axes. The main axis is the axi ...@@ -85,7 +85,7 @@ The flex layout has two directions, following two axes. The main axis is the axi
By default, child components are laid out on a single line (also called an axis) in the flex container. Use the **wrap** parameter to set whether child components can wrap onto multiple lines. The available options are as follows: By default, child components are laid out on a single line (also called an axis) in the flex container. Use the **wrap** parameter to set whether child components can wrap onto multiple lines. The available options are as follows:
- **FlexWrap.NoWrap**: Child components are laid out on a single line. This may cause the child components to shrink to fit the container when the total width of the child components is greater than the width of the container. - **FlexWrap.NoWrap**: Child components are laid out on a single line. This may cause the child components to shrink to fit the container when the total width of the child components is greater than the width of the container.
``` ```
Flex({ wrap: FlexWrap.NoWrap }) { Flex({ wrap: FlexWrap.NoWrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
...@@ -100,7 +100,7 @@ By default, child components are laid out on a single line (also called an axis) ...@@ -100,7 +100,7 @@ By default, child components are laid out on a single line (also called an axis)
![en-us_image_0000001263139409](figures/en-us_image_0000001263139409.png) ![en-us_image_0000001263139409](figures/en-us_image_0000001263139409.png)
- **FlexWrap.Wrap**: Child components can break into multiple lines. - **FlexWrap.Wrap**: Child components can break into multiple lines.
``` ```
Flex({ wrap: FlexWrap.Wrap }) { Flex({ wrap: FlexWrap.Wrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
...@@ -115,7 +115,7 @@ By default, child components are laid out on a single line (also called an axis) ...@@ -115,7 +115,7 @@ By default, child components are laid out on a single line (also called an axis)
![en-us_image_0000001218419614](figures/en-us_image_0000001218419614.png) ![en-us_image_0000001218419614](figures/en-us_image_0000001218419614.png)
- **FlexWrap.WrapReverse**: Child components can break into multiple lines in the reverse order to the row. - **FlexWrap.WrapReverse**: Child components can break into multiple lines in the reverse order to the row.
``` ```
Flex({ wrap: FlexWrap.WrapReverse}) { Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
...@@ -138,7 +138,7 @@ By default, child components are laid out on a single line (also called an axis) ...@@ -138,7 +138,7 @@ By default, child components are laid out on a single line (also called an axis)
Use the **justifyContent** parameter to set alignment of items on the main axis. The available options are as follows: Use the **justifyContent** parameter to set alignment of items on the main axis. The available options are as follows:
- **FlexAlign.Start**: The items are aligned with each other toward the start edge of the container along the main axis. - **FlexAlign.Start**: The items are aligned with each other toward the start edge of the container along the main axis.
``` ```
Flex({ justifyContent: FlexAlign.Start }) { Flex({ justifyContent: FlexAlign.Start }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -153,7 +153,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -153,7 +153,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
![en-us_image_0000001218259634](figures/en-us_image_0000001218259634.png) ![en-us_image_0000001218259634](figures/en-us_image_0000001218259634.png)
- **FlexAlign.Center**: The items are aligned with each other toward the center of the container along the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. - **FlexAlign.Center**: The items are aligned with each other toward the center of the container along the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.
``` ```
Flex({ justifyContent: FlexAlign.Center }) { Flex({ justifyContent: FlexAlign.Center }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -168,7 +168,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -168,7 +168,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
![en-us_image_0000001218579608](figures/en-us_image_0000001218579608.png) ![en-us_image_0000001218579608](figures/en-us_image_0000001218579608.png)
- **FlexAlign.End**: The items are aligned with each other toward the end edge of the container along the main axis. - **FlexAlign.End**: The items are aligned with each other toward the end edge of the container along the main axis.
``` ```
Flex({ justifyContent: FlexAlign.End }) { Flex({ justifyContent: FlexAlign.End }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -183,7 +183,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -183,7 +183,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
![en-us_image_0000001218739568](figures/en-us_image_0000001218739568.png) ![en-us_image_0000001218739568](figures/en-us_image_0000001218739568.png)
- **FlexAlign.SpaceBetween**: The items are evenly distributed within the container along the main axis. The first item is aligned with the main-start, the last item is aligned with the main-end, and the remaining items are distributed so that the space between any two adjacent items is the same. - **FlexAlign.SpaceBetween**: The items are evenly distributed within the container along the main axis. The first item is aligned with the main-start, the last item is aligned with the main-end, and the remaining items are distributed so that the space between any two adjacent items is the same.
``` ```
Flex({ justifyContent: FlexAlign.SpaceBetween }) { Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -198,7 +198,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -198,7 +198,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
![en-us_image_0000001263019461](figures/en-us_image_0000001263019461.png) ![en-us_image_0000001263019461](figures/en-us_image_0000001263019461.png)
- **FlexAlign.SpaceAround**: The items are evenly distributed within the container along the main axis. The space between the first item and main-start, and that between the last item and cross-main are both half the size of the space between two adjacent items. - **FlexAlign.SpaceAround**: The items are evenly distributed within the container along the main axis. The space between the first item and main-start, and that between the last item and cross-main are both half the size of the space between two adjacent items.
``` ```
Flex({ justifyContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceAround }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -213,7 +213,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -213,7 +213,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
![en-us_image_0000001263339461](figures/en-us_image_0000001263339461.png) ![en-us_image_0000001263339461](figures/en-us_image_0000001263339461.png)
- **FlexAlign.SpaceEvenly**: The items are equally distributed along the main axis. The space between the first item and main-start, the space between the last item and main-end, and the space between two adjacent items are the same. - **FlexAlign.SpaceEvenly**: The items are equally distributed along the main axis. The space between the first item and main-start, the space between the last item and main-end, and the space between two adjacent items are the same.
``` ```
Flex({ justifyContent: FlexAlign.SpaceEvenly }) { Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
...@@ -233,7 +233,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -233,7 +233,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
Use the **alignItems** parameter to set alignment of items on the cross axis. The available options are as follows: Use the **alignItems** parameter to set alignment of items on the cross axis. The available options are as follows:
- **ItemAlign.Auto**: The items are automatically aligned in the flex container. - **ItemAlign.Auto**: The items are automatically aligned in the flex container.
``` ```
Flex({ alignItems: ItemAlign.Auto }) { Flex({ alignItems: ItemAlign.Auto }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -248,7 +248,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -248,7 +248,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
![en-us_image_0000001218419616](figures/en-us_image_0000001218419616.png) ![en-us_image_0000001218419616](figures/en-us_image_0000001218419616.png)
- **ItemAlign.Start**: The items are aligned with the start edge of the container along the cross axis. - **ItemAlign.Start**: The items are aligned with the start edge of the container along the cross axis.
``` ```
Flex({ alignItems: ItemAlign.Start }) { Flex({ alignItems: ItemAlign.Start }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -263,7 +263,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -263,7 +263,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
![en-us_image_0000001263259401](figures/en-us_image_0000001263259401.png) ![en-us_image_0000001263259401](figures/en-us_image_0000001263259401.png)
- **ItemAlign.Start**: The items are aligned with the center of the container along the cross axis. - **ItemAlign.Start**: The items are aligned with the center of the container along the cross axis.
``` ```
Flex({ alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -278,7 +278,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -278,7 +278,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
![en-us_image_0000001218259636](figures/en-us_image_0000001218259636.png) ![en-us_image_0000001218259636](figures/en-us_image_0000001218259636.png)
- **ItemAlign.End**: The items are aligned with the end edge of the container along the cross axis. - **ItemAlign.End**: The items are aligned with the end edge of the container along the cross axis.
``` ```
Flex({ alignItems: ItemAlign.End }) { Flex({ alignItems: ItemAlign.End }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -293,7 +293,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -293,7 +293,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
![en-us_image_0000001218579610](figures/en-us_image_0000001218579610.png) ![en-us_image_0000001218579610](figures/en-us_image_0000001218579610.png)
- **ItemAlign.Stretch**: The items are stretched along the cross axis. If no constraints are set, the items are stretched to fill the size of the container on the cross axis. - **ItemAlign.Stretch**: The items are stretched along the cross axis. If no constraints are set, the items are stretched to fill the size of the container on the cross axis.
``` ```
Flex({ alignItems: ItemAlign.Stretch }) { Flex({ alignItems: ItemAlign.Stretch }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
...@@ -308,7 +308,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -308,7 +308,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
![en-us_image_0000001218739570](figures/en-us_image_0000001218739570.png) ![en-us_image_0000001218739570](figures/en-us_image_0000001218739570.png)
- **ItemAlign.Baseline**: The items are aligned at the baseline of the cross axis. - **ItemAlign.Baseline**: The items are aligned at the baseline of the cross axis.
``` ```
Flex({ alignItems: ItemAlign.Baseline }) { Flex({ alignItems: ItemAlign.Baseline }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
......
en/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @ 89f4a66f
...@@ -8,22 +8,22 @@ As a tool to provide layout auxiliary lines, the grid system is handy in graphic ...@@ -8,22 +8,22 @@ As a tool to provide layout auxiliary lines, the grid system is handy in graphic
2. Provides a unified positioning method for the system to ensure layout consistency among modules on different devices. 2. Provides a unified positioning method for the system to ensure layout consistency among modules on different devices.
3. Provides a flexible spacing adjustment method for applications to keep up with layout in special scenarios. 3. Provides a flexible spacing adjustment method for applications to keep up with layout in special scenarios.
To implement the grid layout, the declarative paradigm provides the \<GridContainer> component, together with the universal attribute useSizeType of its child components. To implement grid layout, the declarative paradigm provides the [GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md) grid container component, which works with the common attribute useSizeType of its subcomponents to implement grid layout.
## Grid System ## Grid System
The grid system works in terms of columns, margins, and gutters. The grid system works in terms of gutter, margin, and column.
![en-us_image_0000001217236574](figures/en-us_image_0000001217236574.png) ![en-us_image_0000001217236574](figures/en-us_image_0000001217236574.png)
1. Gutters: 1. Gutter:
Spacing between elements. You can define different clutter values for different device sizes as part of the overall grid layout specifications. For better results, make sure the gutter is not greater than the margin. Spacing between elements. You can define different clutter values for different device sizes as part of the overall grid layout specifications. For better results, make sure the gutter is not greater than the margin.
2. Margins: 2. Margin:
Spacing around an item in the grid container. You can define different margin values for different device sizes as part of the overall grid layout specifications. Spacing around an item in the grid container. You can define different margin values for different device sizes as part of the overall grid layout specifications.
3. Columns: 3. Column:
Main tool for positioning items in the grid layout. The grid container is divided into different columns based on the device size. The width of each column is calculated based on the total number of columns while respecting the margin and clutter specifications. Main tool for positioning items in the grid layout. The grid container is divided into various numbers of columns based on the device size. The width per column is calculated based on the total number of columns while respecting the margin and clutter specifications.
### Grid Breakpoints ### Grid Breakpoints
...@@ -32,15 +32,13 @@ Breakpoints in the grid system are set in terms of the device's screen pixel den ...@@ -32,15 +32,13 @@ Breakpoints in the grid system are set in terms of the device's screen pixel den
Depending on the screen width, devices are classified into different width types. The table below provides the mappings of the grid breakpoint ranges, device width types, default total number of columns, margins, and gutters. Depending on the screen width, devices are classified into different width types. The table below provides the mappings of the grid breakpoint ranges, device width types, default total number of columns, margins, and gutters.
<a id="grid_system_define">Grid layout</a>
| Grid Breakpoint Range | Device Width Type| Description | columns | gutter | margin |
| Grid Breakpoint Range| Device Width Type| Description| Columns| Gutter| Margin| | ----------------------- | ------ | --------- | ------- | ------ | ------ |
| -------- | -------- | -------- | -------- | -------- | -------- | | 0 &lt; Device screen width &lt; 320 vp | XS | Device of the minimum size.| 2 | 12 vp | 12 vp |
| 0 &lt; Device screen width &lt; 320 vp | XS | Device of the minimum size.| 2 | 12 vp| 12 vp| | 320 vp &lt;= Horizontal width &lt; 600 vp| SM | Small-sized device. | 4 | 24 vp | 24 vp |
| 320 vp &lt;= Device screen width &lt; 600 vp| SM | Small-sized device.| 4 | 24 vp| 24 vp| | 600 vp &lt;= Horizontal width &lt; 840 vp| MD | Medium-sized device.| 8 | 24 vp | 32 vp |
| 600 vp lt;= Device screen width lt;840 vp| MD | Medium-sized device.| 8 | 24 vp| 32 vp| | 840 vp &lt;= Device screen width | LG | Large-sized device. | 12 | 24 vp | 48 vp |
| 840 vp &lt;= Device screen width| LG | Large-sized device.| 12 | 24 vp| 48 vp|
## Usage ## Usage
...@@ -48,41 +46,44 @@ Create a grid container, define the grid layout, and set the number of columns f ...@@ -48,41 +46,44 @@ Create a grid container, define the grid layout, and set the number of columns f
### Creating a Grid Container ### Creating a Grid Container
Use the **GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})** API to create a grid container. All child components in the grid container follow the grid layout. Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})` API to create a grid container. All child components in the grid container follow the grid layout.
Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. In the sample below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp. - Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. In the sample below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp.
```
GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
```
In the sample below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when sizeType is set to SizeType.Auto.
``` ```
GridContainer() {} GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
``` ```
On a small-sized device (**SizeType.SM**), the grid container is divided into four columns by default, with the gutter of 24 vp and the margin of 24 vp. On a medium-sized device (**SizeType.MD**), the grid container is divided into eight columns by default, with the gutter of 24 vp and the margin of 32 vp.
In the sample below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when sizeType is set to SizeType.Auto.
```
GridContainer() {}
```
You can also use **sizeType** to configure child components in the grid container to follow the grid settings for a specific device width type, as shown below: On a small-sized device (**SizeType.SM**), the grid container is divided into four columns by default, with the gutter of 24 vp and the margin of 24 vp. On a medium-sized device (**SizeType.MD**), the grid container is divided into eight columns by default, with the gutter of 24 vp and the margin of 32 vp.
``` - You can also use **sizeType** to configure child components in the grid container to follow the grid settings for a specific device width type, as shown below:
GridContainer({ sizeType: SizeType.SM) {
Row() { ```
Text('1') GridContainer({ sizeType: SizeType.SM) {
.useSizeType({ Row() {
xs: { span: 2},
sm: { span: 3, offset: 1 }, Text('1')
md: { span: 6, offset: 2 }, .useSizeType({
lg: { span: 8, offset: 2 }, xs: { span: 2},
}) sm: { span: 3, offset: 1 },
} md: { span: 6, offset: 2 },
} lg: { span: 8, offset: 2 },
``` })
In the preceding example, the **\<Text>** component uses the grid setting of the **SizeType.SM** type regardless of the actual width type of the device. That is, the **\<Text>** component occupies three columns and is placed in the first column. }
}
```
In the preceding example, the **\<Text>** component uses the grid setting of the **SizeType.SM** type regardless of the actual width type of the device. That is, the **\<Text>** component occupies three columns and is placed in the first column.
### Grid Settings of Child Components in the Grid Container ### Grid Settings of Child Components in the Grid Container
Use the universal attribute **useSizeType** to configure the positioning of child components in the grid container. span indicates the number of columns occupied by the child component. offset indicates the column offset, that is, the column where the component is located. The sample code is as follows: Use the universal attribute **useSizeType** to configure the positioning of child components in the grid container. **span** indicates the number of columns occupied by the child component. **offset** indicates the column offset, that is, the column where the component is located. The sample code is as follows:
``` ```
GridContainer() { GridContainer() {
...@@ -97,7 +98,7 @@ GridContainer() { ...@@ -97,7 +98,7 @@ GridContainer() {
} }
} }
``` ```
In the preceding example, **sm: { span: 2, offset: 0 }** indicates that on a medium-sized device, the **\<Text>** component occupies three columns and is placed in the first column of the grid container. In the preceding example, `sm: { span: 2, offset: 0 }` indicates that on a medium-sized device, the **\<Text>** component occupies three columns and is placed in the first column of the grid container.
## Example Scenario ## Example Scenario
The grid layout helps ensure proper display of components among different device width types, eliminating the hassle of writing a large amount of code for device compatibility. The grid layout helps ensure proper display of components among different device width types, eliminating the hassle of writing a large amount of code for device compatibility.
...@@ -108,8 +109,8 @@ The grid layout helps ensure proper display of components among different device ...@@ -108,8 +109,8 @@ The grid layout helps ensure proper display of components among different device
struct GridContainerExample { struct GridContainerExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 5 }) {
GridContainer({ columns: 6, sizeType: SizeType.Auto, gutter: 10, margin: 20 }) { GridContainer({ columns: 6 }) {
Row() { Flex({justifyContent:FlexAlign.SpaceAround}) {
Text('1') Text('1')
.useSizeType({ .useSizeType({
xs: { span: 2, offset: 0 }, xs: { span: 2, offset: 0 },
...@@ -120,18 +121,18 @@ struct GridContainerExample { ...@@ -120,18 +121,18 @@ struct GridContainerExample {
.height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center) .height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
Text('2') Text('2')
.useSizeType({ .useSizeType({
xs: { span: 2, offset: 2 }, xs: { span: 2, offset: 0 },
sm: { span: 2, offset: 2 }, sm: { span: 2, offset: 0 },
md: { span: 4, offset: 1 }, md: { span: 4, offset: 0 },
lg: { span: 4, offset: 1 }, lg: { span: 4, offset: 0 },
}) })
.height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center) .height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center)
Text('3') Text('3')
.useSizeType({ .useSizeType({
xs: { span: 2, offset: 4 }, xs: { span: 2, offset: 0 },
sm: { span: 2, offset: 4 }, sm: { span: 2, offset: 0 },
md: { span: 1, offset: 5 }, md: { span: 1, offset: 0 },
lg: { span: 1, offset: 5 }, lg: { span: 1, offset: 0 },
}) })
.height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center) .height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center)
} }
...@@ -148,4 +149,5 @@ Effect on a small-sized device (**SizeType.SM**): ...@@ -148,4 +149,5 @@ Effect on a small-sized device (**SizeType.SM**):
![en-us_image_0000001218108718](figures/en-us_image_0000001218108718.png) ![en-us_image_0000001218108718](figures/en-us_image_0000001218108718.png)
Effect on a medium-sized device (**SizeType.MD**): Effect on a medium-sized device (**SizeType.MD**):
![en-us_image_0000001262748569](figures/en-us_image_0000001262748569.png)
![en-us_image_0000001262748569](figures/en-us_image_0000001262748569.png)
\ No newline at end of file
en/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ 89f4a66f
...@@ -15,11 +15,11 @@ Invoke the **mediaquery** API to set the media query condition and the callback, ...@@ -15,11 +15,11 @@ Invoke the **mediaquery** API to set the media query condition and the callback,
First, import the mediaquery module, as shown below: First, import the mediaquery module, as shown below:
``` ```
import mediaquery from '@ohos.mediaquery' import mediaquery from '@ohos.mediaquery'
``` ```
Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below: Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below:
``` ```
listener = mediaquery.matchMediaSync('(orientation: landscape)') listener = mediaquery.matchMediaSync('(orientation: landscape)')
``` ```
Finally, register the callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows: Finally, register the callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows:
``` ```
...@@ -38,16 +38,20 @@ listener.on('change', onPortrait) ...@@ -38,16 +38,20 @@ listener.on('change', onPortrait)
[media-type] [and|not|only] [(media-feature)] [media-type] [and|not|only] [(media-feature)]
``` ```
Examples are as follows: Examples are as follows:
screen and (round-screen: true) // This condition is met when the device screen is round.
(max-height: 800) // The condition is met when the height is less than 800. ` screen and (round-screen: true) ` // The query is valid when the device screen is round.
(height &lt;= 800) // The condition is met when the height is less than 800.
screen and (device-type: tv) or (resolution &lt; 2) // This is a multi-condition complex statement query containing multiple media features. ` (max-height: 800) ` // The query is valid when the height does not exceed 800.
` (height &lt;= 800) ` // The query is valid when the height does not exceed 800.
` screen and (device-type: tv) or (resolution &lt; 2) ` // The query is valid only when all media features are true.
### media-type ### media-type
| Type | Description | | Type | Description |
| ------ | ---------------------------------------- | | ------ | -------------- |
| screen | Media query based on screen-related parameters. | | screen | Media query based on screen-related parameters.|
### Media Logic Operation (and|not|only) ### Media Logic Operation (and|not|only)
...@@ -56,48 +60,48 @@ You can use logical operators (**and**, **or**, **not**, and **only**) to compos ...@@ -56,48 +60,48 @@ You can use logical operators (**and**, **or**, **not**, and **only**) to compos
**Table 1** Media logical operators **Table 1** Media logical operators
| Type | Description | | Type | Description |
| -------- | ---------------------------------------- | | -------- | ---------------------------------------- |
| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units. | | and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units.|
| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;When the **not** operator is used, the media type must be specified. | | not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;When the **not** operator is used, the media type must be specified.|
| only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br>The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;When the **only** operator is used, the media type must be specified. | | only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br>The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;When the **only** operator is used, the media type must be specified.|
| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;(round-screen: true)&nbsp;** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round. | | ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;(round-screen: true)&nbsp;** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round.|
| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;(round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round. | | or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;(round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round.|
At MediaQuery Level 4, range query is imported so that you can use the operators including &lt;=, &gt;=, &lt;, and &gt; besides the **max-** and **min-** operators. At MediaQuery Level 4, range query is imported so that you can use the operators including &lt;=, &gt;=, &lt;, and &gt; besides the max- and min-operators.
**Table 2** Logical operators for range query **Table 2** Logical operators for range query
| Type | Description | | Type | Description |
| ----- | ---------------------------------------- | | ----- | ---------------------------------------- |
| &lt;= | Less than or equal to, for example, **screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)**. | | &lt;= | Less than or equal to, for example, **screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)**.|
| &gt;= | Greater than or equal to, for example, **screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)**. | | &gt;= | Greater than or equal to, for example, **screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)**.|
| &lt; | Less than, for example, **screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)**. | | &lt; | Less than, for example, **screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)**.|
| &gt; | Greater than, for example, **screen&nbsp;and&nbsp;(600&nbsp;&gt;&nbsp;height)**. | | &gt; | Greater than, for example, **screen&nbsp;and&nbsp;(600&nbsp;&gt;&nbsp;height)**.|
### media-feature ### media-feature
| Type | Description | | Type | Description |
| ----------------- | ---------------------------------------- | | ----------------- | ---------------------------------------- |
| height | Height of the display area on the application page. | | height | Height of the display area on the application page. |
| min-height | Minimum height of the display area on the application page. | | min-height | Minimum height of the display area on the application page. |
| max-height | Maximum height of the display area on the application page. | | max-height | Maximum height of the display area on the application page. |
| width | Width of the display area on the app page. | | width | Width of the display area on the app page. |
| min-width | Minimum width of the display area on the application page. | | min-width | Minimum width of the display area on the application page. |
| max-width | Maximum width of the display area on the application page. | | max-width | Maximum width of the display area on the application page. |
| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.<br>-&nbsp;**dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>-&nbsp;**dpcm** indicates the number of physical pixels per centimeter. 1 dpcm&nbsp;≈&nbsp;2.54 dpi.<br>-&nbsp;**dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx&nbsp;=&nbsp;96 dpi. | | resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.<br>-&nbsp;**dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>-&nbsp;**dpcm** indicates the number of physical pixels per centimeter. 1 dpcm&nbsp;≈&nbsp;2.54 dpi.<br>-&nbsp;**dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx&nbsp;=&nbsp;96 dpi.|
| min-resolution | Minimum device resolution. | | min-resolution | Minimum device resolution. |
| max-resolution | Maximum device resolution. | | max-resolution | Maximum device resolution. |
| orientation | Screen orientation.<br>Options are as follows:<br>-&nbsp;orientation:&nbsp;portrait<br>-&nbsp;orientation:&nbsp;landscape | | orientation | Screen orientation.<br>Options are as follows:<br>-&nbsp;orientation:&nbsp;portrait<br>-&nbsp;orientation:&nbsp;landscape|
| device-height | Height of the device. | | device-height | Height of the device. |
| min-device-height | Minimum height of the device. | | min-device-height | Minimum height of the device. |
| max-device-height | Maximum height of the device. | | max-device-height | Maximum height of the device. |
| device-width | Width of the device. | | device-width | Width of the device. |
| min-device-width | Minimum width of the device. | | min-device-width | Minimum width of the device. |
| max-device-width | Maximum width of the device. | | max-device-width | Maximum width of the device. |
| round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite. | | round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite. |
| dark-mode | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite. | | dark-mode | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite. |
## Example Scenario ## Example Scenario
...@@ -138,8 +142,14 @@ Use media queries to apply different content and styles to the page text when th ...@@ -138,8 +142,14 @@ Use media queries to apply different content and styles to the page text when th
} }
} }
``` ```
When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.<br/> When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.<br>
![en-us_image_0000001262954829](figures/en-us_image_0000001262954829.png) ![en-us_image_0000001262954829](figures/en-us_image_0000001262954829.png)
When the device is not in landscape orientation, the text content is displayed in portrait mode in the color of #DB7093.<br/> When the device is not in landscape orientation, the text content is displayed in portrait mode in the color of #DB7093.<br>
![en-us_image_0000001263074739](figures/en-us_image_0000001263074739.png) ![en-us_image_0000001263074739](figures/en-us_image_0000001263074739.png)
## Samples
The following sample is provided to help you better understand how to develop the media query:
- [`MediaQuery`: eTS Media Query (API 8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MediaQuery)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或