鸿蒙API13开发【自界说弹窗 (CustomDialog)】ArkTS组件

点击日期弹出日历选择器弹窗，可选择弹窗内恣意日期。
CalendarPickerDialog

show

static show(options?: CalendarDialogOptions)
界说日历选择器弹窗并弹出。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明options[CalendarDialogOptions]否设置日历选择器弹窗的参数。 CalendarDialogOptions对象说明

继承自[CalendarOptions]。
系统本领： SystemCapability.ArkUI.ArkUI.Full
名称类型必填说明onAccept[Callback]否点击弹窗中的“确定”按钮时触发该回调。返回选中的日期值。元服务API： 从API version 11开始，该接口支持在元服务中使用。onCancel[VoidCallback]否点击弹窗中的“取消”按钮时触发该回调。元服务API： 从API version 11开始，该接口支持在元服务中使用。onChange[Callback]否选择弹窗中日期使当前选中项改变时触发该回调。返回选中的日期值。元服务API： 从API version 11开始，该接口支持在元服务中使用。backgroundColor11+[ResourceColor]否弹窗背板颜色。默认值：Color.Transparent**说明：**当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色表现将不符合预期效果。元服务API： 从API version 12开始，该接口支持在元服务中使用。backgroundBlurStyle11+[BlurStyle]否弹窗背板模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK**说明：**设置为BlurStyle.NONE即可关闭配景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色表现将不符合预期效果。元服务API： 从API version 12开始，该接口支持在元服务中使用。acceptButtonStyle12+[PickerDialogButtonStyle]否设置确认按钮表现样式、样式和告急水平、脚色、配景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。**说明：**acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段设置为true，二者primary字段均设置为true时均不生效。元服务API： 从API version 12开始，该接口支持在元服务中使用。cancelButtonStyle12+[PickerDialogButtonStyle]否设置取消按钮表现样式、样式和告急水平、脚色、配景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。**说明：**acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段设置为true，二者primary字段均设置为true时均不生效。元服务API： 从API version 12开始，该接口支持在元服务中使用。onDidAppear12+[VoidCallback]否弹窗弹出时的事件回调。**说明：**1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。2.在onDidAppear内设置改变弹窗表现效果的回调事件，二次弹出生效。3.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。4. 当弹窗入场动效未完成时关闭弹窗，该回调不会触发。元服务API： 从API version 12开始，该接口支持在元服务中使用。onDidDisappear12+[VoidCallback]否弹窗消失时的事件回调。**说明：**1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。元服务API： 从API version 12开始，该接口支持在元服务中使用。onWillAppear12+[VoidCallback]否弹窗表现动效前的事件回调。**说明：**1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。2.在onWillAppear内设置改变弹窗表现效果的回调事件，二次弹出生效。元服务API： 从API version 12开始，该接口支持在元服务中使用。onWillDisappear12+[VoidCallback]否弹窗退出动效前的事件回调。**说明：**1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。2.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。元服务API： 从API version 12开始，该接口支持在元服务中使用。shadow12+[ShadowOptions][ShadowStyle]否enableHoverMode14+boolean否是否响应悬停态。默认值：false，默认不响应。元服务API： 从API version 14开始，该接口支持在元服务中使用。hoverModeArea14+[HoverModeAreaType]否悬停态下弹窗默认展示区域。默认值：HoverModeAreaType.BOTTOM_SCREEN。元服务API： 从API version 14开始，该接口支持在元服务中使用。 示例

示例1（弹出日历选择弹窗）

该示例通过点击按钮弹出日历选择弹窗。

1. // xxx.ets
2. @Entry
3. @Component
4. struct CalendarPickerDialogExample {
5.   private selectedDate: Date = new Date('2024-04-23')
7.   build() {
8.     Column() {
9.       Button("Show CalendarPicker Dialog")
10.         .margin(20)
11.         .onClick(() => {
12.           console.info("CalendarDialog.show")
13.           CalendarPickerDialog.show({
14.             selected: this.selectedDate,
15.             onAccept: (value) => {
16.               console.info("calendar onAccept:" + JSON.stringify(value))
17.             },
18.             onCancel: () => {
19.               console.info("calendar onCancel")
20.             },
21.             onChange: (value) => {
22.               console.info("calendar onChange:" + JSON.stringify(value))
23.             },
24.             onDidAppear: () => {
25.               console.info("calendar onDidAppear")
26.             },
27.             onDidDisappear: () => {
28.               console.info("calendar onDidDisappear")
29.             },
30.             onWillAppear: () => {
31.               console.info("calendar onWillAppear")
32.             },
33.             onWillDisappear: () => {
34.               console.info("calendar onWillDisappear")
35.             }
36.           })
37.         })
38.     }.width('100%')
39.   }
40. }

