What is the DependentLayout layout method?

This article mainly explains "what is the DependentLayout layout method". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian and go deep into it slowly to study and learn "what is the DependentLayout layout method" together.

DependentLayout

DependentLayout means relative layout, and there are more arrangements than DirectionalLayout. Each component can specify its position relative to other sibling components, as well as its position relative to parent components. DependentLayout layouts can be used to achieve more complex UI interfaces, and can also be combined with other layouts to create the desired UI interface.

commonly used attributes

Position properties relative to the specified component

xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center"> ohos:id="$+id:text_01" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_dependent_layout" ohos:text="I am the first Text. " ohos:text_size="50" /> ohos:id="$+id:text_02" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_dependent_layout" ohos:text="I am the second Text. " ohos:text_size="50" ohos:above="$id:text_01" />

Change ohos:above="$id:text_01" to ohos:below="$id:text_01" to have the following effect.

Change ohos:above="$id:text_01" to ohos:left_of="$id:text_01", the effect is as follows, and the rest is verified by yourself.

Position properties of child components relative to parent components

xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center"> ohos:id="$+id:text_01" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_dependent_layout" ohos:text="I am the first Text. " ohos:text_size="50" ohos:align_parent_bottom="true" /> ohos:id="$+id:text_02" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_dependent_layout" ohos:text="I am the second Text. " ohos:text_size="50" ohos:align_parent_top="true" /> ohos:id="$+id:text_03" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_dependent_layout" ohos:text="I am the third Text. " ohos:text_size="50" ohos:align_parent_right="true" /> ohos:id="$+id:text_04" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_dependent_layout" ohos:text="I am the fourth Text. " ohos:text_size="50" ohos:center_in_parent="true" />

example

xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent"> ohos:id="$+id:text_01" ohos:height="70vp" ohos:width="match_parent" ohos:background_element="#CCCCCC" ohos:text="Header" ohos:text_alignment="center" ohos:text_size="50" ohos:align_parent_top="true" /> ohos:id="$+id:text_02" ohos:height="match_parent" ohos:width="100vp" ohos:background_element="#5C6E71" ohos:text="LEFT" ohos:text_alignment="center" ohos:text_size="50" ohos:align_parent_left="true" ohos:below="$id:text_01" /> ohos:id="$+id:text_03" ohos:height="match_parent" ohos:width="100vp" ohos:background_element="#5C6E71" ohos:text="Right" ohos:text_alignment="center" ohos:text_size="50" ohos:align_parent_right="true" ohos:below="$id:text_01" /> ohos:id="$+id:text_05" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="#16CCB7" ohos:text_alignment="center" ohos:text="Center" ohos:text_size="50" ohos:right_margin="100vp" ohos:below="$id:text_01" ohos:right_of="$id:text_02" /> ohos:id="$+id:text_04" ohos:height="50vp" ohos:width="match_parent" ohos:background_element="#CCCCCC" ohos:text="Footer" ohos:text_size="50" ohos:align_parent_bottom="true" />

Thank you for reading, the above is "DependentLayout layout method is what" content, after the study of this article, I believe we have a deeper understanding of DependentLayout layout method is what this problem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!