HarmonyOS鸿蒙Next中如何解决navigation分栏时NavDestination中使用半模态宽度为全屏而不是NavDestination页面的宽度

HarmonyOS鸿蒙Next中如何解决navigation分栏时NavDestination中使用半模态宽度为全屏而不是NavDestination页面的宽度

import { AppStorageV2 } from "@kit.ArkUI";

@Builder
export function CardViewBuilder() {
  CardView()
}

@ComponentV2
export struct CardView{
  @Local isShow: boolean = true;

  aboutToAppear(): void {
  }

  @Builder
  cardBuilder() {
    }
    .padding(15)
    .width('100%')
    .height('100%')
  }

  build() {
    NavDestination(){
    }
    .bindSheet($$this.isShow, this.cardBuilder(), {
      showClose:false,
      shouldDismiss: () => false,
      preferType: SheetType.BOTTOM,
      onWillAppear: () => {
        console.info("BindSheet onWillAppear.");
      },
      onAppear: () => {
        console.info("BindSheet onAppear.");
      },
      onWillDisappear: () => {
        console.info("BindSheet onWillDisappear.");
      },
      onDisappear: () => {
        console.info("BindSheet onDisappear.");
      }
    })
    .hideBackButton(true)
    .onReady((context: NavDestinationContext) => {
      this.navPathStack = context.pathStack;
    })
  }
}

cke_183.png


更多关于HarmonyOS鸿蒙Next中如何解决navigation分栏时NavDestination中使用半模态宽度为全屏而不是NavDestination页面的宽度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

  1. SheetMode.OVERLAY(默认值):半模态在当前UIContext内顶层显示,在所有页面之上,和弹窗类组件显示在一个层级

  2. SheetMode.EMBEDDED:半模态在当前页面内的顶层显示

你的代码中没有设置mode属性,因此使用了默认的SheetMode.OVERLAY,导致半模态在整个窗口顶层显示,宽度自然就是全屏宽度。

解决方案

将bindSheet的mode属性设置为SheetMode.EMBEDDED,使半模态限制在NavDestination页面范围内:

import { AppStorageV2 } from "@kit.ArkUI";

 @Builder

 export function CardViewBuilder() {

   CardView()

 }

 @ComponentV2

 export struct CardView{

   @Local isShow: boolean = true;

   navPathStack: NavPathStack | null = null;

   @Builder

   cardBuilder() {

     Column() {

       // 你的内容

     }

     .padding(15)

     .width('100%')

     .height('100%')

   }

   build() {

     NavDestination(){

       Column() {

         // 你的页面内容

       }

     }

     .bindSheet($this.isShow, this.cardBuilder(), {

       showClose: false,

       shouldDismiss: () => false,

       preferType: SheetType.BOTTOM,

       mode: SheetMode.EMBEDDED,  // 关键:设置为EMBEDDED模式

       onWillAppear: () => {

         console.info("BindSheet onWillAppear.");

       },

       onAppear: () => {

         console.info("BindSheet onAppear.");

       },

       onWillDisappear: () => {

         console.info("BindSheet onWillDisappear.");

       },

       onDisappear: () => {

         console.info("BindSheet onDisappear.");

       }

     })

     .hideBackButton(true)

     .onReady((context: NavDestinationContext) => {

       this.navPathStack = context.pathStack;

     })

   }

 }

注意事项

使用SheetMode.EMBEDDED时需要注意:

  1. 页面必须已挂载:确保NavDestination页面节点已成功挂载后再显示半模态,否则半模态将无法挂载。建议在onAppear回调中设

置isShow = true

  1. 显示层级:半模态只在当前NavDestination页面内顶层显示,新起的页面可以覆盖在半模态上

  2. Navigation优先级:如果存在NavDestination,半模态会优先挂载在NavDestination上

更多关于HarmonyOS鸿蒙Next中如何解决navigation分栏时NavDestination中使用半模态宽度为全屏而不是NavDestination页面的宽度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


很感谢您的回复，问题已经解决了，

学习了

在HarmonyOS Next中，半模态默认全屏显示。可通过设置modalTransition和modalHeight属性调整半模态高度，但宽度默认与屏幕一致。若需适配NavDestination宽度，需使用setContentCustomWidth方法并传入目标容器的宽度值。具体实现需在NavDestination布局中定义半模态容器，通过componentUtils.getMeasureSpec获取实际宽度后动态设置。

在HarmonyOS Next中，当NavDestination使用bindSheet时，半模态默认会占据全屏宽度。要限制其宽度与NavDestination一致，需在cardBuilder中明确设置宽度。修改cardBuilder的width属性，使用百分比或具体数值，例如.width('80%')或.width(300)，避免使用'100%'。同时，确保SheetType为BOTTOM，并通过样式调整对齐NavDestination的布局边界。检查NavDestination的父容器宽度，确保半模态继承正确约束。若问题持续，尝试在bindSheet配置中添加自定义尺寸参数。

回到顶部