层叠布局(Stack)

目录

1、概述

2、开发布局

3、对齐方式

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 

4、Z序控制

5、场景示例


1、概述

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

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

        如图1,Stack作为容器,容器内的子元素(子组件)的顺序为Item1->Item2->Item3。

图1 层叠布局

2、开发布局

        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、对齐方式

        Stack组件通过alignContent参数实现位置的相对移动。如图2所示,支持九种对齐方式。

图2 Stack容器内元素的对齐方式

3.1、TopStart 

        顶部向左对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.TopStart }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

 

3.2、Top

        顶部居中对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.Top }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

 

3.3、TopEnd

        顶部向右对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.TopEnd }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

3.4、Start

        竖直居中、横向居左对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.Start }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

3.5、Center

        竖直居中、横向居中对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.Center }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

3.6、End

        竖直居中、横向居右对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.End }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

3.7、BottomStart

        底部向左对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.BottomStart }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

3.8、Bottom

        底部居中对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.Bottom }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

3.9、BottomEnd 

        底部向右对齐。

@Entry
@Component
struct StackAlignContentPage {@State message: string = 'Hello World'build() {Stack({ alignContent: Alignment.BottomEnd }) {Column() {}.width(200).height(200).backgroundColor(0x86C5E3)Column() {}.width(150).height(150).backgroundColor(0x92D6CC)Column() {}.width(100).height(100).backgroundColor(0xF5DC62)}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)}
}

4、Z序控制

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

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

Stack({ alignContent: Alignment.BottomStart }) {Column() {Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)}.width(100).height(100).backgroundColor(0xffd306)Column() {Text('Stack子元素2').fontSize(20)}.width(150).height(150).backgroundColor(Color.Pink)Column() {Text('Stack子元素3').fontSize(20)}.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)

        下图中,最后的子元素3的尺寸大于前面的所有子元素,所以,前面两个元素完全隐藏。改变子元素1,子元素2的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)

5、场景示例

        使用层叠布局快速搭建手机页面显示模型。

@Entry
@Component
struct StackSample {private arr: string[] = ['APP1', 'APP2', 'APP3', 'APP4', 'APP5', 'APP6', 'APP7', 'APP8'];build() {Stack({ alignContent: Alignment.Bottom }) {Flex({ wrap: FlexWrap.Wrap }) {ForEach(this.arr, (item) => {Text(item).width(100).height(100).fontSize(16).margin(10).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)}, item => item)}.width('100%').height('100%')Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {Text('联系人').fontSize(16)Text('设置').fontSize(16)Text('短信').fontSize(16)}.width('50%').height(50).backgroundColor('#16302e2e').margin({ bottom: 15 }).borderRadius(15)}.width('100%').height('100%').backgroundColor('#CFD0CF')}
}

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

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

相关文章

31 树的存储结构二

DIsplay() 递归显示 :图示 求树的高度时&#xff0c;递归的技巧 在递归的过程中&#xff1a;ret单独和任意一个子树的子高度比较&#xff0c;如果ret<max&#xff0c;retmax ------------- 注意&#xff1a;组织链表和子链表的【元素类型】都是TLNode* 链表都要先通过TLNod…

JavaScript 动态生成内容的过程

网页使用 JavaScript 动态生成内容的过程涉及到 JavaScript 脚本与网页的 HTML 和 CSS 的交互。基本过程如下&#xff1a; 浏览器加载 HTML&#xff1a;首先&#xff0c;浏览器加载网页的 HTML 内容&#xff0c;这构成了页面的基本结构。 执行 JavaScript&#xff1a;随后&…

Validation--自定义校验

前言&#xff1a; 今天学到这个&#xff0c;闲着也是闲着&#xff0c;就写一个记录一下&#xff0c;也算是总结 我们的步骤是这样的 1.自定义注解State 2.自定义校验数据的类StateValidation实现ConstrainValidator接口 3.在需要校验的地方使用自定义注解 1.自定义注解 这…

C语言如何提高程序的可读性?

一、问题 可读性是评价程序质量的一个重要标准&#xff0c;直接影响到程序的修改和后期维护&#xff0c;那么如何提高程序的可读性呢? 二、解答 提高程序可读性可以从以下几方面来进行。 &#xff08;1&#xff09;C程序整体由函数构成的。 程序中&#xff0c;main()就是其中…

【C++学习笔记】C++多值返回写法

C不像python可以轻易地处理多值返回问题&#xff0c;处理使用指针或者引用将需要返回的值通过参数带出来&#xff0c;还有几种特殊的方式。 引用自&#xff1a;https://mp.weixin.qq.com/s/VEvUxpcJPsxT9kL7-zLTxg 1. Tuple tie 通过使用std::tie&#xff0c;我们可以将tuple…

Mysql事务隔离级别是怎么实现的?

Mysql事务 事务概念事务特性事务并发事务隔离级别MVCC多版本并发控制 事务概念 小钢同学今天发工资了&#xff0c;赶紧打开招商银行app看看工资到账了没有&#xff0c;查看余额300 嗯&#xff0c;今天心情好&#xff0c;给对象转账50大元买lv包包去&#xff0c;最后的结果肯定…

Vmware虚拟机问题解决方案 运行虚拟机系统蓝屏 运行虚拟机时报错VT-x

