鸿蒙Harmony-层叠布局（Stack）详解

我们总是为了太多遥不可及的东西去拼命，却忘了人生真正的幸福不过是灯火阑珊处的温暖，柴米油盐的充实，人生无论你赚的钱，是多还是少，经历的事情是好还是坏，都不如过好当下的每一天！ 

目录

一，定义

二，开发布局

三，对齐方式

3.1 TopStart顶部起始端 

3.2 Top顶部横向居中

3.3 TopEnd顶部尾端

3.4 Start起始端纵向居中

3.5 Center横向和纵向居中

3.6 End尾端纵向居中

3.7 BottomStart底部起始端

3.8 Bottom底部横向居中

3.9 BottomEnd底部尾端

四，Z序控制

一，定义

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

二，开发布局

Stack组件为容器组件，容器内可包含各种子元素。其中子元素默认进行居中堆叠。子元素被约束在Stack下，进行自己的样式定义以及排列。

@Entry
@Component
struct StackTest {

  build() {
    Stack(){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

三，对齐方式

3.1 TopStart顶部起始端 

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.TopStart}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

3.2 Top顶部横向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Top}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

3.3 TopEnd顶部尾端

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.TopEnd}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

3.4 Start起始端纵向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Start}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

3.5 Center横向和纵向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Center}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

3.6 End尾端纵向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.End}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

3.7 BottomStart底部起始端

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.BottomStart}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

3.8 Bottom底部横向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Bottom}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

3.9 BottomEnd底部尾端

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.BottomEnd}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

四，Z序控制

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

在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Start}){
      Column() {
        Text('袁震1').textAlign(TextAlign.End).fontSize(20)
      }.width(100).height(100).backgroundColor(0xffd306)

      Column() {
        Text('袁震2').fontSize(20)
      }.width(150).height(150).backgroundColor(Color.Pink)

      Column() {
        Text('袁震3').fontSize(20)
      }.width(200).height(200).backgroundColor(Color.Grey)
    }.width('100%')
    .height('100%')
  }
}

因为袁震3在最上面，且大于袁震1和袁震2，所以只显示袁震3

然后改变Z序：

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Start}){
      Column() {
        Text('袁震1').textAlign(TextAlign.End).fontSize(20)
      }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)

      Column() {
        Text('袁震2').fontSize(20)
      }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)

      Column() {
        Text('袁震3').fontSize(20)
      }.width(200).height(200).backgroundColor(Color.Grey)
    }.width('100%')
    .height('100%')
  }
}

这样就都显示出来了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/320881.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

CF1178F1 Short Colorful Strip 题解

CF1178F1 Short Colorful Strip 题解

Short Colorful Strip 传送门 题面翻译 题目描述 这是F题的第一个子任务。F1和F2的区别仅在对于m和时间的限制上 有n1种颜色标号从0到n，我们有一条全部染成颜色0的长为m的纸带。 Alice拿着刷子通过以下的过程来给纸带染色： 我们按照从1到n的顺序进…
阅读更多...
美国初创公司Rabbit推出口袋AI设备R1；吴恩达课程：使用LangChain.js构建强大的JavaScript应用

美国初创公司Rabbit推出口袋AI设备R1；吴恩达课程：使用LangChain.js构建强大的JavaScript应用

🦉 AI新闻 🚀 美国初创公司Rabbit推出口袋AI设备R1，短时间内被抢购一空 摘要：美国初创公司Rabbit在CES 2024上发布了口袋AI设备R1，这款设备在一天内被抢购一空，售价为199美元。R1具有小巧玲珑的触屏、摄像…
阅读更多...
【线性表的基本操作实现及其应用 】

【线性表的基本操作实现及其应用 】

线性表的基本操作实现及其应用 1.实验目的 ⑴ 熟练掌握线性表的基本操作在两种存储结构上的实现，其中以熟悉各种链表的操作为重点。 ⑵ 巩固高级语言程序设计方法与技术，会用线性链表解决简单的实际问题。 2.实验原理与要求 ⑴ 按照数据结构实验任务书&…
阅读更多...
【笔记】书生·浦语大模型实战营——第四课（XTuner 大模型单卡低成本微调实战）

【笔记】书生·浦语大模型实战营——第四课（XTuner 大模型单卡低成本微调实战）

【参考：tutorial/xtuner/README.md at main InternLM/tutorial】 【参考：(4)XTuner 大模型单卡低成本微调实战_哔哩哔哩_bilibili-【OpenMMLab】】 总结 学到了 linux系统中 tmux 的使用 了解了 XTuner 大模型微调框架的使用 pth格式参数转Hugging …
阅读更多...
【量化交易故事】小明开启了量化创业之旅-01

【量化交易故事】小明开启了量化创业之旅-01

故事开始于2023年的春天，小明是一位对金融市场充满热情的IT工程师。在经历了数次基于主观判断和个人情绪进行投资却收获平平后，他意识到传统交易方式中的人为因素难以避免，而这往往成为影响投资决策稳定性和准确性的关键障碍。在一次偶然的机…
阅读更多...
工作压力测试

工作压力测试

每个职场人都会遇到工作压力，在企业人力资源管理的角度来看，没有工作压力是人力资源的低效，适当的工作压力可以促使员工不断进取，然而每个人的抗压能力是不同的，同样的工作量和工作难度，不同的人在面对相同…
阅读更多...
【Java语言基础②】Java基本语法——Java程序基本格式，注释，标识符，常量

【Java语言基础②】Java基本语法——Java程序基本格式，注释，标识符，常量

