HarmonyOS 鸿蒙Next 如何实现下拉页面完成模态转场

模态转场不一定必须绑定到一个组件上，可以使用if实现模态转场

参考文档：使用if实现模态转场

文档示例中是通过定义状态变量isShowShare控制页面显示通过.onClick来改变状态变量，显示模态页面，您在这个下拉页面的回调中执行修改这个状态变量的方法进行模态转场

请问下您说的监控不到刷新状态具体指的是什么是使用Refiesh组件不会刷新嘛？能提供下demo嘛？

Refiesh组件：子组件

您看下这个demo

//Test123

@Entry
@Component
struct ModalTransitionWithIf {
  private listArr: string[] = ['WLAN', '蓝牙', '个人热点', '连接与共享'];
  private shareArr: string[] = ['投屏', '打印', 'VPN', '私人DNS', 'NFC'];

  // 第一步：定义状态变量控制页面显示
  @State isShowShare: boolean = false;
  private shareFunc(): void {
    animateTo({ duration: 500 }, () => {
      this.isShowShare = !this.isShowShare;
    })
  }
  @State isRefreshing: boolean = false
  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
  build(){

    // 第二步：定义Stack布局显示当前页面和模态页面
    Stack () {
      Column () {
        Refresh({ refreshing: $$this.isRefreshing}) {
          List () {
            ForEach(this.arr, (item: string) => {
              ListItem () {
                Text('' + item)
                  .width('70%').height(80).fontSize(16).margin(10)
                  .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
              }
            }, (item: string) => item)
          }
          .onScrollIndex((first: number) => {
            console.info(first.toString())
          })
          .width('100%')
          .height('100%')
          .alignListItem(ListItemAlign.Center)
          .scrollBar(BarState.Off)
        }
        .onStateChange((refreshStatus: RefreshStatus) => {
          console.info('Refresh onStatueChange state is ' + refreshStatus)
        })
        .onOffsetChange((value: number) => {
          console.info('Refresh onOffsetChange offset:' + value)
        })
        .onRefreshing(() => {
          setTimeout(() => {
            this.isRefreshing = false
            this.shareFunc();
          }, 2000)
          console.log('onRefreshing test')
        })
        .backgroundColor(0x89CFF0)
        .refreshOffset(64)
        .pullToRefresh(true)
      }
      .width('100%')
      .height('100%')
      .backgroundColor(0xfefefe)
      
      // 第三步：在if中定义模态页面，显示在最上层，通过if控制模态页面出现消失
      if(this.isShowShare){
        Column () {
          Column () {
            Row () {
              Row () {
                Row()
                  .width(16)
                  .height(16)
                  .border({
                    width: { left: 2, top: 2 },
                    color: 0x333333
                  })
                  .rotate({ angle: -45 })
              }
              .padding({ left: 15, right: 10 })
              .onClick(() => {
                this.shareFunc();
              })
              Text('连接与共享')
                .fontSize(28)
                .fontColor(0x333333)
            }
            .padding({ top: 30 })
          }
          .width('90%')
          .padding({bottom: 15})
          .alignItems(HorizontalAlign.Start)
          List({ space: 12, initialIndex: 0 }) {
            ForEach(this.shareArr, (item: string) => {
              ListItem () {
                Row () {
                  Row () {
                    Text(`${item.slice(0, 1)}`)
                      .fontColor(Color.White)
                      .fontSize(14)
                      .fontWeight(FontWeight.Bold)
                  }
                  .width(30)
                  .height(30)
                  .backgroundColor('#a8a8a8')
                  .margin({ right: 12 })
                  .borderRadius(20)
                  .justifyContent(FlexAlign.Center)
                  Column () {
                    Text(item)
                      .fontSize(16)
                      .fontWeight(FontWeight.Medium)
                  }
                  .alignItems(HorizontalAlign.Start)
                  Blank()
                  Row()
                    .width(12)
                    .height(12)
                    .margin({ right: 15 })
                    .border({
                      width: { top: 2, right: 2 },
                      color: 0xcccccc
                    })
                    .rotate({ angle: 45 })
                }
                .borderRadius(15)
                .shadow({ radius: 100, color: '#ededed' })
                .width('90%')
                .alignItems(VerticalAlign.Center)
                .padding({ left: 15, top: 15, bottom: 15 })
                .backgroundColor(Color.White)
              }
              .width('100%')
            }, (item: string): string => item)
          }
          .width('100%')
        }
        .width('100%')
        .height('100%')
        .backgroundColor(0xffffff)
        
        // 第四步：定义模态页面出现消失转场方式
        .transition(TransitionEffect.OPACITY
          .combine(TransitionEffect.translate({ x: '100%' }))
          .combine(TransitionEffect.scale({ x: 0.95, y: 0.95 })))
      }
    }
  }
}