在duyu200上体验eTS-警告弹窗
【摘要】 在duyu200上体验eTS-警告弹窗今天开发板到手了,于是想体验一些新的东西。于是就从弹窗做起。显示警告弹窗组件,可设置文本内容与响应回调。 从API Version 7开始支持 属性名称参数类型默认值参数描述showoptions: { paramObject1| paramObject2}-定义并显示AlertDialog组件paramObject1参数参数名参数类型必填默认值参数描述...
今天开发板到手了,于是想体验一些新的东西。于是就从弹窗做起。
显示警告弹窗组件,可设置文本内容与响应回调。 从API Version 7开始支持
属性
名称 | 参数类型 | 默认值 | 参数描述 |
---|---|---|---|
show | options: { paramObject1| paramObject2} | - | 定义并显示AlertDialog组件 |
paramObject1参数
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
title | string | 否 | - | 弹窗标题。 |
message | string | 是 | - | 弹窗内容。 |
autoCancel | boolean | 否 | true | 点击遮障层时,是否关闭弹窗。 |
confirm | { value: string |, fontColor?: Color | number | string | , backgroundColor?: Color | number | string | , action: () => void } | 否 | - | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
cancel | () => void | 否 | - | 点击遮障层关闭dialog时的回调。 |
alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
offset | { dx: Length | , dy: Length | } | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
paramObject2参数
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
title | string | 否 | - | 弹窗标题。 |
message | string | 是 | - | 弹窗内容。 |
autoCancel | boolean | 否 | true | 点击遮障层时,是否关闭弹窗。 |
primaryButton | { value: string | fontColor?: Color | number | string | , backgroundColor?: Color | number | string | , action: () => void; } | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
secondaryButton | { value: string | , fontColor?: Color | number | string | , backgroundColor?: Color | number | string | , action: () => void; } | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
cancel | () => void | 否 | - | 点击遮障层关闭dialog时的回调。 |
alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
offset | { dx: Length | , dy: Length |} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
案例
@Entry
@Component
struct AlertDialogExample {
build() {
Column({ space: 50}) {
Button('one button')
.onClick(() => {
AlertDialog.show(
{
title: '弹窗标题',
message: '弹窗内容',
autoCancel:false,
confirm: {
value: '确认按钮的文本内容',
action: () => {
console.info('Button-clicking callback')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
})
.backgroundColor(0x317aff)
Button('two button ')
.onClick(() => {
AlertDialog.show(
{
title: 'title',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
console.info('Callback when the first button is clicked')
}
},
secondaryButton: {
value: 'ok',
action: () => {
console.info('Callback when the second button is clicked')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 500 })
}
}
效果图:
然后我们可以运行在真机上。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)