【带你轻松学】ArkUI容器类组件-层叠布局容器（Stack）

于 2024-09-26 15:32:32 发布
阅读量353 收藏 3
点赞数 7
分类专栏： HarmonyOS 移动开发 鸿蒙开发 文章标签： 鸿蒙 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_87677001/article/details/142558543
版权

往期知识点整理

ArkUI开发框架提了堆叠容器组件 Stack ，它的布局方式是把子组件按照设置的对齐方式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。

Stack定义介绍

interface StackInterface {
  (value?: { alignContent?: Alignment }): StackAttribute;
}

  • alignContent：设置子组件的对其方式， Alignment 定义了以下 9 种对齐方式：

    • TopStart：子组件在 Stack 内靠左上角对齐，简单样例如下所示：
        Stack({alignContent: Alignment.TopStart}) {
          Text('Text1')
            .width(200)
            .height(180)
            .textAlign(TextAlign.End)
            .backgroundColor("#aabbcc")

          Text('Text2')
            .width(130)
            .height(100)
            .textAlign(TextAlign.End)
            .backgroundColor('#bbccaa')

          Text('Text3')       // 被遮挡住了
            .backgroundColor('#ccaabb')

          Text('Text4')
            .width(60)
            .height(45)
            .textAlign(TextAlign.End)
            .backgroundColor('#abcabc')
        }
        .backgroundColor(Color.Pink)
        .width("100%")
        .height('200')

样例运行结果如下图所示：

  • Top：设置子组件在 Stack 内靠顶部水平居中对齐，简单样例如下所示：
        Stack({alignContent: Alignment.Top}) {
          Text('Text1')
            .width(200)
            .height(180)
            .textAlign(TextAlign.End)
            .backgroundColor("#aabbcc")

          Text('Text2')
            .width(130)
            .height(100)
            .textAlign(TextAlign.End)
            .backgroundColor('#bbccaa')

          Text('Text3')       // 被遮挡住了
            .backgroundColor('#ccaabb')

          Text('Text4')
            .width(60)
            .height(45)
            .textAlign(TextAlign.End)
            .backgroundColor('#abcabc')
        }
        .backgroundColor(Color.Pink)
        .width("100%")
        .height('200')

样例运行结果如下图所示：

  • TopEnd：设置子组件在 Stack 内部靠右上角对齐，简单样例如下所示：
       Stack({alignContent: Alignment.TopEnd}) {
         Text('Text1')
           .width(200)
           .height(180)
           .textAlign(TextAlign.Start)
           .backgroundColor("#aabbcc")

         Text('Text2')
           .width(130)
           .height(100)
           .textAlign(TextAlign.Start)
           .backgroundColor('#bbccaa')

         Text('Text3')       // 被遮挡住了
           .backgroundColor('#ccaabb')

         Text('Text4')
           .width(60)
           .height(45)
           .textAlign(TextAlign.Start)
           .backgroundColor('#abcabc')
       }
       .backgroundColor(Color.Pink)
       .width("100%")
       .height('200')

样例运行结果如下图所示：

  • Start：子组件靠 Stack 左边侧竖直居中对齐，简单样例如下所示：
        Stack({alignContent: Alignment.Start}) {
          Text('Text1')
            .width(200)
            .height(180)
            .textAlign(TextAlign.End)
            .backgroundColor("#aabbcc")

          Text('Text2')
            .width(130)
            .height(100)
            .textAlign(TextAlign.End)
            .backgroundColor('#bbccaa')

          Text('Text3')       // 被遮挡住了
            .backgroundColor('#ccaabb')

          Text('Text4')
            .width(60)
            .height(45)
            .textAlign(TextAlign.End)
            .backgroundColor('#abcabc')
        }
        .backgroundColor(Color.Pink)
        .width("100%")
        .height('200')

样例运行结果如下图所示：

  • Center（默认值）：设置子组件居中对齐，简单样例如下所示：
        Stack({alignContent: Alignment.Center}) {
          Text('Text1')
            .width(200)
            .height(180)
            .backgroundColor("#aabbcc")

          Text('Text2')
            .width(130)
            .height(100)
            .backgroundColor('#bbccaa')

          Text('Text3')       // 被遮挡住了
            .backgroundColor('#ccaabb')

          Text('Text4')
            .width(60)
            .height(45)
            .backgroundColor('#abcabc')
        }
        .backgroundColor(Color.Pink)
        .width("100%")
        .height('200')

样例运行结果如下图所示：

  • End：设置子组件靠右竖直居中对齐，简单样例如下所示：
        Stack({alignContent: Alignment.End}) {
          Text('Text1')
            .width(200)
            .height(180)
            .backgroundColor("#aabbcc")

          Text('Text2')
            .width(130)
            .height(100)
            .backgroundColor('#bbccaa')

          Text('Text3')       // 被遮挡住了
            .backgroundColor('#ccaabb')

          Text('Text4')
            .width(60)
            .height(45)
            .backgroundColor('#abcabc')
        }
        .backgroundColor(Color.Pink)
        .width("100%")
        .height('200')

