列表选择弹窗

2024-01-22 18:21 更新

列表弹窗。

说明

从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

ActionSheet.show

show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } })

定义列表弹窗并弹出。

参数:

参数名参数类型必填参数描述
titleResource | string弹窗标题。
messageResource | string弹窗内容。
autoCancelboolean

点击遮障层时,是否关闭弹窗。

默认值:true

confirm

{

value: ResourceStr,

action: () => void

}

确认按钮的文本内容和点击回调。

默认值:

value:按钮文本内容。

action: 按钮选中时的回调。

cancel() => void点击遮障层关闭dialog时的回调。
alignmentDialogAlignment

弹窗在竖直方向上的对齐方式。

默认值:DialogAlignment.Bottom

offset

{

dx: Length,

dy: Length

}

弹窗相对alignment所在位置的偏移量。{

dx: 0,

dy: 0

}

sheetsArray<SheetInfo>设置选项内容,每个选择项支持设置图片、文本和选中的回调。

SheetInfo接口说明

参数名参数类型必填参数描述
titleResourceStr选项的文本内容。
iconResourceStr选项的图标,默认无图标显示。
action()=>void选项选中的回调。

示例

  1. @Entry
  2. @Component
  3. struct ActionSheetExample {
  4. build() {
  5. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  6. Button('Click to Show ActionSheet')
  7. .onClick(() => {
  8. ActionSheet.show({
  9. title: 'ActionSheet title',
  10. message: 'message',
  11. autoCancel: true,
  12. confirm: {
  13. value: 'Confirm button',
  14. action: () => {
  15. console.log('Get Alert Dialog handled')
  16. }
  17. },
  18. cancel: () => {
  19. console.log('actionSheet canceled')
  20. },
  21. alignment: DialogAlignment.Bottom,
  22. offset: { dx: 0, dy: -10 },
  23. sheets: [
  24. {
  25. title: 'apples',
  26. action: () => {
  27. console.log('apples')
  28. }
  29. },
  30. {
  31. title: 'bananas',
  32. action: () => {
  33. console.log('bananas')
  34. }
  35. },
  36. {
  37. title: 'pears',
  38. action: () => {
  39. console.log('pears')
  40. }
  41. }
  42. ]
  43. })
  44. })
  45. }.width('100%')
  46. .height('100%')
  47. }
  48. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号