ArcTs布局入门03——层叠布局(Stack)

如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!

扫描下面的二维码关注公众号。

图片

1、概述

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

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

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

图片

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所示,支持九种对齐方式。

Stack容器内元素的对齐方式

图片

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、demo

使用叠层布局,我们可以搭建一个简单的页面,页面最底部有个常驻的工具栏,主内容区域是用户正文。代码和示意图如下:​​​​​​​

@Entry@Componentstruct 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')  }}

图片

6、结语

如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!

扫描下面的二维码关注公众号。

图片

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

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

相关文章

终身免费的Navicat数据库,不需要破解,官方支持

终身免费的Navicat数据库,不需要破解,官方支持 卸载了Navicat,很不爽上干货,Navicat免费版下载地址 卸载了Navicat,很不爽 公司不让用那些破解的数据库软件,之前一直使用Navicat。换了几款其他的数据库试了…

代码随想录-Day45

198. 打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个…

20240702在飞凌OK3588-C开发板上通过HDMI OUT输出USB3.0接口的热像仪的预览图像

20240702在飞凌OK3588-C开发板上通过HDMI OUT输出USB3.0接口的热像仪的预览图像 2024/7/2 18:19 rootok3588:/# rootok3588:/# rootok3588:/# lsusb Bus 005 Device 001: ID 1d6b:0002 Bus 003 Device 001: ID 1d6b:0001 Bus 001 Device 001: ID 1d6b:0002 Bus 006 Device 00…

零拷贝技术 Zero-Copy

1. 零拷贝概念 零拷贝:在数据传输过程中,减少CPU介入的数据拷贝次数,提高效率。 2. Java中的零拷贝 数据从内核拷贝到JVM堆外内存,避免拷贝到JVM堆。Java NIO中的零拷贝主要通过MappedByteBuffer和FileChannel.transferTo()实现…

将excel表格转换为element table(上)

最近有个功能需要将excel展示到html 界面里面,看是简单的一个需求也是需要费尽心思才完得成 原始数据 想要把excel 读取出来,于是使用xlsl的插件 npm i xlsx通过插件可以获取到已经分析好的数据 然后使用sheet_to_html将数据转换为html 再使用v-htm…

wireshark与tcpdump使用

文章目录 wireshark与tcpdump使用tcpdump过滤expression表达式wireshark的显示过滤器tcpdump语法wireshark与tcpdump使用 tcpdump过滤 官网:http://www.tcpdump.org 需要安装libpcap # 示例 tcpdump -vv -i any port 80 or port 443 -s0 -w /home/tkg.pcapexpression表达式…

Xorbits inference操作实战

1.操作环境 序号软件版本备注1Windows1.版本:Windows 10 专业版2.版本号:21H23.操作系统内部版本:19044.18892Docker Desktop4.24.2 (124339)3WSLUbuntu 22.04 LTS4Python3.105CUDA12.16Dify0.6.6 Xorbits inference 是一个强大且通用的分布…

day09了 加油

浅拷贝 指向同一个地址空间 右边不可取地址 左边一定是到了具体的位置 右值引用std&#xff1a;&#xff1a; move 相信大家默认构造函数都没有问题&#xff0c;所以就不贴例子了 浅拷贝构造函数 只负责复制地址&#xff0c;而不是真的把完整的内存给它 #include <iostre…

shell 脚本编程

简介&#xff1a;用户通过shell向计算机发送指令的&#xff0c;计算机通过shell给用户返回指令的执行结果 通过shell编程可以达到的效果&#xff1a;提高工作效率、可以实现自动化 需要学习的内容&#xff1a;Linux 、 shell的语法规范 编写shell的流程&#xff1a; 第一步…

数据库系统体系结构-DBMS的三级模式结构、DBMS的工作方式、模式定义语言、二级映射

一、体系结构的概念 1、大多数DBMS遵循三级模式结构 &#xff08;1&#xff09;外模式 &#xff08;2&#xff09;概念模式 &#xff08;3&#xff09;内模式 2、DBMS的体系结构描述的应该是系统的组成结构及其联系以及系统结构的设计和变化的原则等 3、1978年美国国家标…

