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

HarmonyOS

cbaby

2024-05-26 15:03:55

浏览

回答 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()) 
    } 
  } 
}

实现效果

弹窗关闭弹窗显示