HarmonyOS实战开辟：模态转场

模态转场是新的界面覆盖在旧的界面上，旧的界面不消散的一种转场方式。
表1 模态转场接口 | 接口 | 阐明 | 利用场景 | | ---------------------------------------- | ----------------- | ---------------------------------------- | | bindContentCover | 弹出全屏的模态组件。 | 用于自界说全屏的模态展示界面，团结转场动画和共享元素动画可实现复杂转场动画结果，如缩略图片点击后检察大图。 | | bindSheet | 弹出半模态组件。 | 用于半模态展示界面，如分享框。 | | bindMenu | 弹出菜单，点击组件后弹出。 | 必要Menu菜单的场景，如一样寻常应用的“+”号键。 | | bindContextMenu | 弹出菜单，长按大概右键点击后弹出。 | 长按浮起结果，一样寻常团结拖拽框架利用，如桌面图标长按浮起。 | | bindPopup | 弹出Popup弹框。 | Popup弹框场景，如点击后对某个组件举行临时阐明。 | | if | 通过if新增或删除组件。 | 用来在某个状态下临时体现一个界面，这种方式的返回导航必要由开辟者监听接口实现。 |
利用bindContentCover构建全屏模态转场结果

bindContentCover接口用于为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition体现过渡动效。

• 界说全屏模态转场结果bindContentCover。
  
• 界说模态展示界面。
  
  1. // 通过@Builder构建模态展示界面
  2. @Builder MyBuilder() {
  3.   Column() {
  4.     Text('my model view')
  5.   }
  6.   // 通过转场动画实现出现消失转场动画效果，transition需要加在builder下的第一个组件
  7.   .transition(TransitionEffect.translate(y:300).animation({ curve: curves.springMotion(0.6, 0.8) }))
  8. }

  复制代码
• 通过模态接口调起模态展示界面，通过转场动画大概共享元素动画去实现对应的动画结果。
  
  1. class PresentTmp{
  2.    isPresent: boolean = false;
  3.    set(){
  4.      this.isPresent = !this.isPresent;
  5.    }
  6. }
  7. // 模态转场控制变量
  8. @State isPresent: boolean = false;
  10. Button('Click to present model view')
  11.   // 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择None代表系统不加默认动画
  12.   .bindContentCover(this.isPresent, this.MyBuilder, ModalTransition.NONE)
  13.   .onClick(() => {
  14.     // 改变状态变量，显示模态界面
  15.     let setPre:PresentTmp = new PresentTmp()
  16.     setPre.set()
  17.   })

  复制代码

完备示例代码和结果如下。

1. import curves from '@ohos.curves';
3. @Entry
4. @Component
5. struct BindContentCoverDemo {
6.   // 第一步：定义全屏模态转场效果bindContentCover
7.   // 模态转场控制变量
8.   @State isPresent: boolean = false;
10.   // 第二步：定义模态展示界面
11.   // 通过@Builder构建模态展示界面
12.   @Builder MyBuilder() {
13.     Column() {
14.       Column() {
15.         Column() {
16.           Text('back')
17.             .fontSize(24)
18.             .fontColor(Color.White)
19.         }
20.         .justifyContent(FlexAlign.Center)
21.         .width(100)
22.         .height(100)
23.         .borderRadius(5)
24.         .backgroundColor(0xf56c6c)
25.         .onClick(() => {
26.           this.isPresent = false;
27.         })
28.       }
29.       .height('100%')
30.       .width('100%')
31.       .backgroundColor(0x909399)
32.       .justifyContent(FlexAlign.Center)
33.       .border({
34.         radius: {
35.           topLeft: 15,
36.           topRight: 15,
37.         }
38.       })
39.     }
40.     .height('100%')
41.     .justifyContent(FlexAlign.End)
42.     // 通过转场动画实现出现消失转场动画效果
43.     .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
44.   }
46.   build() {
47.     Column() {
48.       Column() {
49.         Text('Click Me')
50.           .fontSize(24)
51.           .fontColor(Color.White)
52.       }
53.       // 第三步：通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果
54.       .onClick(() => {
55.         // 改变状态变量，显示模态界面
56.         this.isPresent = !this.isPresent;
57.       })
58.       // 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择DEFAULT代表设置上下切换动画效果。
59.       .bindContentCover(this.isPresent, this.MyBuilder(), ModalTransition.DEFAULT)
60.       .justifyContent(FlexAlign.Center)
61.       .backgroundColor(0XF56C6C)
62.       .width(100)
63.       .height(100)
64.       .borderRadius(5)
65.     }
66.     .justifyContent(FlexAlign.Center)
67.     .width('100%')
68.     .height('100%')
69.   }
70. }