样例运行结果如下图所示：

  • BottomStart：设置子组件左下角对齐，简单样例如下所示：
        Stack({alignContent: Alignment.BottomStart}) {
          Text('Text1')
            .width(200)
            .height(180)
            .textAlign(TextAlign.End)
            .backgroundColor("#aabbcc")

          Text('Text2')
            .width(130)
            .height(100)
            .textAlign(TextAlign.End)
            .backgroundColor('#bbccaa')

          Text('Text3')       // 被遮挡住了
            .backgroundColor('#ccaabb')

          Text('Text4')
            .width(60)
            .height(45)
            .textAlign(TextAlign.End)
            .backgroundColor('#abcabc')
        }
        .backgroundColor(Color.Pink)
        .width("100%")
        .height('200')

样例运行结果如下图所示：

  • Bottom：设置子组件底部水平居中对齐，简单样例如下所示：
        Stack({alignContent: Alignment.Bottom}) {
          Text('Text1')
            .width(200)
            .height(180)
            // .textAlign(TextAlign.End)
            .backgroundColor("#aabbcc")

          Text('Text2')
            .width(130)
            .height(100)
            // .textAlign(TextAlign.End)
            .backgroundColor('#bbccaa')

          Text('Text3')       // 被遮挡住了
            .backgroundColor('#ccaabb')

          Text('Text4')
            .width(60)
            .height(45)
            // .textAlign(TextAlign.End)
            .backgroundColor('#abcabc')
        }
        .backgroundColor(Color.Pink)
        .width("100%")
        .height('200')

样例运行结果如下图所示：

  • BottomEnd：设置子组件右下角对齐，简单样例如下所示：
        Stack({alignContent: Alignment.BottomEnd}) {
          Text('Text1')
            .width(200)
            .height(180)
            // .textAlign(TextAlign.End)
            .backgroundColor("#aabbcc")

          Text('Text2')
            .width(130)
            .height(100)
            // .textAlign(TextAlign.End)
            .backgroundColor('#bbccaa')

          Text('Text3')       // 被遮挡住了
            .backgroundColor('#ccaabb')

          Text('Text4')
            .width(60)
            .height(45)
            // .textAlign(TextAlign.End)
            .backgroundColor('#abcabc')
        }
        .backgroundColor(Color.Pink)
        .width("100%")
        .height('200')

样例运行结果如下图所示：

📢：根据以上示例可知： Stack 组件层叠式布局，尺寸较小的布局会有被遮挡的风险，读者在布局组件的时候需要注意一下。

Stack属性介绍

declare class StackAttribute extends CommonMethod<StackAttribute> {
  alignContent(value: Alignment): StackAttribute;
}
  • alignContent：设置子组件的对齐方式， Alignment 的讲解同上，这里就不再介绍了。

小结

本节简单介绍了 Stack 布局特性：堆叠式，它的使用很简单，唯一需要读者注意的是小的子组件可能出现会被遮挡的情况，熟练该容器组件后就可以构建相对比较复杂的UI了。

