HarmonyOS开发之转场—全屏模态转场

模态转场

​ 鸿蒙的模态转场可以实现将新的页面覆盖到旧的页面而旧的页面不消失，因此为解决实现搜索页面提供了一种方案，省去了页面之家数据的传递，以下给出一种方案。

全屏模态转场

​ 通过bindContentCover属性为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。

绑定组件

Row(){
        Image($r('app.media.more'))
          .width(30)
          .height(30)
          .bindContentCover(this.isPresent, this.NavPage(), {//为组件绑定全屏模态界面
            modalTransition: ModalTransition.NONE,
            onDisappear: () => {
              this.isPresent = !this.isPresent;//设置界面控制状态变量
            }
          })
          .onClick(() => {
            // 改变状态变量，显示模态界面
            this.isPresent = !this.isPresent;
          })
      }
      .padding({right:20,bottom:10})
      .width('100%')
      .backgroundColor("#ab64adf5")
      .justifyContent(FlexAlign.End)

模态界面绘制：

@Builder
  NavPage() { //模态转场
    Column({space:10}) {
      Blank()
        .height('5%')
      Row() {
        Text('天气')
          .fontColor(Color.White)
          .fontSize(30)

      }
      .padding(10)
      .justifyContent(FlexAlign.Start)
      .width('100%')

      Row() {
        Image($r("app.media.search"))
          .width(20)
          .height(20)
          .onClick(()=>{
            if(this.searchText===''){
              this.searchText='输入为空'
            }
            else{
              this.location=this.searchText
              this.refresh()
              console.info('我被点了！')
            }
          })
        TextInput({ placeholder: '请输入要查看的城市', text: this.searchText })
          .placeholderColor('#ffb8b7b7')
          .fontColor(Color.White)
          .fontSize(25)
          .onChange((value:string)=>{
            this.searchText=value
          })
      }
      .justifyContent(FlexAlign.Start)
      .padding({left:15})
      .backgroundColor('#ff4c4b4b')
      .width('95%')
      .borderRadius(21)

      Column() {
        Text("历史记录")
          .fontColor(Color.White)
          .fontSize(20)
        List() {
          ForEach(this.cityCode,(item:string)=>{
            ListItem(){
              Row(){
                Text(item)
                  .fontColor(Color.White)
                  .fontSize(25)
                  .onClick(()=>{
                    this.searchText=item
                  })
              }
              .justifyContent(FlexAlign.Start)
              .width('90%')
            }
            .width('100%')
          })
        }
        .width('100%')

        Text("清除历史记录")
          .fontColor(Color.White)
          .fontSize(20)
          .onClick(()=>{
            this.clearHistory()
          })
      }

    }
    .size({width:'100%',height:'100%'})
    .backgroundColor(Color.Black)
    .transition(TransitionEffect.translate({ y: 1000 })
    .animation({ curve: curves.springMotion(0.6, 0.8) }))//设置界面弹出动画效果
  }