复制代码

利用bindSheet构建半模态转场结果

bindSheet属性可为组件绑定半模态页面，在组件插入时可通过设置自界说或默认的内置高度确定半模态巨细。构建半模态转场动效的步调根本与利用bindContentCover构建全屏模态转场动效雷同。
完备示例和结果如下。

1. @Entry
2. @Component
3. struct BindSheetDemo {
5.   // 半模态转场高度控制变量
6.   @State sheetHeight: number|SheetSize|null|undefined = 300;
7.   // 半模态转场控制条控制变量
8.   @State showDragBar: boolean = true;
10.   // 通过@Builder构建半模态展示界面
11.   @Builder myBuilder() {
12.     Column() {
13.       Button("change height")
14.         .margin(10)
15.         .fontSize(20)
16.         .onClick(() => {
17.           this.sheetHeight = 500;
18.         })
20.       Button("Set Illegal height")
21.         .margin(10)
22.         .fontSize(20)
23.         .onClick(() => {
24.           this.sheetHeight = -1;
25.         })
27.       Button("close dragbar")
28.         .margin(10)
29.         .fontSize(20)
30.         .onClick(() => {
31.           this.showDragBar = !this.showDragBar;
32.         })
33.       Button("close modal 1")
34.         .margin(10)
35.         .fontSize(20)
36.         .onClick(() => {
37.           this.isPresent = false;
38.         })
39.     }
40.     .width('100%')
41.     .height('100%')
42.   }
44.   // 半模态转场控制变量
45.   @State isPresent: boolean = false;
47.   build() {
48.     Column() {
49.       if(this.sheetHeight){
50.         Button("Click to present sheet view")
51.         .onClick(() => {
52.           // 改变状态变量，让模态界面显示
53.           this.isPresent = !this.isPresent;
54.         })
55.         .fontSize(20)
56.         .margin(10)
57.           // 通过选定的半模态接口，绑定模态展示界面，style中包含两个参数，一个是设置半模态的高度，不设置时默认高度是Large,一个是是否显示控制条DragBar,默认是true显示控制条
58.         .bindSheet(this.isPresent, this.myBuilder(), { height: this.sheetHeight, dragBar: this.showDragBar })
59.       }
60.     }
61.     .justifyContent(FlexAlign.Center)
62.     .width('100%')
63.     .height('100%')
64.   }
65. }

复制代码

利用bindMenu实现菜单弹出结果

bindMenu为组件绑定弹出式菜单，通过点击触发。完备示例和结果如下。

1. class BMD{
2.   value:ResourceStr = ''
3.   action:() => void = () => {}
4. }
5. @Entry
6. @Component
7. struct BindMenuDemo {
9.   // 第一步: 定义一组数据用来表示菜单按钮项
10.   @State items:BMD[] = [
11.     {
12.       value: '菜单项1',
13.       action: () => {
14.         console.info('handle Menu1 select')
15.       }
16.     },
17.     {
18.       value: '菜单项2',
19.       action: () => {
20.         console.info('handle Menu2 select')
21.       }
22.     },
23.   ]
25.   build() {
26.     Column() {
27.       Button('click')
28.         .backgroundColor(0x409eff)
29.         .borderRadius(5)
30.           // 第二步: 通过bindMenu接口将菜单数据绑定给元素
31.         .bindMenu(this.items)
32.     }
33.     .justifyContent(FlexAlign.Center)
34.     .width('100%')
35.     .height(437)
36.   }
37. }

复制代码

利用bindContextMenu实现菜单弹出结果

