HarmonyOS 鸿蒙Next Navigation子组件高度无法占满的问题

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

代码如下：就显示两个色块，绿色是Navigation，红色是内部的子组件，子组件无法占满高度，还差很大一截，不知道是什么原因，请大佬指教，api版本12，使用状态管理v2

import { LoginAccountPage } from '@ohos/common'

@Entry
@ComponentV2
struct Index {
  @Provider("indexNav") nav: NavPathStack = new NavPathStack()

  @Builder
  LoginPageBuilder(name: string, params: Object) {
    LoginAccountPage()
  }

  build() {
    Navigation(this.nav) {
      Column() {
        Text("首页")
      }.size({ width: "100%", height: "100%" })
      .backgroundColor("#fffd7d7d")
    }
    .size({ width: "100%", height: "100%" })
    .mode(NavigationMode.Stack)
    .navDestination(this.LoginPageBuilder)
    .hideNavBar(false)
    .hideTitleBar(false)
    .backgroundColor("#ff94fad7")
  }
}

image.png


更多关于HarmonyOS 鸿蒙Next Navigation子组件高度无法占满的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
7 回复
Navigation组件是路由导航的根视图容器，所以他是全屏的，在其中设置组件或者样式的时候默认实在安全区中设置的，需要规避上面的摄像头和下面的上划提示，你可以参考下沉浸式，开发应用沉浸式效果-开发布局-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者，配置后就可以全屏了

更多关于HarmonyOS 鸿蒙Next Navigation子组件高度无法占满的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


没有撑开是因为对于navigation 上部分是标题栏 中间是内容区（红色）；下部分是工具栏；

参考链接 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5#设置页面显示模式

你这个LoginAccountPage()我这报错，我换成了我自己的一个界面，显示算是正常吧：

import { Index } from './Index'

@Entry
@ComponentV2
struct Main {
  @Provider("indexNav") nav: NavPathStack = new NavPathStack()

  @Builder
  LoginPageBuilder(name: string, params: Object) {
    Index()
  }

  build() {
    Navigation(this.nav) {
      Column() {
        Text("首页")
      }.size({ width: "100%", height: "100%" })
      .backgroundColor("#fffd7d7d")
    }
    .size({ width: "100%", height: "100%" })
    .mode(NavigationMode.Stack)
    .navDestination(this.LoginPageBuilder)
    .hideNavBar(false)
    .hideTitleBar(false)
    .backgroundColor("#ff94fad7")
  }
}

image.png

我感觉代码并无问题吧

代码没问题的，没有沉浸式的原因，上下默认需要避让的

在HarmonyOS鸿蒙系统中，针对Next Navigation子组件高度无法占满的问题，通常是由于布局配置或样式设置不当导致的。

  1. 检查布局文件：首先确认你的布局文件中，Next Navigation子组件是否设置了正确的布局参数。确保使用了如match_parent或适当的百分比值来设置高度，而不是固定的dp或px值。

  2. 审查样式设置：检查Next Navigation子组件的样式定义，确认是否有设置影响高度的属性，如padding、margin等。这些属性可能会减少组件的实际显示高度。

  3. 父容器影响：确认Next Navigation子组件的父容器是否设置了正确的布局和样式。父容器的高度和布局方式会直接影响子组件的显示。

  4. 动态调整：如果Next Navigation子组件的高度需要根据内容动态调整，确保你的代码逻辑正确处理了这种动态变化。

  5. 版本兼容性：检查你的HarmonyOS SDK版本是否支持当前使用的Next Navigation组件的所有特性。有时候，组件的行为可能会随着SDK版本的更新而发生变化。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部