HarmonyOS 鸿蒙Stack组件的用法

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Stack组件的用法

Stack 中如何设置子元素的位置，比如阅读器App顶部菜单和底部菜单，分页位于界面的顶部和底部

Harmonyos Next教程
10 回复
我也找到好久，视乎有点坑爹，没办法像android的FrameLayout可以指定不同的子View用不同的对齐方式
[@Entry](/user/Entry)
[@Component](/user/Component)
struct test {
  build() {
    Stack() {
      Stack() {
        Text('底部菜单').fontSize(50).fontWeight(FontWeight.Bold)
      }.height('100%').width('100%').alignContent(Alignment.Bottom)
      Text('顶部菜单').fontSize(50).fontWeight(FontWeight.Bold)
    }
    .height('100%').width('100%').alignContent(Alignment.Top)
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

这倒是一个思路，但是这种如果加动画不好加吧，工具栏出现和消失的动画

stack确定位置，然后多套几层row或column呗。

动画封装下就行了，鸿蒙感觉比Android简单的就是就是动画了，我的阅读器页面就是这么做的

这种还是换布局简单些。 
Flex这个很简单：
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page43 {
  build() {
    Row() {
      Flex({
        direction: FlexDirection.Column,
        justifyContent: FlexAlign.SpaceBetween,
        alignItems: ItemAlign.Center,
      }) {
        Text('顶部菜单')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Text('底部菜单')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .height('100%')
      .width('100%')
    }
    .height('100%')
  }
}

这种菜单是叠加在正文小说文本之上的，我现在用position绝对定位临时解决了

你的意思是头部跟底部都覆盖在正文之上？，不是A+B+C这种样式吗。是A跟C覆盖在B之上？

是的，小说正文布局

HarmonyOS的鸿蒙Stack是一种层叠布局容器组件，用于在屏幕上预留区域显示重叠元素。子组件按顺序入栈，后添加的覆盖前面的。Stack支持设置子组件的对齐方式（如Alignment.Bottom）和叠放顺序（通过zIndex属性控制，值越大越上层）。Stack常用于广告、卡片层叠等场景，提供强大的页面层叠和位置定位能力。如果问题依旧没法解决请加我微信，我的微信是itying888。

回到顶部