通过前面的学习，大家对Java语言有了一个基础认识，但现在还无法使用Java语言编写程序，要熟练使用Java语言编写程序，必须充分掌握Java语言的基础知识。今天咱们就来聊一聊Java的基本语法。 1.java程序的基本格式 Java程序代码必须…
阅读更多...
在win11中安装“mingw-w64-gcc-13.2-stable-r40”

在win11中安装“mingw-w64-gcc-13.2-stable-r40”

在windows系统中，安装完VSCode后，还需要安装mingw，才可以使用C和C编译。 1、从MinGW-w64镜像站点：http://files.1f0.de/mingw，下载“mingw-w64-gcc-13.2-stable-r40”，见下图： 2、将“mingw-w6…
阅读更多...
Centos7编译Python3.11源码并安装完成的详细教程

Centos7编译Python3.11源码并安装完成的详细教程

Python3.11的Linux源码： Index of /ftp/python/https://www.python.org/ftp/python/由于Centos7里自带的openssl是1.0版本的，而Centos Stream8和9用的是openssl-1.1.1版本的。 注意：openssl必须是openssl-1.1.1版本的，虽然最高版…
阅读更多...
【大厂秘籍】 - Java多线程面试题

【大厂秘籍】 - Java多线程面试题

Java多线程面试题 友情提示，看完此文，在Java多线程这块，基本上可以吊打面试官了 线程和进程的区别 进程是资源分配的最小单位，线程是CPU调度的最小单位 线程是进程的子集，一个进程可以有很多线程，每条线…
阅读更多...
10.9.2 std::function 存储函数对象 Page184

10.9.2 std::function 存储函数对象 Page184

41行，pending只是inc的复制品，所以43，44行，不会改变inc()的值 demo_function2()的运行结果： 59行，pending是inc的引用，所以61,62行将会改变inc()的值
阅读更多...
CloudFlare平台下载的WARP一直连不上（warp无法连接）解决办法

CloudFlare平台下载的WARP一直连不上（warp无法连接）解决办法

遇到问题： 解决办法： 下载一个warp选ip的文件夹，选一下ip就行了。 下载链接如下： https://pan.kejicode.cn/d/Onedrive/WIN%E7%AB%AFwarp%E8%87%AA%E9%80%89IP(%E6%89%8B%E5%8A%A8%2B%E8%87%AA%E5%8A%A8).rar?signRqBdHIMyyhg…
阅读更多...
查询和结果处理的Java代码

查询和结果处理的Java代码

match_all查询： //查询所有文档 match_all查询Testvoid testMatchAll() throws IOException {// 1.准备RequestSearchRequest request new SearchRequest("hotel");// 2.准备DSLrequest.source().query(QueryBuilders.matchAllQuery());// 3.发送请求Sea…
阅读更多...
Apollo之原理和使用讲解

Apollo之原理和使用讲解

文章目录 1 Apollo1.1 简介1.1.1 背景1.1.2 简介1.1.3 特点 1.2 基础模型1.3 Apollo 四个维度1.3.1 application1.3.2 environment1.3.3 cluster1.3.4 namespace 1.4 本地缓存1.5 客户端设计1.5.1 客服端拉取原理1.5.2 配置更新推送实现 1.6 总体设计1.7 可用性考虑 2 操作使用…
阅读更多...
海外媒体宣发：新闻媒体发稿引爆社交媒体的7个诀窍-华媒舍

海外媒体宣发：新闻媒体发稿引爆社交媒体的7个诀窍-华媒舍

社交媒体的崛起已经改变了新闻媒体的传播方式。从Facebook到Twitter，从Instagram到LinkedIn，社交媒体平台为新闻媒体提供了一个巨大且潜力无限的受众群体。要在这个竞争激烈的环境中引爆社交媒体，需要一些技巧和诀窍。在本篇文章中&#xff0…
阅读更多...
【CSS】保持元素宽高比

【CSS】保持元素宽高比

保持元素的宽高比，在视频或图片展示类页面是一个重要功能。 本文介绍其常规的实现方法。 实现效果 当浏览器视口发生变化时，元素的尺寸随之变化，且宽高比不变。 代码实现 我们用最简单的元素结构来演示，实现宽高比为4&#xf…
阅读更多...
WorkPlus卓越的即时通讯工具，助力企业提升工作效率

WorkPlus卓越的即时通讯工具，助力企业提升工作效率

在当今快节奏的商业环境中，高效沟通和协作是企业成功的关键。而即时通讯作为实现高效沟通的利器，成为了现代企业不可或缺的一部分。作为一款领先的即时通讯工具，WorkPlus以其卓越的性能和独特的功能，助力企业打造高效沟通和协作的…
阅读更多...
初始化数组

初始化数组

一、静态初始化格式： 数据类型[ ] 数组名 new 数据类型[ ]{元素1，元素2，元素3......} 等号后面的new 数据类型可以省略 注意：什么类型的数组只能存放什么类型的数据 直接打印a或b会显示其地址 数组的元素个数：arr…
阅读更多...
Android Studio 如何设置中文

Android Studio 如何设置中文

Android Studio 是一个为 Adndroid 平台开发程序的集成开发环境（IDE）。 如何安装中文插件 在 Jetbrains 家族的插件市场上，是能够搜到语言包插件的，正常情况下安装之后只需要重启即可享受中文界面，可AndroidStudio 中…
阅读更多...
SOLID 原则

SOLID 原则

单一功能原则 单一功能原则（Single responsibility principle）规定每个类都应该有一个单一的功能，并且该功能应该由这个类完全封装起来。所有它的（这个类的）服务都应该严密的和该功能平行（功能平行&#x…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站