全屏模態轉場

通過bindContentCover屬性為組件綁定全屏模態頁面，在組件插入和刪除時可通過設置轉場參數ModalTransition顯示過渡動效。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 10開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。不支持橫豎屏切換。

屬性

名稱	參數	參數描述
bindContentCover	isShow: boolean, builder: [CustomBuilder], options?: [ContentCoverOptions]	給組件綁定全屏模態頁面，點擊后顯示模態頁面。模態頁面內容自定義，顯示方式可設置無動畫過渡，上下切換過渡以及透明漸變過渡方式。 isShow: 是否顯示全屏模態頁面。從API version 10開始，該參數支持[$$]雙向綁定變量 builder: 配置全屏模態頁面內容。 options: 配置全屏模態頁面的可選屬性。

ContentCoverOptions

名稱	類型	必填	描述
modalTransition	[ModalTransition]	否	全屏模態頁面的轉場方式。
backgroundColor	[ResourceColor]	否	全屏模態頁面的背板顏色。
onAppear	() => void	否	全屏模態頁面顯示回調函數。
onDisappear	() => void	否	全屏模態頁面回退回調函數。

示例

示例1

全屏模態無動畫轉場模式下，自定義轉場動畫。

// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false

  @Builder myBuilder2() {
    Column() {
      Button("close modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
  }

  @Builder myBuilder() {
    Column() {
      Button("transition modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow2 = true;
        }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () = > {console.log("BindContentCover onAppear.")}, onDisappear: () = > {console.log("BindContentCover onDisappear.")}})

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() = > {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () = > {console.log("BindContentCover onAppear.")}, onDisappear: () = > {console.log("BindContentCover onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#ff49c8ab")
    .width('100%')
    .height('100%')
  }
}

zh-cn_full_screen_modal_none_1

示例2

全屏模態無動畫轉場模式下，自定義轉場動畫。

// xxx.ets
import curves from '@ohos.curves';
@Entry
@Component
struct ModalTransitionExample {
  @State  @Watch("isShow1Change") isShow:boolean = false
  @State  @Watch("isShow2Change") isShow2:boolean = false
  @State isScale1:number = 1;
  @State isScale2:number = 1;
  @State flag: boolean = true
  @State show: string = 'show'

  isShow1Change() {
    this.isShow ? this.isScale1 = 0.95 : this.isScale1 = 1
  }
  isShow2Change() {
    this.isShow2 ? this.isScale2 = 0.95 : this.isScale2 = 1
  }
  @Builder myBuilder2() {
    Column() {
      Button("close modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
  }


  @Builder myBuilder() {
    Column() {
      Button("transition modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow2 = true;
        }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () = > {console.log("BindContentCover onAppear.")}, onDisappear: () = > {console.log("BindContentCover onDisappear.")}})

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .scale({x: this.isScale2, y: this.isScale2})
    .animation({curve:curves.springMotion()})
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() = > {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () = > {console.log("BindContentCover onAppear.")}, onDisappear: () = > {console.log("BindContentCover onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#ff49c8ab")
    .width('100%')
    .height('100%')
    .scale({ x: this.isScale1, y: this.isScale1 })
    .animation({ curve: curves.springMotion() })
  }
}

zh-cn_full_screen_modal_none_2

示例3

全屏模態上下切換轉場。

// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false

  @Builder myBuilder2() {
    Column() {
      Button("close modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
  }

  @Builder myBuilder() {
    Column() {
      Button("transition modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow2 = true;
        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Gray, onAppear: () = > {console.log("BindContentCover onAppear.")}, onDisappear: () = > {console.log("BindContentCover onDisappear.")}})

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() = > {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Pink, onAppear: () = > {console.log("BindContentCover onAppear.")}, onDisappear: () = > {console.log("BindContentCover onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }
}

zh-cn_full_screen_modal_default

示例4

全屏模態透明度漸變轉場。
鴻蒙文檔.png

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`
// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false

  @Builder myBuilder2() {
    Column() {
      Button("close modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }


  @Builder myBuilder() {
    Column() {
      Button("transition modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow2 = true;
        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () = > {console.log("BindContentCover onAppear.")}, onDisappear: () = > {console.log("BindContentCover onDisappear.")}})

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()= >{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() = > {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () = > {console.log("BindContentCover onAppear.")}, onDisappear: () = > {console.log("BindContentCover onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }
}

zh-cn_full_screen_modal_alpha

審核編輯黃宇

聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容侵權或者其他違規問題，請聯系本站處理。舉報投訴

模態

模態

+關注

關注
0

文章
9

瀏覽量
6276
鴻蒙

鴻蒙

+關注

關注
57

文章
2392

瀏覽量
43050

HarmonyOS開發案例：【轉場動畫】

在本教程中，我們將會通過一個簡單的樣例，學習如何基于ArkTS的聲明式開發范式開發轉場動畫。其中

發表于 05-06 15:42 ?1135次閱讀

HarmonyOS<b class='flag-5'>開發</b>案例：【<b class='flag-5'>轉場</b>動畫】

OpenHarmony實戰開發-如何實現模態轉場

實現。使用bindContentCover構建全屏模態轉場效果 bindContentCover接口用于為組件綁定全屏模態頁面，在組件出現

發表于 04-28 14:47

模態窗口的設置問題

Labview中，一個窗口如果設置為模態窗口，則打開后，點擊其他窗口應該是沒有作用的。我設置的幾個子VI為模態窗口，效果都沒有問題。但有一個子VI，

發表于 11-28 21:56

【木棉花】ArkUI轉場動畫的使用——學習筆記

建名為Item的子組件，聲明子組件Item的UI布局并添加樣式。創建Stack組件，包含圖片和文本，然后添加文本信息和頁面跳轉事件，定義變量text和uri。其中text用于給Text組件設置文本信息

發表于 12-19 18:00

HarmonyOS應用開發-ACE 2.0轉場動畫體驗

一、組件說明展現了ACE 2.0轉場動畫的使用。其中包含頁面間轉場、組件內轉場以及共享元素轉場。二、效果圖三、完整代碼地址https://gitee.com/jltfcloudcn/j

發表于 08-23 10:30

Harmony/OpenHarmony應用開發-轉場動畫組件內轉場

跟隨animateTo中的配置）。說明：從API Version 7開始支持。開發語言ets.屬性：名稱參數類型參數描述transitionTransitionOptions所有參數均為可選參數

發表于 12-28 16:19

HarmonyOS/OpenHarmony應用開發-轉場動畫共享元素轉場

設置頁面間轉場時共享元素的轉場動效。說明：從API Version 7開始支持。開發語言ets.示例代碼

發表于 01-04 17:22

HarmonyOS/OpenHarmony應用開發-ArkTS的聲明式開發范式

基于ArkTS的聲明式開發范式的方舟開發框架是一套開發極簡、高性能、

發表于 01-17 15:09

鴻蒙ArkTS聲明式開發：跨平臺支持列表【按鍵事件】

按鍵事件指組件與鍵盤、遙控器等按鍵設備交互時觸發的事件，適用于所有可獲焦組件，例如Button。對于Text，Image等默認不可獲焦的組件，可以設置focusable屬性為true后使用按鍵事件。

發表于 05-28 18:12 ?919次閱讀

鴻蒙ArkTS聲明式開發：跨平臺支持列表【顯隱控制】通用屬性

控制當前組件顯示或隱藏。注意，即使組件處于隱藏狀態，在頁面刷新時仍存在重新創建過程，因此當對性能有嚴格要求時建議使用[條件渲染]代替。默認值：Visibility.Visible 從API version 9開始，該接口支持在ArkTS卡片中使用。

發表于 06-03 14:46 ?640次閱讀

鴻蒙ArkTS聲明式開發：跨平臺支持列表【形狀裁剪】通用屬性

參數為相應類型的組件，按指定的形狀對當前組件進行裁剪；參數為boolean類型時，設置是否按照父容器邊緣輪廓進行裁剪。默認值：false 從API version 9開始，該接口支持在ArkTS卡片中使用。

發表于 06-04 15:22 ?517次閱讀

鴻蒙ArkTS聲明式開發：跨平臺支持列表【菜單控制】通用屬性

為組件綁定彈出式菜單，彈出式菜單以垂直列表形式顯示菜單項，可通過長按、點擊或鼠標右鍵觸發。

發表于 06-06 09:17 ?764次閱讀

鴻蒙ArkTS聲明式開發：跨平臺支持列表【多態樣式】通用屬性

設置組件不同狀態的樣式。從API version 9開始，該接口支持在ArkTS卡片中使用。

發表于 06-07 09:48 ?454次閱讀

鴻蒙ArkTS聲明式開發：跨平臺支持列表【前景色設置】通用屬性

設置組件的前景顏色或者根據智能取色策略設置前景顏色。

發表于 06-07 16:19 ?450次閱讀

鴻蒙ArkTS聲明式開發：跨平臺支持列表【半模態轉場】模態轉場設置

通過bindSheet屬性為組件綁定半模態頁面，在組件插入時可通過設置自定義或默認的內置高度確定半模態大小。

發表于 06-12 21:09 ?1156次閱讀