The ArkUI framework of HarmonyOS provides a system of responsive components based on the declarative UI paradigm. This system binds breakpoints to component attributes so that you can predefine different layout parameters (such as columns and spans) and styles (such as font size and margin) for different window sizes. When the window size crosses a breakpoint, the framework recalculates layout and swaps style for the component instance. In this way, the layout can be adapted in real time in scenarios such as portrait-to-landscape switching on a mobile phone, folded-to-unfolded switching on a foldable device, and screen splitting, achieving one-time development for multi-device deployment.
The following table lists the mappings between common responsive components of the ArkUI framework and the implementable layout scenarios.
Responsive Component | Layout Scenario | Responsive Layout Mode |
|---|---|---|
List | List repetition | Repetition layout |
WaterFlow | Waterfall repetition | |
Swiper | Carousel repetition | |
Grid | Grid repetition | |
SideBarContainer | Sidebar | Split-view layout |
Navigation | Single-column or two-column | |
Navigation+SideBarContainer | Three-column | |
Tabs | Bottom/Side navigation | Orientation layout |
GridRow/GridCol | Images and text | |
Single-column list | Indentation layout |
The following describes how responsive components dynamically adjust attributes to adapt to different layouts for multi-device deployment. Only common attributes of responsive components are described in this topic.
List
Attribute | Description |
|---|---|
Sets the number of columns or rows and the gap between columns of the List component. |
The following figures show the list repetition layouts. For details about the implementation solution and sample code, see List Layout.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
WaterFlow
Attribute | Description |
|---|---|
If the layout information in the window needs to be prioritized or the number of columns needs to be dynamically switched, the SLIDING_WINDOW mode is recommended. For details, see Dynamically Adjusting the Column Count. | |
Sets the number of columns in the waterfall layout. | |
Sets the gap between columns. | |
Sets the size constraints of the child components of the WaterFlow component. |
The following figures show the waterfall repetition layouts. For details about the implementation solution and sample code, see Waterfall Layout.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
Swiper
Attribute | Description |
|---|---|
Sets the index of the child component to be displayed by default. | |
Sets whether to display the navigation indicator and its style. | |
Sets the number of elements displayed in the Swiper component's viewable area. | |
Sets the trailing margin to reveal a portion of the next item. | |
Sets the leading margin to reveal a portion of the previous item. | |
Sets the index based on breakpoints. For example, if displayCount is set to 3, meaning three images are displayed at the lg horizontal breakpoint, the image group whose index includes index, index+1, and index+2 is displayed. In this case, the index (index+2) of the rightmost image is returned. |
The following figures show the carousel layouts. For details about the implementation solution and sample code, see Carousel Layout.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
Grid
Attribute | Description |
|---|---|
Sets the number of columns of the grid layout. | |
Sets the number of rows in the grid layout. | |
Sets the gap between columns. | |
Sets the gap between rows. |
The following figures show the grid layouts. For details about the implementation solution and sample code, see Grid Layout.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
SideBarContainer
Attribute | Description |
|---|---|
Sets whether to display the sidebar by default. | |
Sets the type of the sidebar inside the container. | |
Sets the width of the sidebar. | |
Sets the minimum width of the sidebar. | |
Sets the maximum width of the sidebar. |
The following figure shows the sidebar layouts. For details about the implementation solution and sample code, see Sidebar Layout.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
Navigation
Attribute | Description |
|---|---|
Sets the display mode of the navigation bar to a single column or two columns. | |
Sets the width of the navigation bar. |
The following figure shows the single/dual-column layouts. For details about the implementation solution and sample code, see Page Layouts.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Attribute | Navigation bar and content area displayed in a single column | Navigation bar and content area displayed in two separate columns Width of the navigation bar: 50% | Navigation bar and content area displayed in two separate columns Width of the navigation bar: 50% |
Demo |
|
|
|
SideBarContainer+Navigation
SideBarContainer Attribute | Description |
|---|---|
Sets whether to display the sidebar by default. | |
Sets the width of the sidebar. | |
Sets the minimum width of the sidebar. | |
Sets the maximum width of the sidebar. |
Navigation Attribute | Description |
|---|---|
Sets the display mode of the navigation bar to a single column or two columns. | |
Sets the width of the navigation bar. |
The following figure shows the triple-column layouts. For details about the implementation solution and sample code, see Page Layouts.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
Tabs
Attribute | Description |
|---|---|
Sets whether to use vertical tabs or horizontal tabs. | |
Sets the tab position. | |
Sets the tab bar layout mode and the tab bar layout style in scrollable mode. | |
Sets the width of the tab bar. | |
Sets the height of the tab bar. |
The following figure shows the bottom/side navigation layouts. For details about the implementation solution and sample code, see Page Layouts.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
GridRow/GridCol
The grid layout consists of the GridRow container and the child component GridCol. You can adjust different attributes to implement the orientation layout and indentation layout.
GridRow Property | Description |
|---|---|
Sets the number of columns in the grid container. | |
Sets the breakpoint value to be the same as the horizontal breakpoint value. |
GridCol Property | Description |
|---|---|
Sets the number of columns occupied by the grid child component. | |
Sets the number of offset columns relative to the original position of the grid child component. | |
Set the sequence number of the grid child component. |
Orientation Layout
The following figure shows the image-text combined layouts. For details about the implementation solution and sample code, see Page Layouts.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
Indentation Layout
The following figures show the single-column list layouts. For details about the implementation solution and sample code, see Page Layouts.
Horizontal Breakpoint | sm | md | lg |
|---|---|---|---|
Demo |
|
|
|
