2024年鸿蒙最全鸿蒙HarmonyOS实战-ArkUI组件（Stack）_harmonyos stack(3)，全套教学资料

2401_84851314

于 2024-05-15 09:21:46 发布

阅读量406

点赞数 4

分类专栏：程序员文章标签：鸿蒙面试学习

本文链接：https://blog.csdn.net/2401_84851314/article/details/138891390

版权

程序员专栏收录该内容

57 篇文章 0 订阅

订阅专栏

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

Stack作为容器，容器内的子元素（子组件）的顺序为Item1->Item2->Item3
在这里插入图片描述

2.开发布局

Stack布局的核心思想是将多个控件按照一定顺序叠放在一起，比如，一个图像控件在上面，一个文本控件在下面。这种布局方式可以让应用程序在不同的屏幕尺寸和分辨率下，以及不同的设备上呈现出更加统一的效果。同时，Stack布局还支持一些特殊的效果，比如在界面上实现弹出效果、拖拽效果等等。

在HarmonyOS中，开发者可以通过使用ArkUI提供的Stack布局来快速构建具有层叠效果的界面。Stack布局支持多种控件的布局方式，比如文本、图像、按钮等等。开发者可以根据自己的需要选择不同的控件进行布局。通过合理的设计和排布，可以让应用程序在不同的设备上呈现出更加统一、美观的效果。

具有如图：

Column(){
Stack({ }) {
Column(){}.width(‘90%’).height(‘100%’).backgroundColor(‘#ff58b87c’)
Text(‘text’).width(‘60%’).height(‘60%’).backgroundColor(‘#ffc3f6aa’)
Button(‘button’).width(‘30%’).height(‘30%’).backgroundColor(‘#ff8ff3eb’).fontColor(‘#000’)
}.width(‘100%’).height(150).margin({ top: 50 })
}

在这里插入图片描述

3.对齐方式

ArkUI中Stack的alignContent属性用于定义Stack内的所有子元素在交叉轴上的排列方式。该属性仅在Stack容器内含有多行子元素时才会生效。
在这里插入图片描述

4.Z序控制

在HarmonyOS中，层叠布局(Stack)的zIndex属性用于指定子布局的叠放顺序，决定了子布局的显示先后顺序。zIndex属性值较大的子布局会在zIndex属性值较小的子布局的上方显示。例如，zIndex属性值为2的子布局会在zIndex属性值为1的子布局的上方显示。

如果两个子布局的zIndex属性值相同，则它们的显示顺序将按照它们在布局中的位置确定。越靠后的子布局会在越靠前的子布局的上方显示。

值得注意的是，只有在使用层叠布局(Stack)时，zIndex属性才会起作用。如果使用线性布局或网格布局等其他类型的布局，则zIndex属性不会起作用。

Stack({ alignContent: Alignment.BottomStart }) {
Column() {
Text(‘Stack子元素1’).fontSize(20)
}.width(100).height(100).backgroundColor(0xffd306).zIndex(2)

Column() {
Text(‘Stack子元素2’).fontSize(20)
}.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)

Column() {
Text(‘Stack子元素3’).fontSize(20)
}.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)

在这里插入图片描述