An Overview of the Layout System in HarmonyOS Next —— Adaptive Layout and Responsive Layout

This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system and summarize them based on practical development practices. It mainly serves as a medium for technical sharing and communication. There may inevitably be some errors or omissions. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together. This article is original content, and any form of reprint must indicate the source and the original author.

In the vast field of HarmonyOS Next development, layout capabilities are undoubtedly the cornerstone of building high-quality application interfaces. Today, let's talk about the crucial adaptive layout and responsive layout, and uncover their mysteries.

Core Concepts of Layout

In HarmonyOS Next development, layout is like the framework design when building a house, determining the placement and display mode of each element on the page. And the adaptive layout and responsive layout are two core systems within this framework design.

The magic of the adaptive layout lies in its ability to automatically adjust the layout of internal elements according to the change in the size of the external container. Imagine a page with an adaptive layout, which is like an intelligent bookshelf. When the width of the bookshelf becomes wider, the books will automatically adjust their arrangement to make the most of the space; when the bookshelf becomes narrower, the books will be arranged more compactly to avoid a large amount of blank space. In terms of code implementation, components such as Row, Column, or Flex are often used. By setting stretching capabilities (such as the flexGrow and flexShrink properties in Flex layout), equal division capabilities (setting the justifyContent property of the Row, Column, or Flex component to FlexAlign.SpaceEvenly), and proportion capabilities (setting the width and height of sub-components as a percentage of the width and height of the parent component or using the layoutWeight property), the adaptive effect of the interface can be achieved.

The responsive layout is more like a "chameleon" that can automatically change the layout according to specific characteristics (such as window width, screen orientation, etc.). It divides the window width into different breakpoints and changes the page layout at different breakpoints, so as to present the best display effect on different devices. For example, it may be a single-column layout on a mobile phone and become a double-column layout on a tablet. To achieve a responsive layout, it is often used in combination with components such as GridRow, Grid, List, Swiper, or Tabs, and the goal is achieved by adjusting the properties of these components at different breakpoints.

Adaptive Layout vs Responsive Layout

To help you understand the differences between the two more clearly, let's take a look at the following comparison table:
| Comparison Item | Adaptive Layout | Responsive Layout |
| --- | --- | --- |
| Applicable Scenarios | Mainly solves the layout differences within each area of the page, and is suitable for scenarios where when the container size changes, the component structure remains unchanged, and only the size and position are adjusted | Mostly used to solve the layout differences between each area of the page, and is suitable for scenarios where when the screen sizes of different devices and the window sizes change greatly, the component structure needs to be changed |
| Characteristics | Focuses on the automatic adjustment of components within the container to maintain the stability of the basic layout structure | Emphasizes dynamically changing the page layout structure according to different breakpoints to adapt to various device forms |
| Implementation Method | With the help of Row, Column, and Flex components, using capabilities such as stretching, equal division, and proportion | Used in combination with components such as GridRow, Grid, and List, and achieved by setting properties at breakpoints (such as the columnsTemplate property of the Grid component and the lanes property of the List component) |
| Characteristics of Layout Changes | The layout changes are relatively continuous and smooth, and can adapt to container changes within a certain range | The layout changes usually change significantly at the breakpoints, presenting different layout styles |

Basic Ideas for Multi-terminal Adaptation

In actual development, choosing the appropriate layout strategy according to the device type is the key to achieving multi-terminal adaptation. HarmonyOS Next supports a variety of device types, such as default (default device), tablet, tv, wearable, 2in1, etc.

For devices with similar screen sizes and interaction methods, such as the default device and the tablet, the adaptive layout should be given priority. Because these devices have certain similarities in layout, the adaptive layout can meet most of the layout requirements and reduce the development cost at the same time. For example, in a news application, the article content area can use an adaptive layout to ensure that the text layout remains clear and readable on screens of different sizes.

For devices with large differences in screen size and different interaction methods, the responsive layout is more advantageous. Take an e-commerce application as an example. On a mobile phone, the product list may be displayed in a single column, which is convenient for users to operate with one hand; on a tablet or a large-screen device, through the responsive layout, it can be switched to a multi-column display, which can display more product information and enhance the user's shopping experience.

When determining the device type, you can use the command line (such as hdc shell param get "const.product.devicetype") or use deviceInfo query during the application development process (import { deviceInfo } from '@kit.BasicServicesKit'). After obtaining the device type, select the appropriate layout method according to the characteristics of the device.

The following is a simple code example to show how to apply different layouts according to the device type:

import { deviceInfo } from '@kit.BasicServicesKit'
@Entry
@Component
struct DeviceLayout {
    @State deviceType: string = 'unknown'
    aboutToAppear() {
        this.deviceType = deviceInfo.deviceType
    }
    build() {
        Column() {
            if (this.deviceType === 'tablet') {
                // Use a responsive layout for tablet devices, such as using the GridRow component to achieve a multi-column layout
                GridRow() {
                    GridCol({ span: { sm: 6, md: 4, lg: 3 } }) {
                        Text('Tablet layout content 1')
                    }
                    GridCol({ span: { sm: 6, md: 4, lg: 3 } }) {
                        Text('Tablet layout content 2')
                    }
                }
            } else {
                // Use an adaptive layout for the default device, such as using the Flex component to achieve a simple layout
                Flex({ direction: FlexDirection.Column }) {
                    Text('Default device layout content 1')
                    Text('Default device layout content 2')
                }
            }
        }
       .width('100%')
       .height('100%')
    }
}

In HarmonyOS Next development, deeply understanding and flexibly using the adaptive layout and responsive layout, and reasonably choosing the layout strategy according to the device type are the keys to creating high-quality applications with multi-terminal adaptation. It is hoped that through this article, everyone can have a deeper understanding of these two layout methods and be more proficient in development practices.