在HarmonyOS NEXT开发中全屏的自定义组件被其他页面引用后导致其他页面按钮功能无法使用问题？

Question

在HarmonyOS NEXT开发中全屏的自定义组件被其他页面引用后导致其他页面按钮功能无法使用问题？

Answer 1

可以参考下面代码：

//1.index.ets 
@Entry 
@Component 
struct First { 
  @State visible: Visibility = Visibility.None 
 
  build() { 
    // 使用stack可以实现假的dialog覆盖原页面上面 
    Stack() { 
      Column() { 
        Button('页面底层按钮') 
          .onClick(() => { 
            // showToast('点击了底层按钮') 
            console.log('点击了底层按钮', this.visible) 
          }) 
          .backgroundColor(Color.Blue) 
          .margin({ top: 200 }) 
 
      }.width('100%') 
      .height('100%') 
      .backgroundColor(Color.Red) 
 
      Component1({ visible: $visible }) 
 
    }.width('100%') 
    .height('100%') 
 
  } 
} 
//2.Component1.ets 
@Component 
export struct Component1 { 
  @Link visible: Visibility 
  @State btnvisible: Visibility =  Visibility.Visible 
  build() { 
    Stack() { 
      Row() { 
        // 初始页面 
        Column() { 
          // 触发dialog的地方 
          Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.End}){ 
            Button('click') 
              .type(ButtonType.Normal) 
              .onClick(() => { 
                //用于检测点击事件是否透传到原来的页面，我测了一下是没有透传的，符合dialog规范 
                console.log("hit me!") 
                if (this.visible == Visibility.Visible) { 
                  this.visible = Visibility.None 
                  this.btnvisible = Visibility.Visible 
                } else { 
                  this.visible = Visibility.Visible 
                  this.btnvisible = Visibility.None 
                } 
              }) 
              .fontColor(Color.White) 
              .width(80) 
              .height(80) 
          } 
 
        } 
        .backgroundColor(Color.Green) 
        .alignItems(HorizontalAlign.End) 
        .width(80) 
 
        .visibility(this.btnvisible) 
      } 
 
      // .height(50) 
      .backgroundColor(Color.Yellow) 
      //这里开始是构造弹窗效果主要需要修改的地方，首先是加了一个半透明灰色的蒙层效果 
      Column() { 
        Text('我是弹框内容页面').fontColor(Color.Green) 
      } 
      .width('100%') 
      .height('100%') 
      .onClick(() => { 
        if (this.visible == Visibility.Visible) { 
          this.visible = Visibility.None 
          this.btnvisible = Visibility.Visible 
        } else { 
          this.visible = Visibility.Visible 
          this.btnvisible = Visibility.None 
        } 
      }) 
      // 透明度可以自己调节一下 
      .opacity(0.7) 
      .backgroundColor(Color.Orange) 
      .visibility(this.visible) 
    } 
  } 
}