自定义弹窗
通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容。
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
接口
CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})
自定义弹窗的所有参数，不支持动态刷新。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
builder | CustomDialog | 是 | 自定义弹窗内容构造器。 |
cancel | () => void | 否 | 点击遮障层退出时的回调。 |
autoCancel | boolean | 否 | 是否允许点击遮障层退出。 默认值：true |
alignment | 否 | 弹窗在竖直方向上的对齐方式。 默认值：DialogAlignment.Default | |
offset | 否 | 弹窗相对alignment所在位置的偏移量。 | |
customStyle | boolean | 否 | 弹窗容器样式是否自定义。 默认值：false，弹窗容器的宽度根据栅格系统自适应，不跟随子节点；高度自适应子节点，最大为窗口高度的90%；圆角为24vp。 |
gridCount8+ | number | 否 | 弹窗宽度占栅格宽度的个数。 默认为按照窗口大小自适应，异常值按默认值处理，最大栅格数为系统最大栅格数。 |
导入对象
- dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效，具体用法可看下方示例。
示例
- // xxx.ets
- @CustomDialog
- struct CustomDialogExample {
- @Link textValue: string
- @Link inputValue: string
- controller: CustomDialogController
- // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后
- cancel: () => void
- confirm: () => void
- build() {
- Column() {
- Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
- TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
- .onChange((value: string) => {
- this.textValue = value
- })
- Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
- Flex({ justifyContent: FlexAlign.SpaceAround }) {
- Button('cancel')
- .onClick(() => {
- this.controller.close()
- this.cancel()
- }).backgroundColor(0xffffff).fontColor(Color.Black)
- Button('confirm')
- .onClick(() => {
- this.inputValue = this.textValue
- this.controller.close()
- this.confirm()
- }).backgroundColor(0xffffff).fontColor(Color.Red)
- }.margin({ bottom: 10 })
- }
- // dialog默认的borderRadius为24vp，如果需要使用border属性，请和borderRadius属性一起使用。
- }
- }
- @Entry
- @Component
- struct CustomDialogUser {
- @State textValue: string = ''
- @State inputValue: string = 'click me'
- dialogController: CustomDialogController = new CustomDialogController({
- builder: CustomDialogExample({
- cancel: this.onCancel,
- confirm: this.onAccept,
- textValue: $textValue,
- inputValue: $inputValue
- }),
- cancel: this.existApp,
- autoCancel: true,
- alignment: DialogAlignment.Bottom,
- offset: { dx: 0, dy: -20 },
- gridCount: 4,
- customStyle: false
- })
- // 在自定义组件即将析构销毁时将dialogController置空
- aboutToDisappear() {
- this.dialogController = undefined // 将dialogController置空
- }
- onCancel() {
- console.info('Callback when the first button is clicked')
- }
- onAccept() {
- console.info('Callback when the second button is clicked')
- }
- existApp() {
- console.info('Click the callback in the blank area')
- }
- build() {
- Column() {
- Button(this.inputValue)
- .onClick(() => {
- if (this.dialogController != undefined) {
- this.dialogController.open()
- }
- }).backgroundColor(0x317aff)
- }.width('100%').margin({ top: 5 })
- }
- }
