1e41f4b71Sopenharmony_ci# Adaptive Layouts 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ciAn adaptive layout is implemented based on the relationship between a component and its parent container. When the size or position of the parent container changes, the component adapts to the change accordingly. Generally, adaptive layouts can change continuously according to vp or px changes. 4e41f4b71Sopenharmony_ci 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci## Adaptive Stretching 7e41f4b71Sopenharmony_ci 8e41f4b71Sopenharmony_ciThe display width of a component or a group of components is not fixed. Instead, it is determined based on the relative reference object. When the width of the reference object changes, the content width or content spacing adaptively stretches. 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ciStretching: For example, in a list and toggle combination, when the window width changes, the toggle has a fixed width and a fixed position relative to the right edge of the list, whereas the combination and the text width adaptively change. 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ciEqualization: For example, in an icon grid, when the window width changes, the distance between two adjacent entry icons and the distance between the icons and the left and right edges change equally. 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ci 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ciAdaptive stretching applies to content and content combinations that have a flexible display width and are insensitive to the aspect ratio, such as texts, common buttons, and spacing. 19e41f4b71Sopenharmony_ci 20e41f4b71Sopenharmony_ciIf the width after stretching is insufficient to display the default content, ensure the content integrity or others based on the scenario, and use other adaptive methods such as truncation or line feed. 21e41f4b71Sopenharmony_ci 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci 24e41f4b71Sopenharmony_ci 25e41f4b71Sopenharmony_ci## Adaptive Scaling 26e41f4b71Sopenharmony_ci 27e41f4b71Sopenharmony_ciThe display size of a component is not fixed. Instead, it is determined based on the relative reference object. When the size of the reference object changes, the component size adaptively scales. 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ciScaling: For example, no matter how the screen width or height changes, the watch face is always complete and has its width and height determined based on the shorter side. 30e41f4b71Sopenharmony_ci 31e41f4b71Sopenharmony_ci 32e41f4b71Sopenharmony_ci 33e41f4b71Sopenharmony_ciProportion: For example, for an illustration with a subject and a background, the image content is cropped based on the width change and scaled by 50% based on the height change. 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ci 36e41f4b71Sopenharmony_ci 37e41f4b71Sopenharmony_ciAdaptive scaling applies to content with a fixed aspect ratio, such as images, round buttons, banners, and images that reflect the shape of real objects. 38e41f4b71Sopenharmony_ci 39e41f4b71Sopenharmony_ciDo not scale all components or scale a component to a size that exceeds 50% of the screen. Otherwise, the information that users can obtain decreases. 40e41f4b71Sopenharmony_ci 41e41f4b71Sopenharmony_ci 42e41f4b71Sopenharmony_ci 43e41f4b71Sopenharmony_ci 44e41f4b71Sopenharmony_ci## Adaptive Extension 45e41f4b71Sopenharmony_ci 46e41f4b71Sopenharmony_ciThe number of displayed components is not fixed. Instead, it is determined based on the relative reference object. When the width of the reference object changes, the number of displayed components adaptively extends. 47e41f4b71Sopenharmony_ci 48e41f4b71Sopenharmony_ciExtension: For example, the last content of a subtab or sliding grid is partially exposed under the default width, indicating that there are more components on the right. When the screen width changes, more components are displayed while each component has a fixed width and supports the sliding interaction. 49e41f4b71Sopenharmony_ci 50e41f4b71Sopenharmony_ci 51e41f4b71Sopenharmony_ci 52e41f4b71Sopenharmony_ciHiding: For example, music playback buttons in the same row have different priorities. When the screen width changes, the buttons with lower priorities can be hidden. 53e41f4b71Sopenharmony_ci 54e41f4b71Sopenharmony_ci 55e41f4b71Sopenharmony_ci 56e41f4b71Sopenharmony_ciAdaptive extension applies to content that has the same interaction level and can be filled with more data, such as tabs, operation blocks, and recommendation columns. 57e41f4b71Sopenharmony_ci 58e41f4b71Sopenharmony_ciNote: You need to determine whether the hidden content affects the function integrity, and consider using sliding or the **More** button to display the hidden content. 59e41f4b71Sopenharmony_ci 60e41f4b71Sopenharmony_ci 61e41f4b71Sopenharmony_ci## Adaptive Wrapping 62e41f4b71Sopenharmony_ci 63e41f4b71Sopenharmony_ciA component with the wrapping feature can present a vertical or horizontal layout based on the available space of the parent container. 64e41f4b71Sopenharmony_ci 65e41f4b71Sopenharmony_ciFor example, when the width of the parent container is sufficient, the operation blocks are located in a same row. When the width reduces, they are arranged vertically. 66e41f4b71Sopenharmony_ci 67e41f4b71Sopenharmony_ci 68e41f4b71Sopenharmony_ci 69e41f4b71Sopenharmony_ciAdaptive wrapping applies to content that has the same interaction level and wants to ensure type and quantity integrity, such as tabs, operation blocks, and content streams.
