鸿蒙Harmony-层叠布局(Stack)详解

这篇具有很好参考价值的文章主要介绍了鸿蒙Harmony-层叠布局(Stack)详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们总是为了太多遥不可及的东西去拼命,却忘了人生真正的幸福不过是灯火阑珊处的温暖,柴米油盐的充实,人生无论你赚的钱,是多还是少,经历的事情是好还是坏,都不如过好当下的每一天! 

目录

一,定义

二,开发布局

三,对齐方式

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底部尾端

四,Z序控制

一,定义

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

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

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

二,开发布局

Stack组件为容器组件,容器内可包含各种子元素。其中子元素默认进行居中堆叠。子元素被约束在Stack下,进行自己的样式定义以及排列。

@Entry
@Component
struct StackTest {

  build() {
    Stack(){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

三,对齐方式

3.1 TopStart顶部起始端 

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.TopStart}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

3.2 Top顶部横向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Top}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

3.3 TopEnd顶部尾端

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.TopEnd}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

3.4 Start起始端纵向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Start}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

3.5 Center横向和纵向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Center}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

3.6 End尾端纵向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.End}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

3.7 BottomStart底部起始端

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.BottomStart}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

3.8 Bottom底部横向居中

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Bottom}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

3.9 BottomEnd底部尾端

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.BottomEnd}){
      Column(){}.width('90%').height('90%').backgroundColor('#ff2')
      Text('text').width('60%').height('60%').backgroundColor('#f23')
      Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

四,Z序控制

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

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

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Start}){
      Column() {
        Text('袁震1').textAlign(TextAlign.End).fontSize(20)
      }.width(100).height(100).backgroundColor(0xffd306)

      Column() {
        Text('袁震2').fontSize(20)
      }.width(150).height(150).backgroundColor(Color.Pink)

      Column() {
        Text('袁震3').fontSize(20)
      }.width(200).height(200).backgroundColor(Color.Grey)
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

因为袁震3在最上面,且大于袁震1和袁震2,所以只显示袁震3

然后改变Z序:

@Entry
@Component
struct StackTest {

  build() {
    Stack({alignContent:Alignment.Start}){
      Column() {
        Text('袁震1').textAlign(TextAlign.End).fontSize(20)
      }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)

      Column() {
        Text('袁震2').fontSize(20)
      }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)

      Column() {
        Text('袁震3').fontSize(20)
      }.width(200).height(200).backgroundColor(Color.Grey)
    }.width('100%')
    .height('100%')
  }
}

stack({aligncontent:alignment.start}),鸿蒙开发,harmonyos,华为,android

这样就都显示出来了文章来源地址https://www.toymoban.com/news/detail-799648.html

到了这里,关于鸿蒙Harmony-层叠布局(Stack)详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【数据结构】栈(Stack)实现详解

    🚩 纸上得来终觉浅, 绝知此事要躬行。 🌟主页:June-Frost 🚀专栏:数据结构 🔥该文章主要了解实现栈的相关操作。  栈是一种特殊的线性表,其只允许在 固定的一端 进行插入和删除元素操作。 进行数据插入和删除操作的一端称为栈顶,另一端称为栈底 。栈中的数据元

    2024年02月08日
    浏览(37)
  • 【数据结构】栈(Stack)的实现 -- 详解

    1、概念 栈 :一种特殊的线性表,其只允许在表尾进行插入和删除元素操作。 进行数据插入和删除操作的一端称为栈顶,另一端称为栈底 。栈中的数据元素遵守后进先出 LIFO(Last In First Out)的原则。 压栈 :栈的插入操作叫做进栈 / 压栈 / 入栈, 入数据在栈顶 。 出栈 :栈

    2024年02月14日
    浏览(40)
  • 鸿蒙Harmony-页面路由(router)详解

    慢慢理解世界,慢慢更新自己,希望你的每一个昨天,今天,和明天都会很快乐,你知道的,先好起来的从来都不是生活,而是你自己  目录 一,定义 二,页面跳转 2.1使用router.pushUrl 2.2 使用router.replaceUrl 2.3 使用Single模式 2.4 带参数的跳转  三,页面返回  3.1返回到上一个页

    2024年01月20日
    浏览(43)
  • 鸿蒙Harmony-列表组件(List)详解

    不要和别人比生活,每个人阶段不同,追求不同,活法自然也不同。只要今天的你能比昨天的你快乐一点点,那你就是自己人生赢家。 目录 一,定义 二,布局与约束 2.1 布局 2.2 约束 三,开发布局 3.1 设置主轴方向 3.2设置交叉轴布局 四,迭代列表内容 五,自定义列表样式

    2024年01月17日
    浏览(45)
  • 鸿蒙:Harmony开发基础知识详解

    工欲善其事,必先利其器。 上一篇博文实现了一个 \\\"Hello Harmony\\\" 的Demo,今天这篇博文就以 \\\"Hello Harmony\\\"  为例,以官网开发文档为依据,从鸿蒙开发主要的几个方面入手,详细了解一下鸿蒙开发所需的基础知识。 HarmonyOS提供了一套UI开发框架,即 方舟开发框架 ( ArkUI框架 )

    2024年02月05日
    浏览(51)
  • STL——stack容器和queue容器详解

      目录 💡stack 💡基本概念 常用接口  💡queue 💡基本概念 💡常用接口 栈(stack): 一种特殊的线性表,其只允许在固定的一端进行插入和删除操作。在进行数据插入和删除的一端称为栈顶,另一端称为栈底。栈中的元素都遵循后进先出的原则(LIFO,Last In First Out)。 压栈

    2024年02月02日
    浏览(36)
  • 鸿蒙harmony--数据库sqlite详解

    今天是1月20号星期六,早安,岁末大寒至,静后春归来。愿他乡故人,漂泊有归宿,前程有奔赴,愿人间不寒,温暖常伴,诸事顺利,喜乐长安。  目录 一,定义 二,运作机制 三,约束限制 四,接口说明 五,开发步骤 5.1 获取数据库 5.2 创建数据库表 5.3 数据库升降级 5.4插

    2024年01月21日
    浏览(41)
  • 鸿蒙Harmony--状态管理器--@Prop详解

    纵横千里独行客,何惧前路雨潇潇。夜半浊酒慰寂寞,天明走马入红尘。且将新火试新茶,诗酒趁年华。青春以末,壮志照旧,生活以悟,前路未明。时间善变,可执着翻不了篇。时光磨我少年心,却难灭我少年志,壮士活古不活皮。加油。 目录 一,定义 二,装饰器使用规

    2024年02月01日
    浏览(63)
  • 【c++】STL之stack和queue详解

    作者简介:დ旧言~,目前大二,现在学习Java,c,c++,Python等 座右铭:松树千年终是朽,槿花一日自为荣。 目标:掌握stack和queue库,了解deque库 毒鸡汤:小时候,哭是我们解决问题的绝招,长大后,笑是我们面对现实的武器。 望小伙伴们点赞👍收藏✨加关注哟💕💕  今天

    2024年02月19日
    浏览(38)
  • 【C++杂货铺】详解 stack 和 queue

            欢迎收看本期【C++杂货铺】,本期内容将讲解C++STL中stack和queue的内容,其中包含了stack , queue,priority_queue是什么,怎么使用以及模拟实现这些容器。         此外,还将将讲解设计模式中的适配器模式,以及STL中stack,queue的底层deque。         stack是一种容器适配

    2024年04月12日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包