HarmonyOS UI开发 StackLayout(堆栈布局) 的使用

StackLayout是什么

StackLayout 是堆栈布局,直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。

注意:StackLayout无自有的XML属性

StackLayout示意图

代码如下

<?xml version="1.0" encoding="utf-8"?>
<StackLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button1"ohos:height="300fp"ohos:width="300fp"ohos:background_element="#ddd333"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="200fp"ohos:width="200fp"ohos:background_element="#00d8a0"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="100fp"ohos:width="100fp"ohos:background_element="#EA0000"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button4"ohos:height="50fp"ohos:width="50fp"ohos:background_element="#0000C6"ohos:text="OS"ohos:text_size="20fp"/></StackLayout>

StackLayout所包含组件可支持的XML属性

属性名称	中文描述	取值	取值说明	使用案例
layout_alignment	对齐方式	left	表示左对齐。	可以设置取值项如表中所列，也可以使用“\|”进行多项组合。 ohos:layout_alignment="top" ohos:layout_alignment="top\|left"
		top	表示顶部对齐。
		right	表示右对齐。
		bottom	表示底部对齐。
		horizontal_center	表示水平居中对齐。
		vertical_center	表示垂直居中对齐。
		center	表示居中对齐。

demo练习

<?xml version="1.0" encoding="utf-8"?>
<StackLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="300fp"ohos:width="match_parent"><Buttonohos:id="$+id:button1"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="left"ohos:background_element="#ddd333"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="right"ohos:background_element="#00d8a0"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="bottom"ohos:background_element="#EA0000"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button4"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="right|bottom"ohos:background_element="#0000C6"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button5"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="center"ohos:background_element="#0000C6"ohos:text="OS"ohos:text_size="20fp"/></StackLayout>

效果图如下：

官方参考地址链接

其他的布局

HarmonyOS UI开发 TableLayout(表格布局) 的使用

HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用

HarmonyOS UI开发 PositionLayout(位置布局) 的使用

HarmonyOS UI开发 DependentLayout(依赖布局) 的使用

HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用

HarmonyOS UI开发 StackLayout(堆栈布局) 的使用相关推荐

HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用
AdaptiveBoxLayout 是什么 AdaptiveBoxLayout 是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自 ...
HarmonyOS UI开发 TableLayout(表格布局) 的使用
TableLayout 是什么 TableLayout 是表格布局,就是使用表格的方式划分子组件, 个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和Dependent ...
HarmonyOS UI开发 PositionLayout(位置布局) 的使用
PositionLayout 是什么 PositionLayout 是位置布局,在PositionLayout中,子组件通过指定准确的x/y坐标值在屏幕上显示.(0, 0)为左上角:当向下或向右移动时 ...
HarmonyOS UI开发 DependentLayout(依赖布局) 的使用
DependentLayout是什么 DependentLayout是依赖布局,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置.(类似Android的相对布局) Dependen ...
HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用
DirectionalLayout 是什么 DirectionalLayout 是定向布局,控件水平或垂直排列(类似Android 的线性布局不过还是有区别的) DirectionalLayout的自 ...
HarmonyOS UI 开发 vp ,fp , px 以及写具体数字的理解
HarmonyOS 开发UI 距离和字体使用什么单位距离使用 vp (virtual pixel) 字体大小使用 fp (font pixel) 详细了解 vp ,fp , px 虚拟像素单位:vp ...
2.4【HarmonyOS鸿蒙开发】堆栈布局StackLayout
作者:韩茹公司:程序咖(北京)科技有限公司鸿蒙巴士专栏作家 StackLayout直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左 ...
HarmonyOS UI开发 match_parent与match_content
match_parent: 表示组件大小将扩展为父组件允许的最大值,它将占据父组件方向上的剩余大小 match_content: 表示组件大小与它的内容占据的大小范围相适应. 两者详细说明: 下面看下 ...
harmonyos上的程序用什么语言写,HarmonyOS应用开发 — HelloWorld应用开发E2E体验
感谢关注HarmonyOS,为了便于大家学习特将鸿蒙2.0基础教学内容整理如下: 1.HarmonyOS应用开发-视频播放 https://developer.huawei.com/consumer/ ...

HarmonyOS UI开发 StackLayout(堆栈布局) 的使用

StackLayout是什么

StackLayout所包含组件可支持的XML属性

demo练习

HarmonyOS UI开发 StackLayout(堆栈布局) 的使用相关推荐

最新文章

热门文章