不使用弹窗,通过 stack 和属性显隐模拟一个弹窗

不使用弹窗,通过 stack 和属性显隐模拟一个弹窗

HarmonyOS
2024-05-26 15:03:55
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
makeer

使用的 OS 能力及相关的核心 API

  • Stack 容器
  •  opacity 属性
  •  position 属性

核心代码解释

  • Stack 容器保证子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件,页面主体内容作为第一个组件先入栈,弹窗内容作为最后一个组件最后入栈。
  • opacity 属性控制不同组件的显示透明度,弹窗显示时,弹窗透明设置为最大 1,主体内容透明度按需调整。
  •  position 属性控制弹窗位置。
@Entry 
@Component 
struct Index { 
  @State bottomOpacity: number = 1; 
  @State topOpacity: number = 0; 
 
  popShow() { 
    console.info("Pop show ..."); 
    if (this.topOpacity === 1) { 
      return; 
    } 
    console.info("Pop show start ..."); 
    this.bottomOpacity = 0.6; 
    this.topOpacity = 1; 
    console.info("Pop show end ..."); 
  } 
 
  popHide(): void { 
    console.info("Pop hide ..."); 
    if (this.topOpacity === 0) { 
      return; 
    } 
    console.info("Pop hide start ..."); 
    this.bottomOpacity = 1; 
    this.topOpacity = 0; 
    console.info("Pop hide end ..."); 
  } 
 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      Column() { 
        Text('First child, show in level 1') 
          .width('60%') 
          .height('20%') 
          .align(Alignment.Center) 
      } 
      .width('100%') 
      .height('100%') 
      .backgroundColor(0xd2cab3) 
      .justifyContent(FlexAlign.Center) 
      .opacity(this.bottomOpacity) 
 
      this.popup(); 
 
      Button('Click Me') 
        .width('40%') 
        .height('10%') 
        .backgroundColor(Color.Green) 
        .zIndex(3) 
        .onClick(() => this.popShow()) 
    } 
    .width('100%') 
    .height('100%') 
    .margin({ top: 5 }) 
  } 
 
  @Builder 
  popup() { 
    if (this.topOpacity === 1) { 
      Column() { 
        Text('Second child, show in level2') 
          .width('70%') 
          .height('20%') 
          .align(Alignment.Center) 
      } 
      .width('70%') 
      .height('20%') 
      .backgroundColor(0xc1cbac) 
      .justifyContent(FlexAlign.Center) 
      .position({ 
        x: 50, 
        y: 90 
      }) 
      .opacity(this.topOpacity) 
      .onClick(() => this.popHide()) 
    } 
  } 
}

实现效果

弹窗关闭弹窗显示

分享
微博
QQ
微信
回复
2024-05-27 20:09:42
相关问题
ArkTS如何实现一个底部弹窗
69浏览 • 1回复 待解决
如何在全局实现一个自定义dialog弹窗
1186浏览 • 1回复 待解决
合理选择条件渲染控制
240浏览 • 1回复 待解决
使用jsBridge拉起弹窗
507浏览 • 1回复 待解决
如何通过定时器画布实现一个时钟
393浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
492浏览 • 1回复 待解决
自定义弹窗使用相关问题
403浏览 • 1回复 待解决
如何在自定义弹窗中再次弹窗
1003浏览 • 1回复 待解决
弹窗跳转到页面后返回弹窗不消失
478浏览 • 1回复 待解决
如何实现弹窗软键盘的避让
594浏览 • 1回复 待解决
如何通过DevEco新建一个js/ts的module?
4144浏览 • 1回复 待解决
后台弹窗权限怎么判断?
3524浏览 • 1回复 待解决