鸿蒙移动应用开发项目式教程课件 项目3-熊猫家园展示页-任务3-1 Stack布局概述_第1页
鸿蒙移动应用开发项目式教程课件 项目3-熊猫家园展示页-任务3-1 Stack布局概述_第2页
鸿蒙移动应用开发项目式教程课件 项目3-熊猫家园展示页-任务3-1 Stack布局概述_第3页
鸿蒙移动应用开发项目式教程课件 项目3-熊猫家园展示页-任务3-1 Stack布局概述_第4页
鸿蒙移动应用开发项目式教程课件 项目3-熊猫家园展示页-任务3-1 Stack布局概述_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Stack布局概述Stack布局概述Stack（层叠）布局用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局，允许子元素沿垂直于屏幕的方向进行堆叠。Stack布局通过Stack容器组件实现定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。Stack布局具有较强的页面层叠、定位能力，其使用场景有广告设计、卡片层叠等，其接口如下。任务导入知识解析学以致用课堂小结课后拓展1.1Stack布局Stack布局概述

一个简单的Stack布局示例如图所示，Stack作为容器，容器中的子元素依次为Item1、Item2、Item3。任务导入知识解析学以致用课堂小结课后拓展1.1Stack布局Stack布局示例Stack布局对齐方式Stack组件通过alignContent参数实现位置的相对移动，示例代码如下。任务导入知识解析学以致用课堂小结课后拓展1.1Stack布局Stack布局对齐方式Stack组件支持9种对齐方式。任务导入知识解析学以致用课堂小结课后拓展1.1Stack布局（1）TopStart：设置子组件在Stack组件内靠左上角对齐。（2）Top：设置子组件在Stack组件内靠顶部水平居中对齐。（3）TopEnd：设置子组件在Stack组件内靠右上角对齐。（4）Start：设置子组件在Stack组件内靠左侧竖直居中对齐。（5）Center（默认值）：设置子组件在Stack组件内居中对齐。（6）End：设置子组件在Stack组件内靠右侧竖直居中对齐。（7）BottomStart：设置子组件在Stack组件内靠左下角对齐。（8）Bottom：设置子组件在Stack组件内靠底部水平居中对齐。（9）BottomEnd：设置子组件在Stack组件内靠右下角对齐。Stack布局支持的9中对齐方式Stack布局中使用Z序控制

在Stack容器中，兄弟组件的显示层级关系可以通过Z序控制的zIndex属性改变。zIndex值越大，表示层级越高，即zIndex值较大的组件会覆盖在zIndex值较小的组件上方。

在Stack布局中，如果上面的子元素尺寸大于下面的子元素尺寸，则下面的子元素完全隐藏。例如图中所示，最上面的子元素3的尺寸大于下面的所有子元素，所以下面两个子元素完全隐藏。任务

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论