层叠布局（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 树的存储结构二

31 树的存储结构二

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

Validation--自定义校验

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

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

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

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

Mysql事务 事务概念事务特性事务并发事务隔离级别MVCC多版本并发控制 事务概念 小钢同学今天发工资了&#xff0c;赶紧打开招商银行app看看工资到账了没有&#xff0c;查看余额300 嗯&#xff0c;今天心情好&#xff0c;给对象转账50大元买lv包包去&#xff0c;最后的结果肯定…
阅读更多...
Vmware虚拟机问题解决方案 运行虚拟机系统蓝屏 运行虚拟机时报错VT-x

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

1. 运行虚拟机系统蓝屏 可能的原因有两个: 1). 虚拟机所在磁盘的空间不足 ; -------> 清理磁盘空间 。 2). 操作系统版本高, 需要适配新版本的Vmware ; ------> 卸载Vmware15版本, 安装Vmware16版本 。 2. 卸载Vmware步骤 1). 卸载已经安装的VMware 弹出确认框, 点击…
阅读更多...
【LabVIEW FPGA入门】LabVIEW FPGA 实现SPI通信协议

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

该实现由两个组件组成&#xff1a;在 LabVIEW FPGA 中实现的 SPI 协议以及用于从主机 PC 或实时控制器与 FPGA 进行通信的 LabVIEW 主机接口。该架构允许从单个主机程序控制多个 SPI 端口&#xff0c;同时仍然允许定制 FPGA VI 以进行其他数据采集和处理。该实现不使用任何DMA&…
阅读更多...
【期末不挂科-C++考前速过系列P4】大二C++实验作业-继承和派生（3道代码题）【解析，注释】

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

前言 大家好吖&#xff0c;欢迎来到 YY 滴C考前速过系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《…
阅读更多...
解密威胁：.kat6.l6st6r 勒索病毒的威胁与恢复

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

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

流量预测中文文献阅读（郭郭专用）

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

ElasticSearch概述+SpringBoot 集成 ES

ES概述 开源的、高扩展的、分布式全文检索引擎【站内搜索】 解决问题 1.搜索词是一个整体时&#xff0c;不能拆分&#xff08;mysql整体连续&#xff09; 2.效率会低&#xff0c;不会用到索引&#xff08;mysql索引失效&#xff09; 解决方式 进行数据的存储&#xff08;只存储…
阅读更多...
无缝打通易快报与电子签章系统，合同管理也能如此简单！

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

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

​iOS 应用上架指南：资料填写及提交审核

目录 摘要 引言 打开appuploader工具&#xff0c;第二步&#xff1a;打开appuploader工具 第五步&#xff1a;交付应用程序&#xff0c;在iTunes Connect中查看应用程序 总结 摘要 本文提供了iOS新站上架资料填写及提交审核的详细指南&#xff0c;包括创建应用、资料填写-…
阅读更多...
【JAVA语言-第12话】API中的工具类 之 Date,DateFormat,SimpleDateFormat,Calendar类的详细解析

【JAVA语言-第12话】API中的工具类 之 Date,DateFormat,SimpleDateFormat,Calendar类的详细解析

目录 日期和时间 1.1 Date类 1.1.1 概述 1.1.2 常用方法 1.1.3 案例 1.2 DateFormat类 1.2.1 概述 1.2.2 常用方法 1.3 SimpleDateFormat类 1.3.1 概述 1.3.2 构造方法 1.3.3 模式字符 1.3.4 日期转字符串 1.3.5 字符串转日期 1.4 Calendar类 1.4.1 概述 1…
阅读更多...
Raspbian安装摄像头

Raspbian安装摄像头

Raspbian安装摄像头 1. 源由2. 摄像头2.1 选型2.2 系统2.3 安装 3. 配置&命令3.1 命令3.2 配置 4. 测试4.1 拍照4.1.1 libcamera-jpeg4.1.2 libcamera-still 4.2 视频流4.2.1 RTSP流4.2.2 TCP流 5. 参考资料 1. 源由 家里闲置两块树莓派&#xff0c;打算做个WiFi视频流RTS…
阅读更多...
【JaveWeb教程】（21） MySQL数据库开发之多表设计：一对多、一对一、多对多的表关系 详细代码示例讲解

【JaveWeb教程】（21） MySQL数据库开发之多表设计：一对多、一对一、多对多的表关系 详细代码示例讲解

目录 2. 多表设计2.1 一对多2.1.1 表设计2.1.2 外键约束 2.2 一对一2.3 多对多2.4 案例 2. 多表设计 关于单表的操作(单表的设计、单表的增删改查)我们就已经学习完了。接下来我们就要来学习多表的操作&#xff0c;首先来学习多表的设计。 项目开发中&#xff0c;在进行数据库…
阅读更多...
MISGAN

MISGAN

MISGAN：通过生成对抗网络从不完整数据中学习 代码、论文、会议发表： ICLR 2019 摘要： 生成对抗网络（GAN）已被证明提供了一种对复杂分布进行建模的有效方法，并在各种具有挑战性的任务上取得了令人印象深刻的结果。然而，典型的 GAN 需要在训练期间充分观察数据。在本文中…
阅读更多...
matlab中any()函数用法

matlab中any()函数用法

一、帮助文档中的介绍 B any(A) 沿着大小不等于 1 的数组 A 的第一维测试所有元素为非零数字还是逻辑值 1 (true)。实际上&#xff0c;any 是逻辑 OR 运算符的原生扩展。 二、解读 分两步走&#xff1a; ①确定维度&#xff1b;②确定运算规则 以下面二维数组为例 >>…
阅读更多...
FEB(acwing)

FEB(acwing)

文章目录 FEB题目描述输入格式输出格式数据范围输入样例1&#xff1a;输出样例1&#xff1a;输入样例2&#xff1a;输出样例2&#xff1a;输入样例3&#xff1a;输出样例3&#xff1a;代码题解情况1&#xff1a;xxxxxx&#xff1a;0&#xff0c;1&#xff0c;2&#xff0c;…&a…
阅读更多...
AI教我学编程之C#变量及实例演示

AI教我学编程之C#变量及实例演示

前言 在AI教我学编程之AI自刀 这篇文章中&#xff0c;我们知道了变量的基础类型&#xff0c;那么变量在C#中有什么作用呢&#xff1f;我们一起来看看吧&#xff01; 目录 重点先知 变量 变量类型 实例演示 变量声明 实例演示 提出疑问 初始化变量 自动初始化 多变量声明 实…
阅读更多...
【深度学习目标检测】十六、基于深度学习的麦穗头系统-含GUI和源码（python，yolov8）

【深度学习目标检测】十六、基于深度学习的麦穗头系统-含GUI和源码（python，yolov8）

全球麦穗检测是植物表型分析领域的一个挑战&#xff0c;主要目标是检测图像中的小麦麦穗。这种检测在农业领域具有重要意义&#xff0c;可以帮助农民评估作物的健康状况和成熟度。然而&#xff0c;由于小麦麦穗在视觉上具有挑战性&#xff0c;准确检测它们是一项艰巨的任务。 全…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023