1. 运行虚拟机系统蓝屏 可能的原因有两个: 1). 虚拟机所在磁盘的空间不足 ; -------> 清理磁盘空间 。 2). 操作系统版本高, 需要适配新版本的Vmware ; ------> 卸载Vmware15版本, 安装Vmware16版本 。 2. 卸载Vmware步骤 1). 卸载已经安装的VMware 弹出确认框, 点击…

四旋翼无人机入门基础知识

电池 聚合物锂电池单体电芯的额定电压都为3.7V 电池的保存电压&#xff1a;单个电芯3.8V 电池的满电电压&#xff1a;单个电芯4.2V 串联&#xff1a;容量不变&#xff0c;电压相加&#xff0c;并联&#xff1a;电压不变&#xff0c;容量相加 S&#xff1a;串联&#xff0c;P&…

基于博弈树的开源五子棋AI教程[7 多线程搜索]

文章目录 引子定义实现结果尾记 引子 多线程加快搜索速度这一认知是经受住实践考验的。博弈树搜索的并行搜索方式有很多种&#xff0c;例如叶子并行&#xff0c;根并行&#xff0c;树分裂等算法。笔者给出一种实现起来比较简单的根并行算法。 在是实现时需要注意两点&#xff…

【LabVIEW FPGA入门】LabVIEW FPGA 实现SPI通信协议

该实现由两个组件组成&#xff1a;在 LabVIEW FPGA 中实现的 SPI 协议以及用于从主机 PC 或实时控制器与 FPGA 进行通信的 LabVIEW 主机接口。该架构允许从单个主机程序控制多个 SPI 端口&#xff0c;同时仍然允许定制 FPGA VI 以进行其他数据采集和处理。该实现不使用任何DMA&…

【期末不挂科-C++考前速过系列P4】大二C++实验作业-继承和派生(3道代码题)【解析,注释】

前言 大家好吖&#xff0c;欢迎来到 YY 滴C考前速过系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《…

2_单列模式_懒汉式单例模式

二.懒汉式单例模式 (1) 饿汉式单例模式概念 为了解决饿汉式单例可能带来的内存浪费问题&#xff0c;于是就出现了懒汉式单例的写法。懒汉式单例模式的特点是&#xff0c;单例对象要在被使用时才会初始化。 (2) 代码实现 实现代码方式1&#xff1a;简单的饿汉式单例 /*** 优…

解密威胁:.kat6.l6st6r 勒索病毒的威胁与恢复

导言&#xff1a; 在当今数字化时代&#xff0c;勒索病毒已经成为网络安全威胁中的一大巨头。其中&#xff0c;.kat6.l6st6r 勒索病毒以其狡猾的传播方式和高级的加密算法备受关注。本文将深入介绍.kat6.l6st6r 勒索病毒的特点、应对措施以及如何预防此类威胁。如果您在面对被…

基于java的 aws s3文件上传

aws s3 文件上传代码 首先&#xff0c;确保您已经在AWS上创建了一个S3存储桶&#xff0c;并拥有相应的访问密钥和密钥ID。这些凭据将用于在Java代码中进行身份验证。 接下来&#xff0c;需要在Java项目中添加AWS SDK的依赖。可以使用Maven或Gradle进行依赖管理。以下是一个Ma…

Kubernetes实战(十七)-设置kubernetes允许master调度pod

1 taint节点调度策略 NoSchedule: 一定不能被调度PreferNoSchedule: 尽量不要调度NoExecute: 不仅不会调度, 还会驱逐Node上已有的Pod 2 查看节点调度 $ kubectl describe node|grep -E "Name:|Taints:" Name: ops-master-1 Taints: no…

Kotlin 委托

Kotlin 委托 委托模式 是一种 通过 对象组合 实现代码重用 的设计模式&#xff0c; 对象处理请求时 将其 委托给 其他对象&#xff08;委托&#xff09;处理。 Kotlin 委托 分为&#xff1a; 类的委托属性的委托 一、类的委托 委托 Delegate 是实现继承的一种替代方式。达到了…

流量预测中文文献阅读(郭郭专用)

目录 基于流量预测的超密集网络资源分配策略研究_2023_高雪亮_内蒙古大学&#xff08;1&#xff09;内容总结&#xff08;2&#xff09;流量预测部分1、数据集2、结果对其中的一个网格的CDR进行预测RMSE和R2近邻数据和周期数据对RMSE的影响 &#xff08;3&#xff09;基于流量预…

ElasticSearch概述+SpringBoot 集成 ES

ES概述 开源的、高扩展的、分布式全文检索引擎【站内搜索】 解决问题 1.搜索词是一个整体时&#xff0c;不能拆分&#xff08;mysql整体连续&#xff09; 2.效率会低&#xff0c;不会用到索引&#xff08;mysql索引失效&#xff09; 解决方式 进行数据的存储&#xff08;只存储…

无缝打通易快报与电子签章系统,合同管理也能如此简单!

客户介绍&#xff1a; 某股份有限公司是一家专注于高端装备制造和智能制造解决方案的高新技术企业。该公司的产品和服务广泛应用于汽车、航空、高铁、智能家居、电子电器、新能源等领域&#xff0c;为全球客户提供了高效、精准、可靠的制造解决方案。 添加图片注释&#xff0c…

剑指offer面试题4 替换空格

考察点 考察数据结构字符串知识点 不同于c语言&#xff0c;java语言有字符和字符串俩种数据类型&#xff0c;char类型(字符类型)是基本数据类型&#xff0c;string类型(字符串类型)是引用类型 java语言中的字符采用unicode编码在内存中用2个字节存储&#xff0c;因此一个英文…