HarmonyOS ArkUI容器类组件-层叠布局容器（Stack）

最新推荐文章于 2024-05-22 18:04:39 发布
最新推荐文章于 2024-05-22 18:04:39 发布
阅读量360 收藏 10
点赞数 3
分类专栏： 鸿蒙开发 HarmonyOS 移动开发 文章标签： harmonyos openharmony 鸿蒙开发 移动开发 ArkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71263309/article/details/138080301
版权
鸿蒙开发 同时被 3 个专栏收录
105 篇文章 0 订阅
订阅专栏
移动开发
105 篇文章 2 订阅
订阅专栏
HarmonyOS
11 篇文章 0 订阅
订阅专栏

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了。

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05

①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！

②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。

③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：https://qr21.cn/FV7h05

如何快速入门：

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05

大厂鸿蒙面试题：：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

小米椒……
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter布局组件之层叠组件Stack和Positioned
01-08
层叠布局和Web中的绝对定位、Android中的Frame布局是相似的，子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来（按照代码中声明的顺序）。Flutter中使用Stack和Positioned这两个...
Flutter页面布局之Stack层叠组件
01-08
Stack表示堆的意思，我们可以使用Stack或者结合Align或Positond实现定位布局 Stack常用属性： 属性 说明 alignment 配置所有子元素的显示位置 children 子元素 结合Positioned组件来控制每个子...
已饱和，未来程序员真没法再干了？_程序员干不了活(1)，HarmonyOS鸿蒙 基础面试
2401_84181501的博客
04-15 264
是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
【ArkUI】如何调整组件位置
owo_ovo的博客
12-22 838
【ArkUI】如何调整组件位置
第十讲_ArkUI层叠布局（Stack）
wenqi1992的博客
01-22 706
介绍ArkUI层叠布局Stack容器组件
HarmonyOS ArkUI常用布局及组件库介绍
weixin_44640245的博客
01-03 678
HarmonyOS ArkUI常用布局及组件库介绍
【HarmonyOS4.0】第十篇-ArkUI布局容器组件(二)
weixin_42533732的博客
01-15 1377
堆叠容器组件Stack的布局方式是把子组件按照设置的对齐方式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。Stack组件层叠式布局，尺寸较小的布局会有被遮挡的风险，
HarmonyOS 鸿蒙学习笔记1-DevEco Studio、ArtTS、ArkUI
m0_66174481的博客
03-30 1161
类型必须被指定，且和双向绑定状态变量的类型相同。HarmonyOS低代码开发方式，具有丰富的UI界面编辑功能，例如基于图形化的自由拖拽、数据的参数化配置等，遵循[HarmonyOS JS开发规范](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791)，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。
探索arkui（1）--- 布局（线性/层叠/弹性）
weixin_44808225的博客
11-15 265
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
HarmonyOS UI布局-性能优化
1
04-23 353
应用开发中的用户界面（UI）布局是用户与应用程序交互的关键部分。使用不同类型的布局可以将页面排布的更加美观，但也容易带来不合理的布局。不合理的布局虽然能在界面显示上达到相同效果，但是过度的布局计算，界面嵌套带来了渲染和计算的大量开销，造成性能的衰退，本文重点介绍了几种常见的布局功能和适用场景，同时提供了几种优化布局结构的方法。内置ArkUI Inspector工具，开发者可以使用ArkUIInspector，在DevEco Studio上查看应用在真机上的UI显示效果。
OpenHarmony实战开发-如何通过Stack容器组件实现位置的固定定位与层叠
2401_82546228的博客
04-26 444
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
redis-stack-server 7.2.0 安装包合集
04-03
redis-stack-server-7.2.0-v9.arm64.snap redis-stack-server-7.2.0-v9.bionic.arm64.tar.gz redis-stack-server-7.2.0-v9.bionic.x86_64.tar.gz redis-stack-server-7.2.0-v9.bullseye.x86_64.tar.gz redis-stack-...
react-native-card-stack-swiper：像React-native-card-stack swiper一样的Tinder
02-05
npm install --save react-native-card-stack-swiper 预习 import CardStack , { Card } from 'react-native-card-stack-swiper' ; < CardStack xss=removed xss=removed xss=removed> { this . swiper = swiper ...
Z-Stack 3.0.2.zip
03-20
TI Z-Stack 3.0.2官方原版，zigbee TI 开发官方BSP，支持TI CC2530,CC2538等多款器件！
鸿蒙OS 路由跳转
最新发布
程序员—威廉
05-22 175
2. **调用`Router`对象的`replace`或`push`方法**：在需要执行跳转的地方，调用`Router`对象的`replace`或`push`方法，并传入目标页面的路由路径。3. **使用`AbilitySlice`的`start`方法**：在自定义组件中，可以使用`AbilitySlice`的`start`方法来启动一个新的页面。1. **使用`@Route`装饰器**：在需要跳转的页面上添加`@Route`装饰器，并指定一个唯一的路由路径。）中定义路由路径，并指定参数。
鸿蒙OS开发：【一次开发，多端部署】（分栏控件）
m0_70748845的博客
05-21 473
本示例分别展示了多场景下，一多分栏控件的响应式变化效果。A+B+C：即SideBarContainer组件组合Navigation组件A+C：SideBarContainer组件B+C：Navigation组件。
鸿蒙4.2小版本推出，鸿蒙5.0已经不远了
speedoooo的博客
05-21 791
混合应用开发技术，特别是结合小程序和原生技术，为鸿蒙应用开发带来了显著的优势。首先，它简化了开发流程，使开发者能够迅速创建出高质量的应用程序。
c++容器 stack
08-27
关于容器 stack，我可以给你一些简单的介绍。 在C++中，stack是一种容器适配器（container adapter），它提供了一种后进先出（LIFO）的数据结构。stack基于另一个容器（默认情况下是deque）来实现其操作。它的主要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值