Java学习 (七) 面向对象--多态、object类

一、多态性 多态在java中的体现是 父类的引用指向子类的对象 格式&#xff1a; 父类类型 变量名 子类对象 1、代码案例 vi Person.java public class Person {public String name;public int age;//新增方法public void eat(){System.out.println("人吃饭");}…

github仓库的基本使用-创建、上传文件、删除

1.第一步 先点击左侧菜单栏的远程仓库 2.点击NEW 3.创建仓库 然后点击右下角的 CREATE 4.点击code 点击SSH,然后我出现了You don’t have any public SSH keys in your GitHub account. You can add a new public key, or try cloning this repository via HTTPS. 1&#xff…

【MySQL备份】Percona XtraBackup加密备份实战篇

目录 1.前言 2.准备工作 2.1.环境信息 2.2.配置/etc/my.cnf文件 2.3.授予root用户BACKUP_ADMIN权限 2.4.生成加密密钥 2.5.配置加密密钥文件 3.加密备份 4.优化加密过程 5.解密加密备份 6.准备加密备份 7.恢复加密备份 7.1.使用rsync进行恢复 7.2.使用xtrabackup命令恢…

order by优化案例与原理剖析

一、引言 在数据库查询中&#xff0c;ORDER BY 语句用于对结果集进行排序&#xff0c;是日常开发中不可或缺的一部分。然而&#xff0c;随着数据量的增长&#xff0c;ORDER BY 的性能问题逐渐凸显。本文将结合一个实际案例&#xff0c;分析如何优化 ORDER BY 的性能&#xff0…

ICCV2023图像相关论文摘要速览两部分

tips&#xff1a;有两部分的原因主要是我筛选的时候没有统一image & images Paper1 PromptCap: Prompt-Guided Image Captioning for VQA with GPT-3 摘要原文: Knowledge-based visual question answering (VQA) involves questions that require world knowledge beyon…

深度学习之半监督学习:一文梳理目标检测中的半监督学习策略

什么是半监督目标检测&#xff1f; 传统机器学习根据训练数据集中的标注情况&#xff0c;有着不同的场景&#xff0c;主要包括&#xff1a;监督学习、弱监督学习、弱半监督学习、半监督学习。由于目标检测任务的特殊性&#xff0c;在介绍半监督目标检测方法之前&#xff0c;我…

YOLO10 用分割数据集训练

1、 下载Funiture数据集 http://kaggle.com/datasets/nicolaasregnier/furniture 并生成数据配置文件 data.yaml import yaml import os dataDir "你的工程路径/Furniture/sam_preds_training_set" os.path.join(dataDir, train) num_classes 2 classes [Chair, …

为什么要使用多线程(并发编程)

目录 1.上下文的切换 1.1 什么是上下文切换 2. 并发编程的死锁问题 2.1 死锁产生的原因 2.2 避免死锁的方法 3.资源限制的挑战3.1 什么是资源限制 并发编程的目的是为了让程序更快&#xff0c;大家都知道并不是开启的线程越多越快&#xff0c;因为开启的线程越多随即面临…

【驱动篇】龙芯LS2K0300之红外驱动

实验目标 编写HX1838红外接收器驱动&#xff0c;根据接收的波形脉冲解码红外按键键值 模块连接 模块连接&#xff1a;VCC接Pin 2&#xff0c;GND接Pin1&#xff0c;DATA接Pin16 驱动代码 HX1838 GPIO初始化&#xff0c;申请中断&#xff0c;注意&#xff1a;GPIO48默认是给…

部署最新版本elasticsearch 8.14.1和 kibana 8.14.1

部署最新版的elasticsearch和kibana&#xff0c;前提时已经部署docker 设置用户密码 export ELASTIC_PASSWORD"<ES_PASSWORD>" # 设置elastic用户密码 export KIBANA_PASSWORD"<KIB_PASSWORD>" # 设置kibana_system密码创建docker网络 保…