我是你叶
关注
专栏目录
【云原生】最初的容器编排神器--docker-compose的介绍、原理、用法及实战应用案例分析
景天科技苑
08-12 2万+
Docker Compose 是 Docker 官方推出的一个用于定义和运行多个 Docker 容器的工具。它通过 YAML 文件（通常命名为 `docker-compose.yml`）来配置多个容器的应用，并允许用户通过简单的命令来启动、停止和重启这些容器。Docker Compose 的主要目标是简化多容器应用的部署和管理，让开发者可以轻松地定义和管理复杂的多容器应用。
同步类容器和并发类容器
热门推荐
yjclsx的博客
07-31 41万+
一.为什么会出现同步容器？ 在Java的集合容器框架中，主要有四大类别：List、Set、Queue、Map。 注意Collection和Map是顶层接口，而List、Set、Queue接口则分别继承了Collection接口，分别代表数组、集合和队列这三大类容器。 像ArrayList、LinkedList都是实现了List接口，HashSet实现了Set接口，而Deque（双向队列，允许...
鸿蒙项目方舟框架（ArkUI）之线性布局容器Stack组件
adendean的博客
12-28 756
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1。从API version 9开始，该接口支持在ArkTS卡片中使用。从API version 9开始，该接口支持在ArkTS卡片中使用。堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。默认值：Alignment.Center。默认值：Alignment.Center。设置所有子组件在容器内的对齐方式。设置子组件在容器内的对齐方式。同时设置时，后设置的属性生效。
HarmonyOS ArkUI容器类组件-层叠布局容器（Stack）
m0_71263309的博客
04-22 653
ArkUI开发框架提了堆叠容器组件 `Stack` ，它的布局方式是把子组件按照设置的对齐方式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。
鸿蒙HarmonyOS实战-ArkUI组件（Stack）
单口相声Jay
03-28 1357
HarmonyOS中的层叠布局Stack是一种可以将多个组件按照一定顺序叠放的布局。Stack布局中的组件可以是任意类型的组件，且每个组件都可以设置在哪个位置叠放。在叠放时，后添加的组件会自动覆盖前面添加的组件。Stack布局布局中的每个子组件都可以设置偏移量、旋转角度等属性，这样可以实现更加丰富的叠放效果。此外，Stack布局还支持添加动画，通过动画可以实现组件的平移、旋转等动态效果，使页面更加生动有趣。
【愚公系列】2023年12月 HarmonyOS教学课程 006-ArkUI组件（Stack）
时光隧道
12-01 6万+
HarmonyOS中的层叠布局Stack是一种可以将多个组件按照一定顺序叠放的布局。Stack布局中的组件可以是任意类型的组件，且每个组件都可以设置在哪个位置叠放。在叠放时，后添加的组件会自动覆盖前面添加的组件。Stack布局布局中的每个子组件都可以设置偏移量、旋转角度等属性，这样可以实现更加丰富的叠放效果。此外，Stack布局还支持添加动画，通过动画可以实现组件的平移、旋转等动态效果，使页面更加生动有趣。
ARKUI布局容器
最新发布
qq_36197716的博客
08-15 615
ForEach遍历生成ListItem的时候，末尾可以用，（item:Object）=>JSON.stringfy(item)作为唯一的key。上面那四个点的图标，是因为menus数组里面超出3个了，所以用这个图标代替，点击的时候弹出来弹框，来进行选择操作。通过stack组件可以实现子元素的固定定位和层叠，子元素依次入栈，后面的覆盖前面的。Flex容器的子组件排列方式可以从左到右，也可以从右到左，从上到下，从下到上。当warp是true的情况下，则是多行，涉及多行的对齐方式。
kubernetes集群监控 Kube-Prometheus-Stack
叶青
05-08 2372
该项目开箱即用的功能，对k8s的监控指标是比较全面的，对于k8s的主要组件的运行状态如Node、Kubelet、Pod、Deployment、StatefulSet、CoreDNS、PV等资源进行了指标采集和监控，项目采用的是prometheus，并且有许多CRD资源，可以很方便通过编写yaml配置文件，来进行监控能力的扩充和告警阈值的设置。
flutter之Stack层叠布局-头像
qq_34497319的博客
08-16 1713
水平布局和垂直布局确实很好用，但是有一种情况是无法完成的，比如放入一个图片，图片上再写一些字或者放入容器，这时候Row和Column就力不从心了。Flutter为这种情况准备了Stack层叠布局，效果和代码如下: 层叠布局的 alignment 属性 alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算...
stack堆栈容器
jincheng_的博客
10-24 140
#include <iostream> #include <stack> using namespace std; //后进先出线性表 int main() { //定义栈 stack<int> s; //入栈 s.push(1); s.push(3); s.push(5); //读取栈顶元素 cout << s.top() &l...
鸿蒙Harmony-层叠布局（Stack）详解
袁震的博客
01-14 2255
我们总是为了太多遥不可及的东西去拼命，却忘了人生真正的幸福不过是灯火阑珊处的温暖，柴米油盐的充实，人生无论你赚的钱，是多还是少，经历的事情是好还是坏，都不如过好当下的每一天！
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）容器组件之Stack 组件用法
二当家的
03-27 466
容器组件是 ArkUI 中用于组织和布局子组件的组件。它们提供了一种将子组件组合在一起并以特定方式排列它们的方法。
9. Flutter——Stack组件
qq_38556217的博客
11-14 143
1. Stack组件 Stack 表示堆的意思，我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实 现页面的定位布局。 属性: 属性 说明 alignment 配置所有子元素的显示位置 children 子组件 2. Stack Align Stack 组件中结合 Align 组件可以控制每个子元素的显示位置。 属性: 属性 说明 alignment 配置所有子元素的显示位置 child
使用dijit的堆叠容器StackContainer
qingqingzijinxin的专栏
08-07 771
使用dijit的堆叠容器StackContainer
【HarmonyOS4.0】第十篇-ArkUI布局容器组件(二)
weixin_42533732的博客
01-15 1659
堆叠容器组件Stack的布局方式是把子组件按照设置的对齐方式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。Stack组件层叠式布局，尺寸较小的布局会有被遮挡的风险，
2.saltstack使用指南：saltstack组件
linux_player_c（系统&开发）
02-16 1874
saltstack组件实验环境saltstack（master主机）: 192.168.1.103(master.example.com) saltstack（minion主机）: 192.168.1.104(minion4.example.com)注意：1.两个节点的防火墙都需要关闭或者允许数据包的传入传出 2.两个节点之间要相互作dns解析（/etc/hosts） 3.两个节点的sel
第十讲_ArkUI层叠布局（Stack）
wenqi1992的博客
01-22 1054
介绍ArkUI层叠布局Stack容器组件
Flutter 层叠布局组件
xiangxiongfly
06-08 618
Stack组件可以将子元素叠加显示，类似于Android中的FrameLayout布局。 基本使用 fit属性 alignment属性 Stack & Positioned Positioned可以指定精确定位。 IndexedStack IndexedStack是Stack的子类，通过index属性显示指定索引的子组件。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值