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

HarmonyOS
4h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

参考代码:

//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)
    }
  }
}
分享
微博
QQ
微信
回复
3h前
相关问题
HarmonyOS 引用自定义web模块问题
800浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
376浏览 • 1回复 待解决
HarmonyOS自定义相册选择页面咨询
399浏览 • 1回复 待解决
HarmonyOS 自定义弹窗遮罩未全屏
665浏览 • 1回复 待解决