HarmonyOS 鸿蒙Next模态内跳转不关闭

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

HarmonyOS 鸿蒙Next模态内跳转不关闭 使用模态弹出界面，点击界面元素跳转其他页面 再返回时 模态页面就会自动关闭，有什么方法或者配置能让模态不关闭？ 或者怎么能给@Entry修饰的页面设置透明背景，透明部分能看到上一个页面 做一个假模态效果

Harmonyos Next教程
2 回复

可参考以下demo：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct BindSheetDemo {
  // 半模态转场显示隐藏控制
  @State isShowSheet: boolean = false;
  private menuList: string[] = ['不要辣', '少放辣', '多放辣', '不要香菜', '不要香葱', '不要一次性餐具', '需要一次性餐具'];

  onPageShow(): void {
    this.isShowSheet = !this.isShowSheet;
    console.log('okokokokokok')
  }

  // 通过[@Builder](/user/Builder)构建半模态展示界面
  [@Builder](/user/Builder)
  mySheet() {
    Column() {
      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
        ForEach(this.menuList, (item: string) => {
          Text(item)
            .fontSize(16)
            .fontColor(0x333333)
            .backgroundColor(0xf1f1f1)
            .borderRadius(8)
            .margin(10)
            .padding(10)
            .onClick(() => {
              router.pushUrl({
                url: 'pages/pageTwo'
              })
            })
        })
      }
      .padding({ top: 18 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }

  build() {
    Column() {
      Text('口味与餐具')
        .fontSize(28)
        .padding({ top: 30, bottom: 30 })
      Column() {
        Row() {
          Row()
            .width(10)
            .height(10)
            .backgroundColor('#a8a8a8')
            .margin({ right: 12 })
            .borderRadius(20)
          Column() {
            Text('选择点餐口味和餐具')
              .fontSize(16)
              .fontWeight(FontWeight.Medium)
          }
          .alignItems(HorizontalAlign.Start)
          Blank()
          Row()
            .width(12)
            .height(12)
            .margin({ right: 15 })
            .border({
              width: { top: 2, right: 2 },
              color: 0xcccccc
            })
            .rotate({ angle: 45 })
        }
        .borderRadius(15)
        .shadow({ radius: 100, color: '#ededed' })
        .width('90%')
        .alignItems(VerticalAlign.Center)
        .padding({ left: 15, top: 15, bottom: 15 })
        .backgroundColor(Color.White)
        // 通过选定的半模态接口，绑定模态展示界面，style中包含两个参数，一个是设置半模态的高度，不设置时默认高度是Large，一个是是否显示控制条DragBar，默认是true显示控制条，通过onDisappear控制状态变量变换。
        .bindSheet(this.isShowSheet, this.mySheet(), {
          height: 300,
          dragBar: false,
          onDisappear: () => {
            this.isShowSheet = !this.isShowSheet;
          }
        })
        .onClick(() => {
          this.isShowSheet = !this.isShowSheet;
        })
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xf1f1f1)
  }
}

目前半模态组件（bindSheet），全模态组件（bindContentCover），自定义弹窗组件（CustomDialog）都不支持返回时自动还原组件，因为所有的弹窗接口，Bindxx 都是跟宿主组件严格绑定的，如果想设置透明背景，可参考此demo：

import { webview } from '[@kit](/user/kit).ArkWeb';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@Provide](/user/Provide)('NavPathStack') pageStack: NavPathStack = new NavPathStack()

  [@Builder](/user/Builder)
  PagesMap(name: string) {
    if (name == 'DialogPage') {
      DialogPage()
    }
  }

  build() {
    Navigation(this.pageStack) {
      Button('Push DialogPage')
        .margin(20)
        .width('80%')
        .onClick(() => {
          this.pageStack.pushPathByName('DialogPage', '');
        })
    }
    .mode(NavigationMode.Stack)
    .title('Main')
    .navDestination(this.PagesMap)
  }
}

[@Component](/user/Component)
export struct DialogPage {
  [@Consume](/user/Consume)('NavPathStack') pageStack: NavPathStack;
  webContent: string =
    "<p>三月</p><p><img src=\"https://qiance.qianfanyun.com/1539566909.gif\" title=\"1539566909.gif\" alt=\"0133e75674ca4332f8759f043f3536.gif\"/></p>";
  webContent2: string = 
    "`<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"><html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no\"><meta content=\"text/html;charset=UTF-8\" http-equiv=\"Content-Type\"/><meta content=\"no-cache,must-revalidate\" http-equiv=\"Cache-Control\"/><meta content=\"no-cache\" http-equiv=\"pragma\"/><meta content=\"0\" http-equiv=\"expires\"/><meta content=\"telephone=no, address=no\" name=\"format-detection\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no\"/><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"/><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"/><style type=\"text/css\">body{max-width: 100%;padding:0; margin:0;font-size: 16px; color:#333; line-height:24px;}p{margin-top:5px;margin-bottom:5px;}a{color:blue;}img{max-width: 100%;}</style></head><body><p>今天吃什么，晒出你的午餐吧！！！</p></body></html>`";
}

更多关于HarmonyOS 鸿蒙Next模态内跳转不关闭的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对“HarmonyOS 鸿蒙Next模态内跳转不关闭”的问题，这通常涉及到鸿蒙系统在应用开发中模态界面（Modal Interface）的管理。在鸿蒙系统中，模态跳转通常用于临时显示一个界面，而该界面在完成任务后应当能够关闭并返回到先前的界面。

如果你在Next模态内进行跳转而不希望关闭当前模态，这可能需要调整你的界面跳转逻辑。鸿蒙系统提供了丰富的界面跳转API，允许开发者控制跳转行为，包括是否关闭当前界面。

具体来说，你可以检查以下几个方面：

  1. 跳转API的使用：确保你使用的跳转API符合你的需求。鸿蒙系统可能提供了多种跳转方式，包括带返回和不带返回的跳转。

  2. 界面栈管理：理解并管理你的应用界面栈。在某些情况下，你可能需要手动管理界面栈，以确保界面按预期显示和关闭。

  3. 生命周期管理：确保你的界面生命周期管理正确。在鸿蒙系统中，界面的生命周期对界面的显示和关闭有重要影响。

如果上述方法无法解决你的问题，可能是因为你的具体实现细节有所不同。此时，建议查阅鸿蒙系统的官方文档，了解更详细的API使用说明和界面管理技巧。

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

回到顶部