README.md
1# AtomicLayout<a name="EN-US_TOPIC_0000001126159786"></a>
2
3### Introduction<a name="section104mcpsimp"></a>
4
5This sample illustrates style attributes related to layout effect adaptation, including the hiding feature, proportion feature, and fixed ratio.
6
7With the hiding feature, you can adjust the display priority of components in a container in the horizontal or vertical direction.
8
9With the proportion feature, you can adjust the proportion of each component in a container so that each of them is always arranged in a proportional space of the container.
10
11You can scale up or down a component with fixed ratio while retaining its aspect ratio.
12
13### Usage<a name="section110mcpsimp"></a>
14
15In this sample, there are three buttons on the home screen. You can click them to display the corresponding screen.
16
17On the feature display screen, the rectangle in light yellow is a container, and it accommodates three components: A, B, and C. You can click the buttons to change the size of the components and display them in different ways.
18
19### Constraints<a name="section116mcpsimp"></a>
20
21- The hiding and proportion features must be used in a flex layout that does not support cross-row display.
22- This sample can only be run on mini-system devices.
23
24
README_zh.md
1# 原子布局
2
3### 简介
4
5本示例展示了布局效果自适应的相关样式属性，包括隐藏能力、占比能力和固定比例。
6
7实现效果如下：
8
9
10
11### 相关概念
12
13隐藏能力：可以调整组件内元素水平/垂直方向的显示优先级。
14
15占比能力：可以调整指定元素始终在容器的某一比例空间中进行布局。
16
17固定比例：可以以固定的比例调整组件的宽高尺寸。
18
19### 相关权限
20
21不涉及。
22
23### 使用说明
24
251.本示例主界面为三个按钮，点击后在新页面分别展示。
26
272.在能力展示页面中，浅黄色背景为父容器，A、B、C为其中三个子元素，点击**按钮**可改变子容器大小，子元素显示会随之改变。
28
29### 约束与限制
30
311.隐藏能力与占比能力需在非折行的flex布局中使用。
32
332.本示例支持在标准系统使用。
34
353.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。
