diff --git a/en/application-dev/quick-start/app-configuration-file.md b/en/application-dev/quick-start/app-configuration-file.md index cbc97f24e80d576f747d69eeeaec89f50c264283..e133664dbec342b76c4f6b57e650513a7fbfc92a 100644 --- a/en/application-dev/quick-start/app-configuration-file.md +++ b/en/application-dev/quick-start/app-configuration-file.md @@ -1,7 +1,7 @@ # app.json5 Configuration File -This document gives an overview of the **app.json5** configuration file. To start with, let's go through an example of what this file contains. +This topic gives an overview of the **app.json5** configuration file. To start with, let's go through an example of what this file contains. ```json { @@ -35,7 +35,7 @@ As shown above, the **app.json5** file contains several tags. | Name| Description| Data Type| Initial Value Allowed| | -------- | -------- | -------- | -------- | | bundleName | Bundle name, which uniquely identifies an application. The value must comply with the following rules:
- Consists of letters, digits, underscores (_), and periods (.).
- Starts with a letter.
- Contains 7 to 127 bytes.
You are advised to use the reverse domain name notation, for example, *com.example.demo*, where the first part is the domain suffix **com**, the second part is the vendor/individual name, and the third part is the application name, which can be of multiple levels.
If an application is built with the system source code, you are advised to name it in *com.ohos.demo* notation, where **ohos** signifies that the application is an OpenHarmony system application.| String| No| -| bundleType| Bundle type, which is used to distinguish applications and atomic services.
- **app**: The bundle is a common application.
- **atomicService**: The bundle is an atomic service.
- **shared**: The bundle is a shared object application. | String| Yes (initial value: **"app"**)| +| bundleType| Bundle type, which is used to distinguish applications and atomic services.
- **app**: The bundle is a common application.
- **atomicService**: The bundle is an atomic service.
- **shared**: The bundle is a shared object application.| String| Yes (initial value: **"app"**)| | debug | Whether the application can be debugged. This tag is generated during compilation and building in DevEco Studio.
- **true**: The application can be debugged.
- **false**: The application cannot be debugged.| Boolean| Yes (initial value: **false**)| | icon | [Icon of the application](../application-models/application-component-configuration-stage.md). The value is an icon resource index.| String| No| | label | [Name of the application](../application-models/application-component-configuration-stage.md). The value is a string resource index.| String| No| @@ -49,10 +49,11 @@ As shown above, the **app.json5** file contains several tags. | apiReleaseType | Type of the target API version required for running the application. The value can be **"CanaryN"**, **"BetaN"**, or **"Release"**, where **N** represents a positive integer.
- **Canary**: indicates a restricted release.
- **Beta**: indicates a publicly released beta version.
- **Release**: indicates a publicly released official version.
The value is set by DevEco Studio reading the stage of the SDK in use.| String| Yes (initial value: set by DevEco Studio)| | multiProjects | Whether the application supports joint development of multiple projects.
- **true**: The application supports joint development of multiple projects.
- **false**: The application does not support joint development of multiple projects. For details about multi-project development, see [Multi-Project Build](https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/ohos-building-overview-0000001263360495-V3#section71471033104216).| Boolean| Yes (initial value: **false**)| | assanEnabled | Whether to enable AddressSanitizer (ASan) to detect memory corruption issues such as buffer overflows.
- **true**: ASan is enabled.
- **false**: ASan is disabled. Note that ASan is not available in the Release version.| Boolean| Yes (initial value: **false**)| -| tablet | Tablet-specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.
When running on tablets, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| -| tv | TV-specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.
When running on TVs, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| -| wearable | Wearable-specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.
When running on wearables, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| -| car | Head unit–specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.
When running on head units, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| -| default | Default device–specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.
When running on default devices, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| +| tablet | Tablet-specific configuration, which includes the **minAPIVersion** attribute.
When running on tablets, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| +| tv | TV-specific configuration, which includes the **minAPIVersion** attribute.
When running on TVs, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| +| wearable | Wearable-specific configuration, which includes the **minAPIVersion** attribute.
When running on wearables, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| +| car | Head unit–specific configuration, which includes the **minAPIVersion** attribute.
When running on head units, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| +| default | Default device–specific configuration, which includes the **minAPIVersion** attribute.
When running on default devices, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)| |targetBundleName|Target application name of the bundle. The value rule and range are the same as those of **bundleName**.|String|Yes (if the initial value is used, the target application is not an application with the overlay feature)| |targetPriority|Priority of the application. When **targetBundleName** is set, the application is an application with the overlay feature. The value ranges from 1 to 100.|Number|Yes (initial value: **1**)| +|generateBuildHash |Whether the hash values of all HAP and HSP files of the application are generated by the packaging tool. The hash values (if any) are used to determine whether the application needs to be updated when the system is updated in OTA mode but the **versionCode** value of the application remains unchanged.
If this tag is set to **true**, the packaging tool generates hash values for all HAP and HSP files of the application.
**NOTE**
This tag applies only to system applications.|Boolean|Yes (initial value: **false**)| diff --git a/en/application-dev/quick-start/module-configuration-file.md b/en/application-dev/quick-start/module-configuration-file.md index aeb16b360e08d9d89eb3594d28b75cd21f37ca59..2d830a4b8318afdf61f4d9d7531e71a3a6420858 100644 --- a/en/application-dev/quick-start/module-configuration-file.md +++ b/en/application-dev/quick-start/module-configuration-file.md @@ -1,7 +1,7 @@ # module.json5 Configuration File -This document gives an overview of the **module.json5** configuration file. To start with, let's go through an example of what this file contains. +This topic gives an overview of the **module.json5** configuration file. To start with, let's go through an example of what this file contains. ```json { @@ -61,7 +61,8 @@ This document gives an overview of the **module.json5** configuration file. To s ] }, "targetModuleName": "feature", - "targetPriority": 50 + "targetPriority": 50, + "isolationMode": "nonisolationFirst" } ``` @@ -93,6 +94,9 @@ As shown above, the **module.json5** file contains several tags. | [dependencies](#dependencies)| List of shared libraries on which the current module depends during running.| Object array| Yes (initial value: left empty) | | targetModuleName | Target module of the bundle. The value is a string with a maximum of 31 bytes. It must be unique in the entire application.|String|Yes (if the initial value is used, the target module is not a module with the overlay feature)| | targetPriority | Priority of the module. When **targetModuleName** is set, the module is a module with the overlay feature. The value ranges from 1 to 100.|Number|Yes (initial value: **1**)| +| [proxyDatas](#proxydatas) | List of data proxies provided by the module.| Object array| Yes (initial value: left empty)| +| isolationMode | Multi-process configuration of the module. The options are as follows:
- **nonisolationFirst**: The module preferentially runs in a non-independent process.
- **isolationFirst**: The module preferentially runs in an independent process.
- **isolationOnly**: The module runs only in an independent process.
- **nonisolationOnly**: The module runs only in non-independent processes.|String|Yes (initial value: **nonisolationFirst**)| +| generateBuildHash |Whether the hash value of the HAP or HSP file is generated by the packaging tool. The hash value (if any) is used to determine whether the application needs to be updated when the system is updated in OTA mode but the **versionCode** value of the application remains unchanged.
This tag is enabled only when the **generateBuildHash** tag in the [app.json5](./app-configuration-file.md) file is **false**.
**NOTE**
This tag applies only to system applications.|Boolean|Yes (initial value: **false**)| ## deviceTypes @@ -300,7 +304,7 @@ Set **icon**, **label**, and **skills** under **abilities** in the **module.json | [launchType](../application-models/uiability-launch-type.md) | Launch type of the UIAbility component. The options are as follows:
- **multiton**: A new UIAbility instance is created each time the UIAbility component is started.
- **singleton**: A new UIAbility instance is created only when the UIAbility component is started for the first time.
- **specified**: You can determine whether to create a new UIAbility instance when the application is running.| String| Yes (initial value: **"singleton"**)| | description | Description of the UIAbility component. The value is a string with a maximum of 255 bytes or a resource index to the description in multiple languages.| String| Yes (initial value: left empty)| | icon | Icon of the UIAbility component. The value is an icon resource index.| String| Yes (initial value: left empty)
If **UIAbility** is set to **MainElement**, this attribute is mandatory.| -| label | Name of the UIAbility component displayed to users. The value is a string resource index.
If **UIAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| No| +| label | Name of the UIAbility component displayed to users. The value is a string resource index.| String| Yes (initial value: left empty)
If **UIAbility** is set to **MainElement**, this attribute is mandatory.| | permissions | Permissions required for another application to access the UIAbility component.
The value is an array of permission names predefined by the system, generally in the reverse domain name notation. It contains a maximum of 255 bytes.| String array| Yes (initial value: left empty)| | [metadata](#metadata)| Metadata information of the UIAbility component.| Object array| Yes (initial value: left empty)| | exported | Whether the UIAbility component can be called by other applications.
- **true**: The UIAbility component can be called by other applications.
- **false**: The UIAbility component cannot be called by other applications.| Boolean| Yes (initial value: **false**)| @@ -440,7 +444,7 @@ The **extensionAbilities** tag represents the configuration of extensionAbilitie | type | Type of the ExtensionAbility component. The options are as follows:
- **form**: ExtensionAbility of a widget.
- **workScheduler**: ExtensionAbility of a Work Scheduler task.
- **inputMethod**: ExtensionAbility of an input method.
- **service**: service component running in the background.
- **accessibility**: ExtensionAbility of an accessibility feature.
- **dataShare**: ExtensionAbility for data sharing.
- **fileShare**: ExtensionAbility for file sharing.
- **staticSubscriber**: ExtensionAbility for static broadcast.
- **wallpaper**: ExtensionAbility of the wallpaper.
- **backup**: ExtensionAbility for data backup.
- **window**: ExtensionAbility of a window. This type of ExtensionAbility creates a window during startup for which you can develop the GUI. The window is then combined with other application windows through **abilityComponent**.
- **thumbnail**: ExtensionAbility for obtaining file thumbnails. You can provide thumbnails for files of customized file types.
- **preview**: ExtensionAbility for preview. This type of ExtensionAbility can parse the file and display it in a window. You can combine the window with other application windows.
- **print**: ExtensionAbility for the print framework.
- **driver**: ExtensionAbility for the driver framework.
**NOTE**
The **service** and **dataShare** types apply only to system applications and do not take effect for third-party applications.| String| No| | permissions | Permissions required for another application to access the ExtensionAbility component.
The value is generally in the reverse domain name notation and contains a maximum of 255 bytes. It is an array of permission names predefined by the system or customized. The name of a customized permission must be the same as the **name** value of a permission defined in the **defPermissions** attribute.| String array| Yes (initial value: left empty)| | uri | Data URI provided by the ExtensionAbility component. The value is a string with a maximum of 255 bytes, in the reverse domain name notation.
**NOTE**
This attribute is mandatory when the type of the ExtensionAbility component is set to **dataShare**.| String| Yes (initial value: left empty)| -|skills | Feature set of [wants](../application-models/want-overview.md) that can be received by the ExtensionAbility component.
Configuration rule: In an entry package, you can configure multiple **skills** attributes with the entry capability. (A **skills** attribute with the entry capability is the one that has **ohos.want.action.home** and **entity.system.home** configured.) The **label** and **icon** in the first ExtensionAbility that has **skills** configured are used as the **label** and **icon** of the entire OpenHarmony service/application.
**NOTE**
The **skills** attribute with the entry capability can be configured for the feature package of an OpenHarmony application, but not for an OpenHarmony service. | Array| Yes (initial value: left empty)| +|skills | Feature set of [wants](../application-models/want-overview.md) that can be received by the ExtensionAbility component.
Configuration rule: In an entry package, you can configure multiple **skills** attributes with the entry capability. (A **skills** attribute with the entry capability is the one that has **ohos.want.action.home** and **entity.system.home** configured.) The **label** and **icon** in the first ExtensionAbility that has **skills** configured are used as the **label** and **icon** of the entire OpenHarmony service/application.
**NOTE**
The **skills** attribute with the entry capability can be configured for the feature package of an OpenHarmony application, but not for an OpenHarmony service.| Array| Yes (initial value: left empty)| | [metadata](#metadata)| Metadata of the ExtensionAbility component.| Object| Yes (initial value: left empty)| | exported | Whether the ExtensionAbility component can be called by other applications.
- **true**: The ExtensionAbility component can be called by other applications.
- **false**: The UIAbility component cannot be called by other applications.| Boolean| Yes (initial value: **false**)| @@ -595,7 +599,7 @@ The **shortcut** information is identified in **metadata**, where: ## distributionFilter -The **distributionFilter** tag defines the rules for distributing HAP files based on different device specifications, so that precise matching can be performed when the application market distributes applications. Distribution rules cover five factors: API version, screen shape, screen size, screen resolution, and country code. During distribution, a unique HAP is determined based on the mapping between **deviceType** and these five factors. This tag must be configured in the **/resource/profile resource** directory. Its sub-tags are optional. +The **distributionFilter** tag defines the rules for distributing HAP files based on different device specifications, so that precise matching can be performed when the application market distributes applications. Distribution rules cover the following factors: screen shape, screen size, screen resolution, and country/region code. During distribution, a unique HAP is determined based on the mapping between **deviceType** and these five factors. This tag must be configured in the **/resource/profile resource** directory. Its sub-tags are optional. **Table 12** distributionFilter @@ -797,3 +801,35 @@ Example of the **dependencies** structure: } } ``` + +## proxyDatas + +The **proxyDatas** tag provides the list of data proxies provided by the module. It can be configured only for entry and feature modules. + +**Table 21** proxyDatas +| Name | Description | Data Type| Initial Value Allowed| +| ----------- | ------------------------------ | -------- | ---------- | +| uri | URI of the data proxy. The URIs configured for different data proxies must be unique and must be in the *datashareproxy://Current application package name/xxx* format. | String | No| +| requiredReadPermission | Permission required for reading data from the data proxy. For non-system applications, this field is mandatory, and the permission level must be system_basic or system_core. For system applications, this field is optional, and the permission level is not limited. For details about the permission level, see [Application Permission List](../security/permission-list.md).| String | Yes (initial value: left empty)| +| requiredWritePermission | Permission required for writing data to the data proxy. For non-system applications, this field is mandatory, and the permission level must be system_basic or system_core. For system applications, this field is optional, and the permission level is not limited. For details about the permission level, see [Application Permission List](../security/permission-list.md).| String | Yes (initial value: left empty)| +| [metadata](#metadata)| Metadata of the data proxy. Only the **name** and **resource** fields can be configured.| Object| Yes (initial value: left empty)| + +Example of the **proxyDatas** structure: + +```json +{ + "module": { + "proxyDatas": [ + { + "uri":"datashareproxy://com.ohos.datashare/event/Meeting", + "requiredReadPermission": "ohos.permission.GET_BUNDLE_INFO", + "requiredWritePermission": "ohos.permission.GET_BUNDLE_INFO", + "metadata": { + "name": "datashare_metadata", + "resource": "$profile:datashare" + } + } + ] + } +} +``` diff --git a/en/application-dev/quick-start/module-structure.md b/en/application-dev/quick-start/module-structure.md index d4593c12743cff7d6a5da9e10de69c6e4d6b71b5..2959e6a942a6236a1717d9f2ead60dc7f814e479 100644 --- a/en/application-dev/quick-start/module-structure.md +++ b/en/application-dev/quick-start/module-structure.md @@ -20,10 +20,11 @@ The **module** tag contains the HAP configuration. | shortcuts | Shortcuts of the application. The value is an array of objects, each of which represents a shortcut object.| Object array| Yes (initial value: left empty)| | reqPermissions | Permissions that the application requests from the system when it is running.| Object array| Yes (initial value: left empty)| | colorMode | Color mode of the application. The options are as follows:
- **dark**: Resources applicable for the dark mode are used.
- **light**: Resources applicable for the light mode are used.
- **auto**: Resources are used based on the color mode of the system.| String| Yes (initial value: **auto**)| -| distroFilter | Distribution rules of the application. This attribute defines the rules for distributing HAP files based on different device specifications, so that precise matching can be performed when the application market distributes applications. Distribution rules cover three factors: API version, screen shape, and screen resolution. During distribution, a unique HAP is determined based on the mapping between **deviceType** and these three factors.| Object| Yes (initial value: left empty) Set this attribute when an application has multiple entry modules.| +| distributionFilter | Distribution rules of the application. This attribute defines the rules for distributing HAP files based on different device specifications, so that precise matching can be performed when the application market distributes applications. Distribution rules cover three factors: API version, screen shape, and screen resolution. During distribution, a unique HAP is determined based on the mapping between **deviceType** and these three factors.| Object| Yes (initial value: left empty) Set this attribute when an application has multiple entry modules.| |commonEvents | Information about the common event static subscriber, which must contain the subscriber name, required permissions, and list of the common events subscribed to. When a subscribed event is sent, the static subscriber is started. Unlike the dynamic subscriber, the static subscriber does not need to proactively call the common event subscription API in the service code, and may not be running when the common event is published.| Object array| Yes (initial value: left empty)| | entryTheme | Keyword of an OpenHarmony internal theme. Set it to the resource index of the name.| String| Yes (initial value: left empty)| |testRunner | Test runner configuration.| Object| Yes (initial value: left empty)| +|generateBuildHash |Whether the hash value of the HAP or HSP file is generated by the packaging tool. The hash value (if any) is used to determine whether the application needs to be updated when the system is updated in OTA mode but the value of [code](#internal-structure-of-the-apiversion-attribute) in **version** of the application remains unchanged.
**NOTE**
This tag applies only to system applications.|Boolean|Yes (initial value: **false**)| Example of the **module** tag structure: @@ -268,7 +269,7 @@ Note: The label displayed on the application details screen may be different fro | name | Ability name. The value can be a reverse domain name, in the format of "*bundleName*.*className*", for example, **"com.example.myapplication.EntryAbility"**. Alternatively, the value can start with a period (.) followed by the class name, for example, **".EntryAbility"**.
The ability name must be unique in an application. Note: If you use DevEco Studio to create the project, an ability named **EntryAbility** will be created by default, and its configuration will be saved to the **config.json** file. If you use other IDEs, the value of this attribute can be customized. The value can contain a maximum of 127 bytes.| String| No| | description | Description of the ability. The value can be a string or a resource index to descriptions in multiple languages. The value can contain a maximum of 255 bytes.| String| Yes (initial value: left empty)| | icon | Index to the ability icon file. Example value: **$media:ability_icon**. In the **skills** attribute of the ability, if the **actions** value contains **action.system.home** and the **entities** value contains **entity.system.home**, the icon of the ability is also used as the icon of the application. If multiple abilities address this condition, the icon of the first candidate ability is used as the application icon.
Note: The **icon** and **label** values of an application are visible to users. Ensure that at least one of them is different from any existing icons or labels.| String| Yes (initial value: left empty)| -| label | Ability name displayed to users. The value can be a name string or a resource index to names in multiple languages. In the **skills** attribute of the ability, if the **actions** value contains **action.system.home** and the **entities** value contains **entity.system.home**, the label of the ability is also used as the label of the application. If multiple abilities address this condition, the label of the first candidate ability is used as the application label.
Note: The **icon** and **label** values of an application are visible to users. Ensure that at least one of them is different from any existing icons or labels. The value can be a reference to a string defined in a resource file or a string enclosed in brackets ({}). The value can contain a maximum of 255 characters.| String| Yes (initial value: left empty)| +| label | Ability name displayed to users. The value can be a name string or a resource index to names in multiple languages, for example, **$string:ability_label**. In the **skills** attribute of the ability, if the **actions** value contains **action.system.home** and the **entities** value contains **entity.system.home**, the label of the ability is also used as the label of the application. If multiple abilities address this condition, the label of the first candidate ability is used as the application label.
Note: The **icon** and **label** values of an application are visible to users. Ensure that at least one of them is different from any existing icons or labels. The value can be a reference to a string defined in a resource file or a string enclosed in brackets ({}). The value can contain a maximum of 255 characters.| String| Yes (initial value: left empty)| | uri | Uniform Resource Identifier (URI) of the ability. The value can contain a maximum of 255 bytes.| String| Yes (No for abilities using the Data template)| | launchType | Launch type of the ability. The value can be **standard** or **singleton**.
**standard**: Multiple **Ability** instances can be created during startup. Most abilities can use this type.
**singleton**: Only a single **Ability** instance can be created across all task stacks during startup. For example, a globally unique incoming call screen uses the singleton launch type. This attribute applies only to the default, tablet, smart TV, head unit, and wearable device types.| String| Yes (initial value: **"singleton"**)| | visible | Whether the ability can be called by other applications.
**true**: The ability can be called by other applications.
**false**: The ability cannot be called by other applications.| Boolean| Yes (initial value: **false**)| @@ -380,7 +381,7 @@ Example of the **abilities** attribute structure: | -------- | -------- | -------- | -------- | | actions | Actions of the **want** that can be accepted by the ability. Generally, the value is an **action** value predefined in the system.| String array| Yes (initial value: left empty)| | entities | Entities of the **want** that can be accepted by the ability, such as video and home applications.| String array| Yes (initial value: left empty)| -| uris | Data specifications to be added to the want filter. The specification can be of data type only (**mimeType** attribute), URI only, or both.
The URI is specified by separate attributes of each part: <scheme>://<host>:<port>[<path>\|<pathStartWith>\|<pathRegex>].
**scheme** is mandatory when the specification is of the URI type and is optional when the specification is of data type only.| Object array| Yes (initial value: left empty)| +| uris | Data specifications to be added to the want filter. The specification is a data type (using the **mimeType** attribute), a URI, or both a data type and a URI.
The URI is specified by separate attributes of each part: <scheme>://<host>:<port>[<path>\|<pathStartWith>\|<pathRegex>].
**scheme** is mandatory when the specification is of the URI type and is optional when the specification is a data type. | Object array| Yes (initial value: left empty)| ## Internal Structure of the uris Attribute @@ -614,9 +615,9 @@ Example of the **forms** attribute structure: ] ``` -## Internal Structure of the distroFilter Attribute +## Internal Structure of the distributionFilter Attribute -**Table 21** Internal structure of the distroFilter attribute +**Table 21** Internal structure of the distributionFilter attribute | Name| Description| Data Type| Initial Value Allowed| | -------- | -------- | -------- | -------- | @@ -672,10 +673,10 @@ Example of the **forms** attribute structure: | value | Country code of the area to which the application is to be distributed. The value is a string array, of which each substring indicates a country or region. The substring consists of two uppercase letters.| String array| No| -Example of the **distroFilter** attribute structure: +Example of the **distributionFilter** attribute structure: ```json -"distroFilter": { +"distributionFilter": { "apiVersion": { "policy": "include", "value": [4,5] diff --git a/en/application-dev/ui/arkts-layout-development-grid-layout.md b/en/application-dev/ui/arkts-layout-development-grid-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..6b385b02e3f2ef361d43ea64897ea6118be9688c --- /dev/null +++ b/en/application-dev/ui/arkts-layout-development-grid-layout.md @@ -0,0 +1,481 @@ +# Responsive Grid Layout + + +## Overview + +As an auxiliary positioning tool, the responsive grid layout is handy in UI design on mobile devices. It exhibits the following advantages: + +1. Provides rules for layout design and resolves issues of dynamic layout across devices with different sizes. By dividing a page into equal-width columns and rows, you can easily locate and typeset page elements. + +2. Provides a unified positioning method for the system to ensure layout consistency across layouts on different devices. This can reduce the complexity of design and development and improve work efficiency. + +3. Provides a flexible spacing adjustment method for applications to accommodate special layout requirements. You can adjust the spacing between columns and between rows to control the typesetting of the entire page. + +4. Completes the wrapping and adaptation automatically when overflow occurs. When the number of page elements exceeds the capacity of a row or column, they automatically wrap to a new row or column and adapt the typesetting to different devices. + +The [\](../reference/arkui-ts/ts-container-gridrow.md) component is the responsive grid container component and must be used together with the [\](../reference/arkui-ts/ts-container-gridcol.md) child component. + + +## GridRow + + +### Grid Breakpoints + +The grid system defines breakpoints, which are screen width types in effect, based on the horizontal width (screen density pixels, in vp) of the screens. You can use the breakpoints to meet specific layout requirements. + +By default, the grid system provides four breakpoints: xs, sm, md, and lg. + +| Breakpoint| Value Range (vp) | Device Description | +| ---- | --------------- | --------- | +| xs | [0, 320) | Device of the minimum size.| +| sm | [320, 520) | Small-sized device. | +| md | [520, 840) | Medium-sized device.| +| lg | [840, +∞) | Large-sized device. | + +In the **\** component, you can use **breakpoints** to customize the value range of breakpoints. A maximum of six breakpoints are supported. In addition to the four default breakpoints, you can also enable the xl and xxl breakpoints for your application window layout. + +| Breakpoint| Device Description | +| ---- | --------- | +| xs | Device of the minimum size.| +| sm | Small-sized device. | +| md | Medium-sized device.| +| lg | Large-sized device. | +| xl | Extra-large-sized device.| +| xxl | Ultra-large-sized device.| + +- Set **breakpoints** with a monotonically increasing array based on the use case. Because **breakpoints** supports a maximum of six breakpoints, the maximum length of the monotonically increasing array is 5. + + + ```ts + breakpoints: {value: ['100vp', '200vp']} + ``` + + Enables three breakpoints: xs, sm, and md. If the value is less than 100 vp, the breakpoint is xs. If the value is 100–200 vp, the breakpoint is sm. If the value is greater than 200 vp, the breakpoint is md. + + + ```ts + breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']} + ``` + + Enables five breakpoints: xs, sm, md, lg, and xl. If the value is less than 320 vp, the breakpoint is xs. If the value is 320–520 vp, the breakpoint is sm. If the value is 520–840 vp, the breakpoint is md. If the value is 840–1080vp, the breakpoint is lg. If the value is greater than 1080 vp, the breakpoint is xl. + +- The grid system implements breakpoints by listening for the changes in the window or container size, and sets the breakpoint references through **reference**. Considering that the application may be displayed in non-full-screen mode, design the breakpoints with the application window width as the reference. + +In the following example, the default number of columns of a grid is 12. Breakpoints are used to divide the application window width into six ranges, where different grid items occupy a different number of columns. + + +```ts +@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; +... +GridRow({ + breakpoints: { + value: ['200vp', '300vp', '400vp', '500vp', '600vp'], + reference: BreakpointsReference.WindowSize + } +}) { + ForEach(this.bgColors, (color, index) => { + GridCol({ + span: { + xs: 2, + sm: 3, + md: 4, + lg: 6, + xl: 8, + xxl: 12 + } + }) { + Row() { + Text(`${index}`) + }.width("100%").height('50vp') + }.backgroundColor(color) + }) +} +``` + +![en-us_image_0000001511421272](figures/en-us_image_0000001511421272.gif) + + +### Columns + +In the **\**, **columns** is used to set the total number of columns in the responsive grid layout. + +- The default value of **columns** is 12. If **columns** is not set, the responsive grid layout is divided into 12 columns at any breakpoint. + + + ```ts + @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; + ... + GridRow() { + ForEach(this.bgColors, (item, index) => { + GridCol() { + Row() { + Text(`${index + 1}`) + }.width('100%').height('50') + }.backgroundColor(item) + }) + } + ``` + + ![en-us_image_0000001563060709](figures/en-us_image_0000001563060709.png) + +- When **columns** is set to a number, the responsive grid layout is divided into the specified number of columns regardless of the screen size. The following example sets the number of grid layout columns to 4 and 8 in sequence, where a child component occupies one column by default. + + + ```ts + @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; + @State currentBp: string = 'unknown'; + ... + Row() { + GridRow({ columns: 4 }) { + ForEach(this.bgColors, (item, index) => { + GridCol() { + Row() { + Text(`${index + 1}`) + }.width('100%').height('50') + }.backgroundColor(item) + }) + } + .width('100%').height('100%') + .onBreakpointChange((breakpoint) => { + this.currentBp = breakpoint + }) + } + .height(160) + .border({ color: Color.Blue, width: 2 }) + .width('90%') + + Row() { + GridRow({ columns: 8 }) { + ForEach(this.bgColors, (item, index) => { + GridCol() { + Row() { + Text(`${index + 1}`) + }.width('100%').height('50') + }.backgroundColor(item) + }) + } + .width('100%').height('100%') + .onBreakpointChange((breakpoint) => { + this.currentBp = breakpoint + }) + } + .height(160) + .border({ color: Color.Blue, width: 2 }) + .width('90%') + ``` + + ![en-us_image_0000001511421268](figures/en-us_image_0000001511421268.png) + +- When **columns** is set to a value of the **GridRowColumnOption** type, you can assign values specific to the screen size (xs, sm, md, lg, xl, xxl). + + + ```ts + @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown] + GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) { + ForEach(this.bgColors, (item, index) => { + GridCol() { + Row() { + Text(`${index + 1}`) + }.width('100%').height('50') + }.backgroundColor(item) + }) + } + ``` + + ![en-us_image_0000001563060689](figures/en-us_image_0000001563060689.gif) + + If **columns** is only set for the sm and md screen size types, screen sizes smaller than sm use the default value **12**, and screen sizes larger than md (lg, xl, and xxl) use the value of **columns** of the md type. + + +### Alignment + +In the responsive grid layout, you can set the **direction** attribute of **\** to define the direction in which child components are arranged. The options are **GridRowDirection.Row** (from left to right) or **GridRowDirection.RowReverse** (from right to left). An appropriate **direction** value can make the page layout more flexible and meet the design requirements. + +- When child components are arranged from left to right (default): + + + ```ts + GridRow({ direction: GridRowDirection.Row }){} + ``` + + ![en-us_image_0000001511740488](figures/en-us_image_0000001511740488.png) + +- When child components are arranged from right to left (default): + + + ```ts + GridRow({ direction: GridRowDirection.RowReverse }){} + ``` + + ![en-us_image_0000001562940517](figures/en-us_image_0000001562940517.png) + + +### Gutters + +In the **\** component, **gutter** is used to set the spacing between adjacent child components in the horizontal and vertical directions. + +- When **gutter** is set to a number, the number applies to both the horizontal and vertical directions. In the following example, the horizontal and vertical spacing between adjacent child components is set to **10**. + + + ```ts + GridRow({ gutter: 10 }){} + ``` + + ![en-us_image_0000001511740476](figures/en-us_image_0000001511740476.png) + +- When **gutter** is set to a value of the **GutterOption** type, the **x** attribute of the value indicates the horizontal gutter, and the **y** attribute indicates the vertical gutter. + + + ```ts + GridRow({ gutter: { x: 20, y: 50 } }){} + ``` + + ![en-us_image_0000001511900456](figures/en-us_image_0000001511900456.png) + + +## GridCol + +The **\** component is a child component of the **\** component. You can set the **span**, **offset**, and **order** attributes of this component by passing parameters or using setters. + +- Setting **span** + + + ```ts + GridCol({ span: 2 }){} + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){} + GridCol(){}.span(2) + GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 }) + ``` + +- Setting **offset** + + + ```ts + GridCol({ offset: 2 }){} + GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){} + GridCol(){}.offset(2) + GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 }) + ``` + +- Setting **order** + + + ```ts + GridCol({ order: 2 }){} + GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){} + GridCol(){}.order(2) + GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 }) + ``` + + +### span + +Sets the number of columns occupied by a child component in the grid layout, which determines the child component width. The default value is **1**. + +- When the value type is number, the number of columns occupied by the child component is the same across screen sizes. + + + ```ts + @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; + ... + GridRow({ columns: 8 }) { + ForEach(this.bgColors, (color, index) => { + GridCol({ span: 2 }) { + Row() { + Text(`${index}`) + }.width('100%').height('50vp') + } + .backgroundColor(color) + }) + } + ``` + + ![en-us_image_0000001511421264](figures/en-us_image_0000001511421264.png) + +- When the value type is **GridColColumnOption**, you can assign values specific to the screen size (xs, sm, md, lg, xl, xxl). + + + ```ts + @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; + ... + GridRow({ columns: 8 }) { + ForEach(this.bgColors, (color, index) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Text(`${index}`) + }.width('100%').height('50vp') + } + .backgroundColor(color) + }) + } + ``` + + ![en-us_image_0000001511740492](figures/en-us_image_0000001511740492.gif) + + +### offset + +Sets the column offset of a child component relative to the previous child component. The default value is **0**. + +- When the value type is number, the column offset of the child component is the same across screen sizes. + + + ```ts + @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; + ... + GridRow() { + ForEach(this.bgColors, (color, index) => { + GridCol({ offset: 2 }) { + Row() { + Text('' + index) + }.width('100%').height('50vp') + } + .backgroundColor(color) + }) + } + ``` + + ![en-us_image_0000001563060705](figures/en-us_image_0000001563060705.png) + + By default, a grid is divided into 12 columns and each child component occupies one column with an offset of two columns. Each row holds four child components, with three columns per child component plus the gutter. + +- When the value type is **GridColColumnOption**, you can assign values specific to the screen size (xs, sm, md, lg, xl, xxl). + + + ```ts + @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; + ... + + GridRow() { + ForEach(this.bgColors, (color, index) => { + GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Text('' + index) + }.width('100%').height('50vp') + } + .backgroundColor(color) + }) + } + ``` + + ![en-us_image_0000001562700433](figures/en-us_image_0000001562700433.gif) + + +### order + +Sets the sequence number of a child component in the grid layout. If a child component shares an **order** value with another child component or does not have **order** set, it is displayed based on its code sequence number. A child component with a smaller **order** value is placed before the one with a larger **order** value. + +If **order** is not set for all child components, those that have **order** set are displayed after those that do not have **order** set and are sorted in ascending order based on the value. + +- When the value type is number, child components are sorted in the same order across screen sizes. + + + ```ts + GridRow() { + GridCol({ order: 4 }) { + Row() { + Text('1') + }.width('100%').height('50vp') + }.backgroundColor(Color.Red) + GridCol({ order: 3 }) { + Row() { + Text('2') + }.width('100%').height('50vp') + }.backgroundColor(Color.Orange) + GridCol({ order: 2 }) { + Row() { + Text('3') + }.width('100%').height('50vp') + }.backgroundColor(Color.Yellow) + GridCol({ order: 1 }) { + Row() { + Text('4') + }.width('100%').height('50vp') + }.backgroundColor(Color.Green) + } + ``` + + ![en-us_image_0000001511580892](figures/en-us_image_0000001511580892.png) + +- When the value type is **GridColColumnOption**, you can assign values specific to the screen size (xs, sm, md, lg, xl, xxl). You can set 1234 for xs, 2341 for sm, 3412 for md, and 2431 for lg. + + + ```ts + GridRow() { + GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) { + Row() { + Text('1') + }.width('100%').height('50vp') + }.backgroundColor(Color.Red) + GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) { + Row() { + Text('2') + }.width('100%').height('50vp') + }.backgroundColor(Color.Orange) + GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) { + Row() { + Text('3') + }.width('100%').height('50vp') + }.backgroundColor(Color.Yellow) + GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) { + Row() { + Text('4') + }.width('100%').height('50vp') + }.backgroundColor(Color.Green) + } + ``` + + ![en-us_image_0000001511900444](figures/en-us_image_0000001511900444.gif) + + +## Nesting of Responsive Grid Components + +Responsive grid components can be contained in other responsive grid components. + +In the following example, the responsive grid divides the entire space into 12 parts. **\** is nested in **\** at the first layer, which is divided into the large area in the center and the footer area. **\** is nested in **\** at the second layer, which is divided into the left and right areas. The child component space is divided based on the space allocation of the parent component at the upper layer. For example, the pink area is made up of 12 columns of the screen space, and the green and blue areas are made up of 12 columns of the **\** parent component. + + + +```ts +@Entry +@Component +struct GridRowExample { + build() { + GridRow() { + GridCol({ span: { sm: 12 } }) { + GridRow() { + GridCol({ span: { sm: 2 } }) { + Row() { + Text('left').fontSize(24) + } + .justifyContent(FlexAlign.Center) + .height('90%') + }.backgroundColor('#ff41dbaa') + + GridCol({ span: { sm: 10 } }) { + Row() { + Text('right').fontSize(24) + } + .justifyContent(FlexAlign.Center) + .height('90%') + }.backgroundColor('#ff4168db') + } + .backgroundColor('#19000000') + .height('100%') + } + + GridCol({ span: { sm: 12 } }) { + Row() { + Text('footer').width('100%').textAlign(TextAlign.Center) + }.width('100%').height('10%').backgroundColor(Color.Pink) + } + }.width('100%').height(300) + } +} +``` + + +![en-us_image_0000001563060697](figures/en-us_image_0000001563060697.png) + + +To sum up, the responsive grid components are powerful tools with a wide range of customization capabilities. With the required attributes set at different breakpoints, such as **Columns**, **Margin**, **Gutter**, and **span**, the layout is created automatically. You do not need to pay attention to the specific device type and device state (such as landscape and portrait). diff --git a/en/application-dev/ui/figures/en-us_image_0000001511421264.png b/en/application-dev/ui/figures/en-us_image_0000001511421264.png new file mode 100644 index 0000000000000000000000000000000000000000..fe59d441c386189694b3185e23279f14c6dd4a97 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511421264.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001511421268.png b/en/application-dev/ui/figures/en-us_image_0000001511421268.png new file mode 100644 index 0000000000000000000000000000000000000000..5e549b42338ffe87b944807cec7e57144b5cbe74 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511421268.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001511421272.gif b/en/application-dev/ui/figures/en-us_image_0000001511421272.gif new file mode 100644 index 0000000000000000000000000000000000000000..f2e18ecafe8202705a34e6c76b4fdc59d5cca8d6 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511421272.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001511580892.png b/en/application-dev/ui/figures/en-us_image_0000001511580892.png new file mode 100644 index 0000000000000000000000000000000000000000..297dea381d85074e91edfb664bac5b8e3151f7bb Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511580892.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001511740476.png b/en/application-dev/ui/figures/en-us_image_0000001511740476.png new file mode 100644 index 0000000000000000000000000000000000000000..3b246c32f1079b06c18c1a14cbcb286c241a8623 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511740476.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001511740488.png b/en/application-dev/ui/figures/en-us_image_0000001511740488.png new file mode 100644 index 0000000000000000000000000000000000000000..1153aade7a6764fe871d63783abdcd09366fba13 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511740488.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001511740492.gif b/en/application-dev/ui/figures/en-us_image_0000001511740492.gif new file mode 100644 index 0000000000000000000000000000000000000000..eba3ab4a41c44642c47f1864858094771043dcc7 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511740492.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001511900444.gif b/en/application-dev/ui/figures/en-us_image_0000001511900444.gif new file mode 100644 index 0000000000000000000000000000000000000000..315c82e417d240d0624a8206c9adf47c4c0a3ec3 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511900444.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001511900456.png b/en/application-dev/ui/figures/en-us_image_0000001511900456.png new file mode 100644 index 0000000000000000000000000000000000000000..534c169420509639cf21b30b41d65ccb34758b66 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511900456.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001562700433.gif b/en/application-dev/ui/figures/en-us_image_0000001562700433.gif new file mode 100644 index 0000000000000000000000000000000000000000..b517e892ed6ff4ad337e57d044aa518ff78a8792 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001562700433.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001562940517.png b/en/application-dev/ui/figures/en-us_image_0000001562940517.png new file mode 100644 index 0000000000000000000000000000000000000000..e0a74253389934179d0cbcbaf4a43c01df18f7e5 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001562940517.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001563060689.gif b/en/application-dev/ui/figures/en-us_image_0000001563060689.gif new file mode 100644 index 0000000000000000000000000000000000000000..e44df1b36066095ed6e8741e26d9f04a4c9a2b0b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001563060689.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001563060697.png b/en/application-dev/ui/figures/en-us_image_0000001563060697.png new file mode 100644 index 0000000000000000000000000000000000000000..b46c1ea016b3f018d9729499e3df2b98e10467f9 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001563060697.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001563060705.png b/en/application-dev/ui/figures/en-us_image_0000001563060705.png new file mode 100644 index 0000000000000000000000000000000000000000..e760daef7809d60e1c7b9323bffc267f592c8fc5 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001563060705.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001563060709.png b/en/application-dev/ui/figures/en-us_image_0000001563060709.png new file mode 100644 index 0000000000000000000000000000000000000000..f7e2c38a9b5f22ebf44eaae8eb9fea461d198018 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001563060709.png differ