HarmonyOS 鸿蒙Next：为啥使用Stack设置一个高度非屏幕高度默认就显示在底部呢？

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：为啥使用Stack设置一个高度非屏幕高度默认就显示在底部呢？

创建了一个Stack，设置了高度为非屏幕高度，发现默认显示在底部，鸿蒙系统的坐标系我理解不应该跟android一样都是左上角开始，那不应该默认现在顶部吗？有大佬给解释下吗？

Harmonyos Next教程
5 回复
坐标系是一样的，左上角开始，肯定是某些代码导致了这种效果。

build() { Stack() { Stack({ alignContent: Alignment.Center }) { Image(“https://p19.qhimg.com/bdr/__/d/_open360/128xqx/501.jpg”).width(“100%”).height(200) }.backgroundColor(Color.Green).height(400).margin({ top: 10 })

  Tabs() {
    ForEach(this.tabBarArray, (tabsItem: NewsTypeBean, index?: number) => {
      TabContent() {
        NewsList({ index, currentIndex: $currentIndex })
      }
      .tabBar(this.TabBuilder(tabsItem.id))
    }, (tabsItem: NewsTypeBean) => JSON.stringify(tabsItem));
  }
  .barHeight($r('app.float.nav_height'))
  .height(Constants.FULL_PERCENT)
  .barMode(BarMode.Scrollable)
  .onChange((index: number) => {
    this.currentIndex = index;
  })
  .vertical(false)

  Image($r('app.media.ic_add'))
    .width($r('app.float.btn_size'))
    .height($r('app.float.btn_size'))
    .margin({ bottom: $r('app.float.btn_margin'), right: $r('app.float.btn_margin') })
    .onClick(() => {
      logger.debug("sunshine 123 context=" + this.context)
      router.pushUrl({ url: 'pages/Flex' });
    })
}
.width(Constants.FULL_PERCENT)
.height(Constants.FULL_PERCENT)
.backgroundColor($r('app.color.listColor'))

} ,这是渲染部分的代码，我看了下并没有设置改变布局定位的代码啊

你说的是这个绿色背景的Stack为什么不在顶部吗？因为Stack子组件的默认对齐方式就是Alignment.Center，所以这个绿色的Stack在父Stack中是居中的。

哦哦，好的，谢啦

在HarmonyOS中，使用Stack组件设置非屏幕高度默认显示在底部，可能是由于Stack的默认对齐方式或父容器的布局设置导致的。Stack的对齐方式可以通过alignment属性调整，如Alignment.Top、Alignment.Center等。此外，检查父容器的布局和约束条件也很重要，因为它们可能影响了Stack的最终位置。如果问题依旧没法解决，请加我微信，我的微信是itying888。

回到顶部