Layouts are classified into adaptive layout and responsive layout. The following table introduces the two types of layouts.
Type | Description |
|---|---|
Adaptive layout | Elements can automatically adapt to changes in the external container size based on their relative relationships, which include the proportion, fixed aspect ratio, and display priority. The available adaptive layout capabilities include stretching, equal space distribution, proportional scaling, scaling, extension, hiding, and wrapping. These capabilities enable UIs to continuously change with the size of the external container. |
Responsive layout | Elements can automatically adapt to changes in the external container size based on breakpoints, grid systems, or specific characteristics (such as screen orientation or window dimensions). The available responsive layout capabilities include breakpoints, media query, and grids. These capabilities enable the UI to adjust in response to discrete changes in its container's size. The layout can vary significantly under different conditions. |
The adaptive layout primarily addresses layout differences within individual areas of a page, while the responsive layout focuses on layout relationships between different areas of a page.
Both adaptive and responsive layouts are typically implemented using or in combination with container components.
The adaptive layout is often implemented using the Row, Column, or Flex component.
Container
Description
Stretching
Equal Space Distribution
Proportional Scaling
Row
Container that lays out child components horizontally.
Add the Blank child component.
Set the justifyContent property of the component to FlexAlign.SpaceEvenly.
Set the width and height of the child component as percentages, or set the layoutWeight property of the child component.
Column
Container that lays out child components vertically.
Add the Blank child component.
Set the justifyContent property of the component to FlexAlign.SpaceEvenly.
Set the width and height of the child component as percentages, or set the layoutWeight property of the child component.
Flex
Container that allows for flexible layout of child components.
Add the Blank child component, or set the flexGrow and flexShrink properties of the child component.
Set the justifyContent property of the component to FlexAlign.SpaceEvenly.
Set the width and height of the child component as percentages, or set the layoutWeight property of the child component.
Container
Description
Scaling
Extension
Hiding
Wrapping
Row
Container that lays out child components horizontally.
Configure the aspectRatio property of the component.
Add the Scroll parent component.
Configure the displayPriority property of the child component.
—
Column
Container that lays out child components vertically.
Configure the aspectRatio property of the component.
Add the Scroll parent component.
Configure the displayPriority property of the child component.
—
Flex
Container that allows for flexible layout of child components.
Configure the aspectRatio property of the component.
—
Configure the displayPriority property of the child component.
Set the wrap property of the component to FlexWrap.Wrap.
The responsive layout is often used with the GridRow, Grid, List, Swiper, or Tabs component.
Container
Description
Responsive Layout
GridRow
Container that lays out child components using breakpoints and grids.
Used with the GridCol child component.
Used in the responsive layout independently.
Grid
Grid container that lays out child components using grids formed by rows and columns.
Used with the GridItem child component.
Used with breakpoints to implement responsive layout by changing its properties such as rowsTemplate and columnsTemplate at different breakpoints.
List
Container that holds a series of list items with uniform width.
Used with the ListItem child component.
Used with breakpoints to implement responsive layout by changing its properties such as lanes at different breakpoints.
Swiper
Container for carousel display of child components.
Used with breakpoints to implement responsive layout by changing its properties such as displayCount and indicator at different breakpoints.
Tabs
Container that enables content switching through tab controls, where each tab corresponds to a content view.
Used with the TabContent child component.
Used with breakpoints to implement responsive layout by changing its properties such as vertical and barPosition at different breakpoints.
This section will sequentially introduce both adaptive and responsive layouts. Detailed usage of these layout capabilities is shown through practical implementations in both typical layout scenarios and page scenarios.