Declarative UI provides the following 8 common layouts. Developers can choose the appropriate layout for page development based on actual application scenarios.
| layout |
Application scenarios |
|---|---|
| Linear layout(Row, Column) |
If there are more than 1 child elements in the layout and they can be arranged linearly in some way, this layout will be given priority. |
| layer transfer station(Stack) |
Priority is given to this layout when the component needs to have a stacking effect. The stacking effect of the cascading layout will not occupy or affect the layout space of other sub-components in the same container. For example, when Panel pops up as a subcomponent, it is more reasonable to cover other components. In this case, priority is given to using stacked layout on the outer layer. |
| 弹性cloth(Flex) |
Flexible layout is a layout method similar to linear layout. The difference is that elastic layout can compress or stretch child components by default. This layout is used first when subcomponents need to calculate the stretching or compression ratio, so that subcomponents in multiple containers can have a better visual filling effect of the container. |
| Sagamibu Bureau(RelativeContainer) |
Relative layout is a layout method in a two-dimensional space. It does not need to follow the rules of linear layout and the layout method is more free. By setting anchor rules (AlignRules) on the subcomponent, the subcomponent can align its position in the horizontal axis and vertical axis with the position of the container or other subcomponents within the container. The set anchor point rules can naturally support the compression, stretching, stacking or multi-line effect of sub-elements. It is recommended to use it when the distribution of page elements is complex or when the linear layout will make the nesting level of the container too deep. |
| Grid Layout(GridRow, GridCol) |
Grid is a universal auxiliary positioning tool in multi-device scenarios by dividing space into regular grids. Grid is different from the fixed space division of grid layout. It can realize different layouts under different devices, and space division is more arbitrary, thus significantly reducing the design and development costs of adapting to different screen sizes, making the overall design and development process more efficient. It provides a sense of order and rhythm, while also ensuring the coordination and consistency of application display on multiple devices, improving user experience. It is recommended to use different devices such as mobile phones, large screens, and tablets with the same content but different layouts. |
| Media Query(@ohos.mediaquery) |
Media queries can modify the application's style according to different device types or different states of the same device. For example, design different layouts based on different attribute information of the device and application, and update the application's page layout when the screen changes dynamically. |
| Column table(List) |
Use lists to display structured, scrollable information easily and efficiently. In ArkUI, lists have vertical and horizontal layout capabilities and the ability to adaptively arrange the number of items in the cross-axis direction. They can be scrolled when they exceed the screen. Lists are suitable for presenting homogeneous data types or sets of data types, such as images and text. |
| 网格（Grid） |
Grid layout has strong page equalization capabilities and the ability to control the proportion of sub-components. It is an important adaptive layout. Grid layout can control the number of grids occupied by elements, set subcomponents to span several rows or columns, and adjust all subcomponents and spacing proportionally when the size of the grid container changes. It is recommended to use it in layout scenarios that require fixed proportions or even distribution of space, such as calculators, photo albums, calendars, etc. |
| 轮播（Swiper） |
Carousel components are usually used to implement ad rotation, image preview, scrollable applications, etc. |
Commonly used layout containers in ArkUI
1. Linear layout (Row/Column)
column:The sub-elements are arranged vertically;
Row:The sub-elements are arranged horizontally;
Column() {
...
}.justifyContent(FlexAlign.Start)
Row() {
...
}.justifyContent(FlexAlign.Start)
Configure the spindle using the justifyContent attribute
- justifyContent(FlexAlign.Start): The elements are aligned at the beginning of the main axis, the first element is aligned with the beginning of the line, and subsequent elements are aligned with the previous one.
- justifyContent(FlexAlign.Center): The elements are centered in the main axis direction. The distance between the first element and the beginning of the line is the same as the distance between the last element and the end of the line.
- justifyContent(FlexAlign.End): The elements are aligned tail-aligned in the main axis direction, the last element is aligned with the end of the line, and other elements are aligned with the next one.
- justifyContent(FlexAlign.Spacebetween): distribute elements evenly in the main axis direction, and the distance between adjacent elements is the same. The first element is aligned to the beginning of the line, and the last element is aligned to the end of the line.
- justifyContent(FlexAlign.SpaceAround): distribute elements evenly in the main axis direction, and the distance between adjacent elements is the same. The distance between the first element and the beginning of the line and the distance between the last element and the end of the line is half the distance between adjacent elements.
- justifyContent(FlexAlign.SpaceEvenly): distribute elements evenly along the main axis. The distance between adjacent elements, the distance between the first element and the beginning of the line, and the distance between the last element and the end of the line are exactly the same.
Column() {
...
}.alignItems(HorizontalAlign.Start)
Column() {
...
}.alignItems(HorizontalAlign.Start)
Set cross axis using alignItems property
- HorizontalAlign.Start: child elements are left aligned horizontally
- HorizontalAlign.Center: child elements are aligned horizontally in the center
- HorizontalAlign.End: Child elements are right-aligned horizontally.
- VerticalAlign.Top: child elements are aligned at the top vertically
- VerticalAlign.Center: child elements are aligned vertically in the center
- VerticalAlign.Bottom: Child elements are aligned at the bottom vertically
2. Stack layout (Stack)
Stack({ alignContent: Alignment.BottomStart })
3. Flexible layout (Flex)
4. Grid layout (Grid)
Grid() {
...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')
Grid() {
GridItem() {}
GridItem() {}
GridItem() {}
.columnStart(1)
.columnEnd(2)
GridItem() {}
.rowStart(1)
.rowEnd(2)
GridItem() {}
GridItem() {}
GridItem() {}
GridItem() {}
.columnStart(1)
.columnEnd(3)
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(8)
.rowsGap(8)
