鸿蒙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.mzph.cn/news/622408.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

初始化数组

初始化数组

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

C# 基础入门

第二章 C# 语法基础 2-1 C# 中的关键字 关键字，是一些被C#规定了用途的重要单词。 在Visual Studio的开发环境中，关键字被标识为蓝色，下图代码中，用红方框圈出的单词就是关键字。 关键字 class ，这个关键字的用途是…
阅读更多...
Linux下编写zlg7290驱动(1)

Linux下编写zlg7290驱动(1)

大家好，今天给大家介绍Linux下编写zlg7290驱动(1)，文章末尾附有分享大家一个资料包，差不多150多G。里面学习内容、面经、项目都比较新也比较全！可进群免费领取。 在智能仪表中，经常会用到键盘、数码管等外设。因此&…
阅读更多...
【Java语言基础②】Java基本语法——Java程序基本格式，注释，标识符，常量

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

通过前面的学习，大家对Java语言有了一个基础认识，但现在还无法使用Java语言编写程序，要熟练使用Java语言编写程序，必须充分掌握Java语言的基础知识。今天咱们就来聊一聊Java的基本语法。 1.java程序的基本格式 Java程序代码必须…
阅读更多...
Spring Boot 3 + Vue 3实战：引入数据库实现用户登录功能

Spring Boot 3 + Vue 3实战：引入数据库实现用户登录功能

文章目录 一、实战概述二、实战步骤（一）创建数据库（二）创建用户表（三）后端项目引入数据库1、添加相关依赖2、用户实体类保持不变3、编写应用配置文件4、创建用户映射器接口5、创建用户服务类6、修改登录控制…
阅读更多...
NLP论文阅读记录 - 2021 | WOS 使用深度强化学习及其他技术进行自动文本摘要

NLP论文阅读记录 - 2021 | WOS 使用深度强化学习及其他技术进行自动文本摘要

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.相关工作2.1. Seq2seq 模型2.2.强化学习和序列生成2.3.自动文本摘要 三.本文方法四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结思考 前言 Auto…
阅读更多...
Java：常见算法

Java：常见算法

认识算法 什么是算法？ 解决某个实际问题的过程和方法 学习算法的技巧 先搞清楚算法的流程直接去推敲如何写代码 排序算法 冒泡排序 每次从数组中找出最大值放在数组的后面去。 实现冒泡排序的关键步骤分析 确认总共需要做几轮：数组的长度-1每轮比较…
阅读更多...
【java】创建打印数组的方法并调用

【java】创建打印数组的方法并调用

java的数组和Python不一样，不能直接用print打印，而如果每次都用循环的方法，比较麻烦，就直接创建一个类&方法，每次用的时候直接调用。 public class list_deal {public static void printArray(int[] arr){for (in…
阅读更多...
Python实现对角但非同一性协方差结构回归模型(WLS算法)项目实战

Python实现对角但非同一性协方差结构回归模型(WLS算法)项目实战

说明：这是一个机器学习实战项目（附带数据代码文档视频讲解），如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 WLS回归分析是一种常用的回归分析方法，通过对数据进行加权处理，可以更准确地评…
阅读更多...
VSCode编写 C/C++ 程序

VSCode编写 C/C++ 程序

VSCode 全称 Visual Studio Code，是微软出的一款轻量级代码编辑器，免费、开源而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并…
阅读更多...
Day02

Day02

今日任务： 977 有序数组的平方209 长度最小的子数组59 螺旋矩阵Ⅱ 977 有序数组的平方 题目链接：https://leetcode.cn/problems/squares-of-a-sorted-array/ 双指针问题，以及数组本身时有序的； 思路： 左、右两个…
阅读更多...
SG-8101CGA 系列 (晶体振荡器 可编程 可用 +125°C )

SG-8101CGA 系列 (晶体振荡器 可编程 可用 +125°C )

SG-8101CGA是可编程晶体振荡器，具有CMOS输出，适用于汽车，同时，该系列还提供相同的频率和其他参数的轻松编程能力，符合AEC-Q100标准，具有出色的电磁兼容性和稳定性，可以在各种环境下使用。外部尺…
阅读更多...
008定点小数、奇偶校验码

008定点小数、奇偶校验码

阅读更多...
Linux的DHCP工作原理和dns服务器

Linux的DHCP工作原理和dns服务器

目录 一、DHCP原理 1.DHCP的好处 2.DHCP的分配方式 3.实验 二、dns服务器 1.什么是dns 2.dns域名解析 3、在内网搭建dns 一、DHCP原理 DCHP工作原理使用C/S架构 （1）第一步，客户端广播发送一个discover报文寻找DHCP服务器。 &#…
阅读更多...
牛客周赛 Round 28 解题报告 | 珂学家 | 组合数学 + 离散化树状数组

牛客周赛 Round 28 解题报告 | 珂学家 | 组合数学 + 离散化树状数组

前言 整体评价 还是E稍微有点意思&#xff0c;新周赛好像比预期要简单一些, _. 欢迎关注 珂朵莉 牛客周赛专栏 珂朵莉 牛客小白月赛专栏 A. 小红的新周赛 思路: 模拟 #include <bits/stdc.h>using namespace std;int main() {int res 0;for (int i 0; i < 6; i…
阅读更多...
x86是什么？

x86是什么？

x86是一系列CPU架构的统称&#xff0c;这一术语起源于1978年&#xff0c;当时Intel发布了其首款16位微处理器——8086。这款处理器在当时引起了极大的关注&#xff0c;因为它首次引入了许多先进的技术&#xff0c;如寄存器间接寻址和分段内存管理等。随后&#xff0c;Intel又相…
阅读更多...
Linux：/proc/kmsg 与 /proc/sys/kernel/printk_xxx

Linux：/proc/kmsg 与 /proc/sys/kernel/printk_xxx

目录 前言一、/proc/kmsg1、简介2、如何修改内核日志缓冲区3、dmesgklogctl 函数&#xff08;来源于 man 手册&#xff09; 4、扩展阅读 二、 /proc/sys/kernel/printk_xxx三、/dev/kmsg 前言 本篇文章将为大家介绍与 Linux 内核日志相关的一些控制文件&#xff0c;共同学习&am…
阅读更多...
UE5 PCG插件场景静态网格模块化、快速搭建场景

UE5 PCG插件场景静态网格模块化、快速搭建场景

PCG图表可以理解为静态网格体图表&#xff0c;里面可以自定义放不同有静态网格体、可以对密度、大小、面积等等在场景实际应中做相应的调整&#xff0c;可以根据地形高度随机生成静态网络体&#xff0c;可以模化作业。大大降低了场景制的时间成本。PCG插件目前需要UE5.2以上的版…
阅读更多...
Multimodal Prototypical Networks for Few-shot Learning

Multimodal Prototypical Networks for Few-shot Learning

tcGAN is provided with an embedding ϕ T \phi_T ϕT​() of the textual description 辅助信息 作者未提供代码
阅读更多...
【ArcGIS Pro微课1000例】0056：度分秒与十进制度互相转换（度分秒→度、度→度分秒）

【ArcGIS Pro微课1000例】0056：度分秒与十进制度互相转换（度分秒→度、度→度分秒）

ArcGIS软件可以很方便的直接实现度分秒转度、度转度分秒（度分秒→度、度→度分秒）。 文章目录 一、转换预览二、工具介绍三、案例解析一、转换预览 借助ArcGIS快速实现度分秒与度及其他格式的坐标转换，例如：度分秒→度、度→度分秒。 1. 度→度分秒 2. 度分秒→度 转换后…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023