HarmonyOS如何实现popup内部点击不会dismiss,popup外部点击才会dismiss

HarmonyOS
2024-12-26 14:59:39
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

这边给出下面的样例:

@Entry
@Component
struct Page4 {
  @State showDrawer: boolean = false; // 抽屉显隐
  @State vis: Visibility = Visibility.Hidden;
  drawerHeight: number = 150;
  @State translateY: number = -this.drawerHeight; // 默认位置
  timeout: number = 400; // 动画时长
  setState(showDrawer: boolean){
    this.showDrawer = !this.showDrawer;
    if(this.showDrawer) {
      this.vis = this.showDrawer ? Visibility.Visible : Visibility.Hidden;
    } else {
      setTimeout(() => {
        this.vis = this.showDrawer ? Visibility.Visible : Visibility.Hidden;
      }, this.timeout)
    }
    animateTo({ duration: this.timeout }, () => {
      this.translateY = this.showDrawer ? 0 : -this.drawerHeight;
    })
  }
  @Builder drawerDialog(timeout: number){
    Stack({ alignContent: Alignment.TopStart}) {
      Flex({ direction: FlexDirection.Column}){
        Text('我的设备').fontSize(14)
        Row(){
          Image($r('app.media.startIcon')).width('30').height(20).margin({ right: 10 })
          Text('电脑端  已登录')
          Blank()
          Text('退出登录').fontColor('rgb(23, 205, 142)')
        }
        .width('100%').height('100%').padding(10)
      }
      .width('100%').height(this.drawerHeight)
      .border({ radius: {bottomLeft: 20, bottomRight: 20}})
      .backgroundColor('#fff')
      .hitTestBehavior(HitTestMode.Block)
      .padding(30)
      .animation({ duration: timeout  })
      .translate({ y: this.translateY })
      .zIndex(1)
      Column(){ }
      .width('100%')
      .height('100%')
      .opacity(this.showDrawer ? 1 : 0)
      .backgroundColor('#33000000')
      .animation({ duration: timeout  })
      .onClick(()=>{
        if(!this.showDrawer) return; // 防止在未消失之前点击之后又出现
        this.setState(this.showDrawer); // 点击抽屉消失
      })
    }
    .width('100%')
    .height('100%')
    .visibility(this.vis)
  }
  build() {
    Stack() {
      this.drawerDialog(this.timeout)
      Column() {
        Text('Hello World')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            // 点击出抽屉
            this.setState(this.showDrawer);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-26 18:58:22
相关问题
HarmonyOS Popup会拦截页面点击事件
236浏览 • 1回复 待解决
HarmonyOS Popup背景处理
96浏览 • 1回复 待解决
HarmonyOS Popup宽度问题
222浏览 • 1回复 待解决
HarmonyOS popup宽度自适应
233浏览 • 1回复 待解决
HarmonyOS 子窗口弹出popup问题
252浏览 • 1回复 待解决
HarmonyOS Popup气泡支持边框问题
262浏览 • 1回复 待解决
如何自定义popup弹窗的布局?
669浏览 • 2回复 待解决
popup组件气泡框指向颜色怎么修改?
7577浏览 • 1回复 待解决
HarmonyOS 如何实现长按点击功能
473浏览 • 1回复 待解决
如何实现图片点击跳转?
5814浏览 • 1回复 待解决