bindContextMenu为组件绑定弹出式菜单，通过长按或右键点击触发。完备示例和结果如下。
完备示例和结果如下。

1. @Entry
2. @Component
3. struct BindContextMenuDemo {
4.   private num: number[] = [1, 2, 3, 4];
5.   private colors: Color[] = [0x67C23A, 0xE6A23C, 0xf56c6c, 0x909399];
6.   // 通过@Builder构建自定义菜单项
7.   @Builder MyMenu() {
8.     Row() {
9.       Column() {
10.         ForEach(this.num, (item: number, index: number = 0) => {
11.           Row() {
12.               Text(item.toString())
13.                 .fontSize(20)
14.                 .fontColor(Color.White)
15.             }
16.             .backgroundColor(this.colors[index])
17.             .width('100%')
18.             .aspectRatio(2)
19.             .justifyContent(FlexAlign.Center)
20.         })
21.       }
22.       .width('100%')
23.     }
24.     .width(150)
25.     .justifyContent(FlexAlign.Center)
26.     .padding(5)
27.   }
29.   build() {
30.     Column() {
31.       Column() {
32.         Text('longPress')
33.           .fontSize(20)
34.           .fontColor(Color.White)
35.       }
36.       .justifyContent(FlexAlign.Center)
37.       .width(170)
38.       .height(50)
39.       .bindContextMenu(this.MyMenu, ResponseType.LongPress)
40.       .backgroundColor(0xf56c6c)
41.       .borderRadius(5)
42.     }
43.     .justifyContent(FlexAlign.Center)
44.     .width('100%')
45.     .height(437)
46.   }
47. }

复制代码

利用bindPopUp实现气泡弹窗结果

bindpopup属性可为组件绑定弹窗，并设置弹窗内容，交互逻辑和体现状态。
完备示例和代码如下。

1. @Entry
2. @Component
3. struct BindPopupDemo {
5.   // 第一步：定义变量控制弹窗显示
6.   @State customPopup: boolean = false;
8.   // 第二步：popup构造器定义弹框内容
9.   @Builder popupBuilder() {
10.     Column({ space: 2 }) {
11.       Row().width(64)
12.         .height(64)
13.         .backgroundColor(0x409eff)
14.       Text('Popup')
15.         .fontSize(10)
16.         .fontColor(Color.White)
17.     }
18.     .justifyContent(FlexAlign.SpaceAround)
19.     .width(100)
20.     .height(100)
21.     .padding(5)
22.   }
24.   build() {
25.     Column() {
27.       Button('click')
28.         // 第四步：创建点击事件，控制弹窗显隐
29.         .onClick(() => {
30.           this.customPopup = !this.customPopup;
31.         })
32.         .backgroundColor(0xf56c6c)
33.           // 第三步：使用bindPopup接口将弹窗内容绑定给元素
34.         .bindPopup(this.customPopup, {
35.           builder: this.popupBuilder,
36.           placement: Placement.Top,
37.           maskColor: 0x33000000,
38.           popupColor: 0xf56c6c,
39.           enableArrow: true,
40.           onStateChange: (e) => {
41.             if (!e.isVisible) {
42.               this.customPopup = false;
43.             }
44.           }
45.         })
46.     }
47.     .justifyContent(FlexAlign.Center)
48.     .width('100%')
49.     .height(437)
50.   }
51. }

复制代码

利用if实现模态转场

上述模态转场接口必要绑定到其他组件上，通过监听状态变量改变调起模态界面。同时，也可以通过if范式，通过新增/删除组件实现模态转场结果。
完备示例和代码如下。

