固定样式弹出框

一般用于简单场景使用,没法改变

showActionMenu

代码

import { PromptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index9 {
    openDialog() {
        let uiContext = this.getUIContext();
        let promptAction: PromptAction = uiContext.getPromptAction();
        try {
            promptAction.showActionMenu({
                title: 'showActionMenu 标题',
                buttons: [
                    {
                        text: '列表1',
                        color: 'red',
                        primary: true
                    },
                    {
                        text: '列表2',
                        color: '#000000'
                    },
                ]
            })
                .then(data => {
                    console.info('showActionMenu success, click button: ' + data.index);
                })
                .catch((err: Error) => {
                    console.error('showActionMenu error: ' + err);
                })
        } catch (error) {
        }
    }

    build() {
        Column() {
            Row() {
                Button() {
                    Text("点击弹出showActionMenu")
                }.onClick(() => {
                    this.openDialog()
                })
            }
        }
    }
}

showDialog

一般用于确定框

代码

import { PromptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index10 {
    openDialog() {
        let uiContext = this.getUIContext();
        let promptAction: PromptAction = uiContext.getPromptAction();
        try {
            promptAction.showDialog({
                title: 'showDialog Title Info',
                message: 'Message Info',
                buttons: [
                    {
                        text: 'button1',
                        color: '#000000'
                    },
                    {
                        text: 'button2',
                        color: '#000000'
                    }
                ]
            }, (err, data) => {
                if (err) {
                    console.error('showDialog err: ' + err);
                    return;
                }
                console.info('showDialog success callback, click button: ' + data.index);
            });
        } catch (error) {
        }
    }

    build() {
        Button("点击我").type(ButtonType.Normal).onClick(() => {
            this.openDialog()
        })
    }
}

日历选择器

代码

@Entry
@Component
struct 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,
                        acceptButtonStyle: {
                            fontColor: '#2787d9',
                            fontSize: '16fp',
                            backgroundColor: '#f7f7f7',
                            borderRadius: 10
                        },
                        cancelButtonStyle: {
                            fontColor: Color.Red,
                            fontSize: '16fp',
                            backgroundColor: '#f7f7f7',
                            borderRadius: 10
                        },
                        onAccept: (date: Date) => {
                            // 当弹出框再次弹出时显示选中的是上一次确定的日期
                            this.selectedDate = date
                            console.log(this.selectedDate.toString())
                        }
                    })
                })
        }.width('100%')
    }
}

日期滑动选择器

代码

@Entry
@Component
struct DatePickerDialogExample {
    @State selectTime: Date = new Date('2023-12-25T08:30:00');

    build() {
        Column() {
            Button('showDatePickerDialog')
                .margin(30)
                .onClick(() => {
                    this.getUIContext().showDatePickerDialog({
                        start: new Date("2000-1-1"),
                        end: new Date("2100-12-31"),
                        selected: this.selectTime,
                        textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } },
                        selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } },
                        acceptButtonStyle: {
                            fontColor: '#2787d9',
                            fontSize: '16fp',
                            backgroundColor: '#f7f7f7',
                            borderRadius: 10
                        },
                        cancelButtonStyle: {
                            fontColor: Color.Red,
                            fontSize: '16fp',
                            backgroundColor: '#f7f7f7',
                            borderRadius: 10
                        },
                        lunarSwitch: true,
                        showTime: true,
                        onDateAccept: (value: Date) => {
                            this.selectTime = value
                            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
                        },
                    })
                })
        }.width('100%').margin({ top: 5 })
    }
}

时间滑动选择器弹窗

代码

// xxx.ets

@Entry
@Component
struct TimePickerDialogExample {
    @State selectTime: Date = new Date('2023-12-25T08:30:00');

    build() {
        Column() {
            Button('showTimePickerDialog')
                .margin(30)
                .onClick(() => {
                    this.getUIContext().showTimePickerDialog({
                        selected: this.selectTime,
                        textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } },
                        selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } },
                        acceptButtonStyle: {
                            fontColor: '#2787d9',
                            fontSize: '16fp',
                            backgroundColor: '#f7f7f7',
                            borderRadius: 10
                        },
                        cancelButtonStyle: {
                            fontColor: Color.Red,
                            fontSize: '16fp',
                            backgroundColor: '#f7f7f7',
                            borderRadius: 10
                        }
                    })
                })
        }.width('100%').margin({ top: 5 })
    }
}

文本(省市联动)

代码

@Entry
@Component
struct TextPickerDialogExample {
    private fruits: TextCascadePickerRangeContent[] = [
        {
            text: '辽宁省',
            children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
                { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
        },
        {
            text: '吉林省',
            children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
                { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
        },
        {
            text: '黑龙江省',
            children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
                { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
        }
    ]
    private select: number = 0;

    build() {
        Column() {
            Button('showTextPickerDialog')
                .margin(30)
                .onClick(() => {
                    this.getUIContext().showTextPickerDialog({
                        range: this.fruits,
                        selected: this.select,
                        onAccept: (value: TextPickerResult) => {
                            this.select = value.index as number
                        }
                    })
                })
        }.width('100%').margin({ top: 5 })
    }
}