​

Hello everyone, I am your friend Peng Ge. Today, Peng Ge starts to study Hong Meng. I will write some articles to share with you.

The previous original article interpreted the relative layout of hongmeng development layout, is a very convenient layout interface typesetting, some more complex interface can be achieved through the layout.

Stack layouts do not work as well as linear and relative layouts. You can do some stacked layouts, using properties to set positions. Here is a simple use of stack layouts.

Brief introduction:

StackLayout creates a blank area of the screen directly. Views added to the layout are displayed in a cascading manner, and by default they are placed in the upper left corner of the area, with the first view added to the layout displayed at the bottom and the last view placed at the top. The view at the top overwrites the view at the bottom.

1, 2, and 3 in the figure above are in sequence, with the last 3 on the top layer.

Supported XML attributes

The attribute name

Product description

The values

The values that

Use case

layout_alignment

alignment

left

Represents left aligned.

Can set the value of items such as listed in the table, you can also use the multiple combination “|”.

ohos:layout_alignment=”top”

ohos:layout_alignment=”top|left”

top

Represents top alignment.

right

Indicates right alignment.

bottom

Represents bottom alignment.

horizontal_center

Indicates horizontally centered alignment.

vertical_center

Indicates vertical center alignment.

center

Indicates center alignment.

This layout has fewer attributes than other layouts. You can verify it one by one.

The instance

Let’s add a stack layout by default.

Code:

<? The XML version = "1.0" encoding = "utf-8"? > <StackLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:id="$+id:stack_layout" ohos:height="match_parent" ohos:width="match_parent"> <Text ohos:id="$+id:text_blue" ohos:text_alignment="bottom|horizontal_center" Ohos :text_size="24fp" oHOs :text=" first layer "oHOs :height="200vp" oHOs :width="200vp" oHOs :background_element="#3F56EA" /> < text Ohos: id = "+ $id: text_light_purple" ohos: text_alignment = "bottom | horizontal_center" ohos: text_size = "24 fp ohos: text =" the second" ohos:height="150vp" ohos:width="150vp" ohos:background_element="#00AAEE" /> <Text ohos:id="$+id:text_orange" Ohos :text_alignment="center" oHOs :text_size=" 24FP "OHOs :text=" third" oHOs :height="80vp" oHOS :width=" 80VP" ohos:background_element="#00BFC9" /> </StackLayout>Copy the code

The default layout for components in StackLayout is in the upper left corner of the zone, and components created later are in the upper layer.

Use of attributes:

Code explanation:

See comments in the code……

<? The XML version = "1.0" encoding = "utf-8"? > <StackLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:id="$+id:stack_layout" ohos:height="match_parent" ohos:width="match_parent"> <Text ohos:id="$+id:text_blue" ohos:text_alignment="bottom|horizontal_center" Ohos :text_size=" 24FP "oHOS :text=" First layer" oHOs :height=" 200VP "OHOS :width=" 200VP" OHOS :layout_alignment="bottom" // Sets the relative stack alignment /> <Text ohos:id="$+id:text_light_purple" | ohos: text_alignment = "bottom" horizontal_center ohos: text_size = "24 fp ohos: text =" the second "ohos: height =" 150 vp" Ohos :width=" 150VP "OHOS :layout_alignment="right" // Set to the right oHOS: background_Element ="#00AAEE" /> <Text Ohos :id="$+ ID :text_orange" oHOs :text_alignment="center" oHOs :text_size=" 24FP "oHOs :text=" third layer" oHOs :height=" 80VP" Ohos :layout_alignment="left" oHOS :background_element="#00BFC9" /> </StackLayout>Copy the code

Cascading movement properties:

If you want to the bottom of the component to move to the top, you can use the stackLayout. MoveChildToFront (component); Properties.

Pay attention to the public number [programmer chat programming], background reply [Hongmeng], you can obtain thousands of hongmeng open source components ~

Original is not easy, useful attention. I’ll give you a triple if I help you. Thanks for your support.

Feel good friends, remember to help me like and attention yo, pen xin pen xin ~**

Author: code worker

Have a question please leave a message or private message, you can search wechat: programmer chat programming, pay attention to the public number to get more free learning materials.