如何实现宿主组件隐藏而绑定的半模态页面仍显示的效果
=========================

#### 问题现象

在开发HarmonyOS应用时，为宿主组件绑定了半模态页面，点击后显示半模态页面。而该组件可以隐藏，如何在组件隐藏时，绑定的半模态页面仍显示的效果？目前宿主组件和半模态页面会同时消失。

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/36/v3/g4kN8xjFQRS3FXNtlHWdiQ/zh-cn_image_0000002628395792.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133916Z&HW-CC-Expire=86400&HW-CC-Sign=BEACAA9DBFA4BDE914CD1204C8FB4E8C15077BEA089F71F1ABF54CD51B1FEB10 "点击放大")

问题代码示例参考如下：

@Entry
@Component
struct Index {
  @State isShow: boolean \= true;
  @State sheetShow: boolean \= false;

  @Builder
  SheetBuilder() {
    Text('半模态内容')
      .margin({ top: 16 })
  }

  build() {
    Column({ space: 16 }) {
      Text('点击')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .onClick(() \=\> {
          this.sheetShow \= !this.sheetShow;
          setTimeout(() \=\> {
         _   // 隐藏绑定bindSheet的组件_
            this.isShow \= false;
          }, 3000)
        })

      if (this.isShow) {
        Text('绑定bindSheet的组件')
          .bindSheet($$this.sheetShow, this.SheetBuilder(), {
            height: 500
          })
      }
    }
    .padding(24)
    .height('100%')
    .width('100%')
  }
}

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/31/v3/TGtufUAVQC6yERYvI3j96w/zh-cn_image_0000002658795059.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133916Z&HW-CC-Expire=86400&HW-CC-Sign=954E801BD0C11026956C38B4F5417AB13D5FB1D30B10CCF4B6268914EA5CE691 "点击放大")

#### 背景知识

*   [半模态转场](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sheet-transition)默认是模态形式的非全屏弹窗式交互页面，允许部分底层父视图可见，帮助用户在与半模态交互时保留其父视图环境。
*   [visibility](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-visibility#visibility)是ArkUI框架中用于控制组件显隐状态的通用属性，通过设置不同[Visibility](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#visibility)枚举值可实现三种显示模式：完全可见（Visibility.Visible）、不可见但占位（Visibility.Hidden）、完全隐藏不占位（Visibility.None），该属性是组件的通用属性，是处理动态界面布局的核心工具之一。

#### 解决方案

问题代码中通过isShow控制了整个宿主组件的存在与否。当宿主组件不存在时，与其绑定的半模态弹窗自然也不存在。

可以通过控制Visibility.Visible与Visibility.None模式的切换，控制宿主组件的显隐，当宿主组件隐藏时，仍然存在于组件树中，半模态页面也会显示。

@Entry
@Component
struct SemiModal {
  @State isShow: boolean \= true;
  @State sheetShow: boolean \= false;

  @Builder
  SheetBuilder() {
    Text('半模态内容')
      .margin({ top: 16 })
  }

  build() {
    Column({ space: 16 }) {
      Text('点击')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .onClick(() \=\> {
          this.sheetShow \= !this.sheetShow;
          setTimeout(() \=\> {
            _//_ _隐藏绑定bindSheet的组件_
            this.isShow \= false;
          }, 3000);
        })

      Text('绑定bindSheet的组件')
       _ // 利用visibility属性控制组件的显隐_
        .visibility(this.isShow ? Visibility.Visible : Visibility.None)
        .bindSheet($$this.sheetShow, this.SheetBuilder(), {
          height: 500
        })
    }
    .padding(24)
    .height('100%')
    .width('100%')
  }
}