列表選擇彈窗

2024-01-22 18:21 更新

列表彈窗。

說明

從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

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 } })

定義列表彈窗并彈出。

參數(shù):

參數(shù)名參數(shù)類型必填參數(shù)描述
titleResource | string彈窗標(biāo)題。
messageResource | string彈窗內(nèi)容。
autoCancelboolean

點(diǎn)擊遮障層時(shí),是否關(guān)閉彈窗。

默認(rèn)值:true

confirm

{

value: ResourceStr,

action: () => void

}

確認(rèn)按鈕的文本內(nèi)容和點(diǎn)擊回調(diào)。

默認(rèn)值:

value:按鈕文本內(nèi)容。

action: 按鈕選中時(shí)的回調(diào)。

cancel() => void點(diǎn)擊遮障層關(guān)閉dialog時(shí)的回調(diào)。
alignmentDialogAlignment

彈窗在豎直方向上的對(duì)齊方式。

默認(rèn)值:DialogAlignment.Bottom

offset

{

dx: Length,

dy: Length

}

彈窗相對(duì)alignment所在位置的偏移量。{

dx: 0,

dy: 0

}

sheetsArray<SheetInfo>設(shè)置選項(xiàng)內(nèi)容,每個(gè)選擇項(xiàng)支持設(shè)置圖片、文本和選中的回調(diào)。

SheetInfo接口說明

參數(shù)名參數(shù)類型必填參數(shù)描述
titleResourceStr選項(xiàng)的文本內(nèi)容。
iconResourceStr選項(xiàng)的圖標(biāo),默認(rèn)無圖標(biāo)顯示。
action()=>void選項(xiàng)選中的回調(diào)。

示例

  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. }

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)