1. @Entry
2. @Component
3. struct ModalTransition1 {
5.   // 第一步：定义状态变量控制页面显示
6.   @State isShow: boolean = false;
8.   build() {
9.     // 第二步：定义Stack布局显示当前页面和模态页面
10.     Stack() {
11.       Column() {
12.         Text('Page1')
13.           .fontSize(40)
14.           .fontColor(Color.White)
15.           .fontWeight(FontWeight.Bolder)
17.         Text('Click to transition')
18.           .fontSize(15)
19.           .fontColor(Color.White)
20.       }
21.       .justifyContent(FlexAlign.Center)
22.       .width('100%')
23.       .height('100%')
24.       .linearGradient({
25.         colors: [
26.           [0xf56c6c, 0.0],
27.           [0xffffff, 1.0]
28.         ]
29.       })
30.       // 第五步：改变状态变量，显示模态页面
31.       .onClick(() => {
32.         animateTo({ duration: 500 }, () => {
33.           this.isShow = !this.isShow;
34.         })
35.       })
37.       // 第三步：在if中定义模态页面，显示在最上层，通过if控制模态页面出现消失
38.       if (this.isShow) {
39.         Column() {
40.           Text('Page2')
41.             .fontSize(40)
42.             .fontColor(Color.Gray)
43.             .fontWeight(FontWeight.Bolder)
45.           Text('Click to transition')
46.             .fontSize(15)
47.             .fontColor(Color.Gray)
48.         }
49.         .justifyContent(FlexAlign.Start)
50.         .width('100%')
51.         .height('100%')
52.         .linearGradient({
53.           colors: [
54.             [0xffffff, 0.0],
55.             [0x409eff, 1.0]
56.           ]
57.         })
58.         // 第四步：定义模态页面出现消失转场方式
59.         .transition(TransitionEffect.OPACITY.combine(TransitionEffect.rotate({ angle: 90, y: 1 })))
60.         .onClick(() => {
61.           animateTo({ duration: 500 }, () => {
62.             this.isShow = !this.isShow;
63.           })
64.         })
65.       }
67.     }
68.     .width('100%')
69.     .height('100%')
70.   }
71. }

复制代码

末了

有很多小搭档不知道学习哪些鸿蒙开辟技能？不知道必要重点把握哪些鸿蒙应用开辟知识点？而且学习时频仍踩坑，终极浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习好坏常有须要的。 
这份鸿蒙（HarmonyOS NEXT）资料包罗了鸿蒙开辟必把握的焦点知识要点，内容包罗了（ArkTS、ArkUI开辟组件、Stage模子、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技能知识点。
盼望这一份鸿蒙学习资料可以或许给各人带来资助，有必要的小搭档自行领取，限时开源，先到先得~无套路领取！！
获取这份完备版高清学习蹊径，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（HarmonyOS NEXT）最新学习蹊径

•  HarmonOS底子技能
  

• HarmonOS就业必备技能 
  
  
  
•  HarmonOS多媒体技能
  

• 鸿蒙NaPi组件进阶
  

• HarmonOS高级技能
  

• 初识HarmonOS内核 
  
  
  
• 实战就业级装备开辟
  

有了蹊径图，怎么能没有学习资料呢，小编也预备了一份团结鸿蒙官方发布条记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开辟入门讲授视频，内容包罗：ArkTS、ArkUI、Web开辟、应用模子、资源分类…等知识点。
获取以上完备版高清学习蹊径，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开辟入门讲授视频》

《鸿蒙生态应用开辟V2.0白皮书》

《鸿蒙 (OpenHarmony)开辟底子到实战手册》

OpenHarmony北向、南向开辟情况搭建

 《鸿蒙开辟底子》

• ArkTS语言
  
• 安装DevEco Studio
  
• 运用你的第一个ArkTS应用
  
• ArkUI声明式UI开辟
  
• .……
  

 《鸿蒙开辟进阶》

• Stage模子入门
  
• 网络管理
  
• 数据管理
  
• 电话服务
  
• 分布式应用开辟
  
• 关照与窗口管理
  
• 多媒体技能
  
• 安全技能
  
• 任务管理
  
• WebGL
  
• 国际化开辟
  
• 应用测试
  
• DFX面向将来筹划
  
• 鸿蒙体系移植和裁剪定制
  
• ……
  

《鸿蒙进阶实战》

• ArkTS实践
  
• UIAbility应用
  
• 网络案例
  
• ……
  

 获取以上完备鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结

总的来说，华为鸿蒙不再兼容安卓，对中年步调员来说是一个寻衅，也是一个时机。只有积极应对变革，不停学习和提拔本身，他们才华在这个厘革的期间中立于不败之地。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金