当前位置 博文首页 > 程序员漫话编程的博客:鸿蒙应用开发 | 6大布局之 堆叠布局(Stac
大家好,我是你们的朋友 朋哥,今天开始朋哥开始研究鸿蒙了,会写一些文章分享给大家,希望多多提意见。
上一篇原创文章?解读了?鸿蒙开发布局的相对布局,是界面排版很方便的布局,有些比较复杂的界面可以通过该布局来实现。
堆叠布局相对于 线性布局和相对布局来说?作用不大,可以做一些层叠加的布局,通过属性来设置位置,下面来看看他的简单使用。
简介:
StackLayout直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中视图显示在最底层,最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。
上图中的 1,2,3是先后次序,最后的3是在最上面的一层。?
属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
---|---|---|---|---|
layout_alignment | 对齐方式 | left | 表示左对齐。 | 可以设置取值项如表中所列,也可以使用“|”进行多项组合。 ohos:layout_alignment="top" ohos:layout_alignment="top|left" |
top | 表示顶部对齐。 | |||
right | 表示右对齐。 | |||
bottom | 表示底部对齐。 | |||
horizontal_center | 表示水平居中对齐。 | |||
vertical_center | 表示垂直居中对齐。 | |||
center | 表示居中对齐。 | |||
? | ? | |||
? | ? |
相对于其它布局,该布局的属性比较少。可以一个一个验证一下。
实例
布局中我们默认添加一个?堆叠布局,看看效果是什么?
代码:
<?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="第一层"
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="24fp"
ohos:text="第二层"
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="第三层"
ohos:height="80vp"
ohos:width="80vp"
ohos:background_element="#00BFC9" />
</StackLayout>
StackLayout中组件的布局默认在区域的左上角,并且以后创建的组件会在上层。
属性的使用:
代码讲解:
查看代码中的 注释......???????
<?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="第一层"
ohos:height="200vp"
ohos:width="200vp"
ohos:layout_alignment="bottom" // 设置相对 堆叠布局 放在底部
ohos:background_element="#3F56EA" />
<Text
ohos:id="$+id:text_light_purple"
ohos:text_alignment="bottom|horizontal_center"
ohos:text_size="24fp"
ohos:text="第二层"
ohos:height="150vp"
ohos:width="150vp"
????????ohos:layout_alignment="right"?//设置放在右部
ohos:background_element="#00AAEE" />
<Text
ohos:id="$+id:text_orange"
ohos:text_alignment="center"
ohos:text_size="24fp"
ohos:text="第三层"
ohos:height="80vp"
ohos:width="80vp"
????????ohos:layout_alignment="left" //?放在左部
ohos:background_element="#00BFC9" />
</StackLayout>
层叠移动的属性:
如果你想把最底层的 组件移动到最上层,可以使用??
stackLayout.moveChildToFront(component); ?属性。
?
关注公众号【程序员漫话编程】,后台回复【鸿蒙】,即可获取上千鸿蒙开源组件~
原创不易,有用就关注一下。要是帮到了你 就给个三连吧,多谢支持。
?
觉得不错的小伙伴,记得帮我?点个赞和关注哟,笔芯笔芯~**
作者:码工
?
有问题请留言或者私信,可以 微信搜索:程序员漫话编程,关注公众号获得更多免费学习资料。
cs