复制代码

示例2（自界说按钮样式）

该示例通过设置 acceptButtonStyle、cancelButtonStyle实现自界说按钮样式。

1. // xxx.ets
2. @Entry
3. @Component
4. struct CalendarPickerDialogExample {
5.   private selectedDate: Date = new Date()
6.   build() {
7.     Column() {
8.       Button("Show CalendarPicker Dialog")
9.         .margin(20)
10.         .onClick(() => {
11.           console.info("CalendarDialog.show")
12.           CalendarPickerDialog.show({
13.             selected: this.selectedDate,
14.             acceptButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Red,
15.               fontSize: '26fp', fontWeight: FontWeight.Bolder, fontStyle: FontStyle.Normal, fontFamily: 'sans-serif', backgroundColor:'#80834511',
16.               borderRadius: 20 },
17.             cancelButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Blue,
18.               fontSize: '16fp', fontWeight: FontWeight.Normal, fontStyle: FontStyle.Italic, fontFamily: 'sans-serif', backgroundColor:'#50182431',
19.               borderRadius: 10 },
20.             onAccept: (value) => {
21.               console.info("calendar onAccept:" + JSON.stringify(value))
22.             },
23.             onCancel: () => {
24.               console.info("calendar onCancel")
25.             },
26.             onChange: (value) => {
27.               console.info("calendar onChange:" + JSON.stringify(value))
28.             },
29.             onDidAppear: () => {
30.               console.info("calendar onDidAppear")
31.             },
32.             onDidDisappear: () => {
33.               console.info("calendar onDidDisappear")
34.             },
35.             onWillAppear: () => {
36.               console.info("calendar onWillAppear")
37.             },
38.             onWillDisappear: () => {
39.               console.info("calendar onWillDisappear")
40.             }
41.           })
42.         })
43.     }.width('100%')
44.   }
45. }

复制代码

示例3（悬停态弹窗）

该示例展示了在折叠屏悬停态下设置dialog结构区域的效果。

1. @Entry
2. @Component
3. struct CalendarPickerDialogExample {
4.   private selectedDate: Date = new Date('2024-04-23');
6.   build() {
7.     Column() {
8.       Button("Show CalendarPicker Dialog")
9.         .margin(20)
10.         .onClick(() => {
11.           console.info("CalendarDialog.show")
12.           CalendarPickerDialog.show({
13.             selected: this.selectedDate,
14.             onAccept: (value) => {
15.               console.info("calendar onAccept:" + JSON.stringify(value))
16.             },
17.             onCancel: () => {
18.               console.info("calendar onCancel")
19.             },
20.             onChange: (value) => {
21.               console.info("calendar onChange:" + JSON.stringify(value))
22.             },
23.             onDidAppear: () => {
24.               console.info("calendar onDidAppear")
25.             },
26.             onDidDisappear: () => {
27.               console.info("calendar onDidDisappear")
28.             },
29.             onWillAppear: () => {
30.               console.info("calendar onWillAppear")
31.             },
32.             onWillDisappear: () => {
33.               console.info("calendar onWillDisappear")
34.             },
35.             enableHoverMode: true,
36.             hoverModeArea: HoverModeAreaType.TOP_SCREEN,
37.           })
38.         })
39.     }.width('100%')
40.   }
41. }

复制代码

末了呢

很多开发朋侪不知道需要学习那些鸿蒙技能？鸿蒙开发岗位需要把握那些核心技能点？为此鸿蒙的开发学习必须要系统性的举行。
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模子、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技能知识点
假如你是一名Android、Java、前端等等开发职员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

针对鸿蒙发展路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，资助各人在技能的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
  
• 《鸿蒙生态应用开发V2.0白皮书》
  
• 《鸿蒙 (OpenHarmony)开发底子到实战手册》
  
• OpenHarmony北向、南向开发环境搭建
  
• 《鸿蒙开发底子》
  
• 《鸿蒙开发进阶》
  
• 《鸿蒙开发实战》
  

总结

鸿蒙—作为国家主力推送的国产操作系统。部门的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。
并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来发作式的增长，学习鸿蒙势在必行！ 自↓↓↓拿

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。