咸宁网站设计,极客学院wordpress,wordpress外链图床插件,网站备案单位1、概 述
在项目开发中#xff0c;我们时常会用到日历选择器#xff0c;效果如下#xff1a; ArkUI已经为我们提供了组件#xff0c;我们可以直接使用#xff0c;下面针对日历组件做简单介绍。
2、CalendarPickerDialog
接口定义如下#xff1a;
// 定义日历选择器弹…1、概 述
在项目开发中我们时常会用到日历选择器效果如下 ArkUI已经为我们提供了组件我们可以直接使用下面针对日历组件做简单介绍。
2、CalendarPickerDialog
接口定义如下
// 定义日历选择器弹窗并弹出。static show(options?: CalendarDialogOptions)
其中CalendarDialogOptions是入参可选参数。属性定义如下 名称 类型 说明 onAccept (value: Date) void 点击弹窗中的“确定”按钮时触发该回调。value选中的日期值。 onCancel () void 点击弹窗中的“取消”按钮时触发该回调。 onChange (value: Date) void 选择弹窗中日期使当前选中项改变时触发该回调。value选中的日期值。 backgroundColor ResourceColor 弹窗背板颜色。默认值Color.Transparent 说明当设置了backgroundColor为非透明色时backgroundBlurStyle需要设置为BlurStyle.NONE否则颜色显示将不符合预期效果。 backgroundBlurStyle BlurStyle 弹窗背板模糊材质。默认值BlurStyle.COMPONENT_ULTRA_THICK 说明设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时则不要设置backgroundColor否则颜色显示将不符合预期效果。 acceptButtonStyle PickerDialogButtonStyle 设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 说明acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true二者primary字段均配置为true时均不生效。 cancelButtonStyle PickerDialogButtonStyle 设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 说明acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true二者primary字段均配置为true时均不生效。 onDidAppear () void 弹窗弹出时的事件回调。 说明1.正常时序依次为onWillAppearonDidAppear(onAccept/onCancel/onChange)onWillDisappearonDidDisappear。2.在onDidAppear内设置改变弹窗显示效果的回调事件二次弹出生效。3.快速点击弹出消失弹窗时存在onWillDisappear在onDidAppear前生效。4. 当弹窗入场动效未完成时关闭弹窗该回调不会触发。 onDidDisappear () void 弹窗消失时的事件回调。 说明1.正常时序依次为onWillAppearonDidAppear(onAccept/onCancel/onChange)onWillDisappearonDidDisappear。 onWillAppear () void 弹窗显示动效前的事件回调。 说明1.正常时序依次为onWillAppearonDidAppear(onAccept/onCancel/onChange)onWillDisappearonDidDisappear。2.在onWillAppear内设置改变弹窗显示效果的回调事件二次弹出生效。 onWillDisappear () void 弹窗退出动效前的事件回调。 说明1.正常时序依次为onWillAppearonDidAppear(onAccept/onCancel/onChange)onWillDisappearonDidDisappear。2.快速点击弹出消失弹窗时存在onWillDisappear在onDidAppear前生效。 shadow ShadowOptions | ShadowStyle 设置弹窗背板的阴影。当设备为2in1时默认场景下获焦阴影值为ShadowStyle.OUTER_FLOATING_MD失焦为ShadowStyle.OUTER_FLOATING_SM hintRadius number | Resource 描述日期选中态底板样式。默认值底板样式为圆形。说明hintRadius为0底板样式为直角矩形。hintRadius为0 ~ 16底板样式为圆角矩形。hintRadius16底板样式为圆形 selected Date 设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。默认值当前系统日期。 3、案 例
示例通过点击按钮弹出日历选择弹窗。效果如下 代码如下
// xxx.etsEntryComponentstruct CalendarPickerDialogExample { private selectedDate: Date new Date(2024-04-23) build() { Column() { Button(Show CalendarPicker Dialog) .margin(20) .onClick(() { console.info(CalendarDialog.show) CalendarPickerDialog.show({ selected: this.selectedDate, onAccept: (value) { console.info(calendar onAccept: JSON.stringify(value)) }, onCancel: () { console.info(calendar onCancel) }, onChange: (value) { console.info(calendar onChange: JSON.stringify(value)) }, onDidAppear: () { console.info(calendar onDidAppear) }, onDidDisappear: () { console.info(calendar onDidDisappear) }, onWillAppear: () { console.info(calendar onWillAppear) }, onWillDisappear: () { console.info(calendar onWillDisappear) } }) }) }.width(100%) }}
