1# 列表选择弹窗 2 3列表弹窗。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)说明。 10> 11> 从API version 10开始，可以通过使用[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)中的[showActionSheet](../apis/js-apis-arkui-UIContext.md#showactionsheet)来明确UI的执行上下文。 12 13## ActionSheet.show 14 15show(value: { title: string | Resource, subtitle: Resource, message: string | Resource, confirm?: {enabled?: boolean, defaultFocus?: boolean, style?: DialogButtonStyle, value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } }) 16 17定义列表弹窗并弹出。 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| ---------- | -------------------------- | ------- | ----------------------------- | 23| title | [Resource](ts-types.md#resource) \| string | 是 | 弹窗标题。 | 24| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | 25| message | [Resource](ts-types.md#resource) \| string | 是 | 弹窗内容。 | 26| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true<br>值为true时，点击遮障层关闭弹窗，值为false时，点击遮障层不关闭弹窗。 | 27| confirm | {<br/>enabled<sup>10+</sup>?: boolean,<br/>defaultFocus<sup>10+</sup>?: boolean,<br />style<sup>10+</sup>?: [DialogButtonStyle](#dialogbuttonstyle10枚举说明),<br />value: [ResourceStr](ts-types.md#resourcestr),<br/>action: () => void<br/>} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容和点击回调。<br>enabled：点击button是否响应。<br />默认值：true。<br />defaultFocus：设置button是否是默认焦点。<br />默认值：false。<br />style：设置button的风格样式。<br />默认值：DialogButtonStyle.DEFAULT。<br/>value：按钮文本内容。<br/>action: 按钮选中时的回调。 | 28| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | 29| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Bottom | 30| offset | {<br/>dx: Length,<br/>dy: Length<br/>} | 否 | 弹窗相对alignment所在位置的偏移量。{<br/>dx: 0,<br/>dy: 0<br/>} | 31| sheets | Array<SheetInfo> | 是 | 设置选项内容，每个选择项支持设置图片、文本和选中的回调。 | 32| maskRect<sup>10+</sup> | [Rectangle](ts-methods-alert-dialog-box.md#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。<br/>默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | 33 34## SheetInfo接口说明 35 36| 参数名 | 参数类型 | 必填 | 参数描述 | 37| ------ | ------------------------------------------------------------ | ---- | ----------------- | 38| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 选项的文本内容。 | 39| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选项的图标，默认无图标显示。 | 40| action | ()=>void | 是 | 选项选中的回调。 | 41 42## DialogButtonStyle<sup>10+</sup>枚举说明 43 44| 名称 | 描述 | 45| --------- | --------------------------------- | 46| DEFAULT | 白底蓝字（深色主题：白底=黑底）。 | 47| HIGHLIGHT | 蓝底白字。 | 48 49 50## 示例 51 52 53```ts 54@Entry 55@Component 56struct ActionSheetExample { 57 build() { 58 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 59 Button('Click to Show ActionSheet') 60 .onClick(() => { 61 ActionSheet.show({ 62 title: 'ActionSheet title', 63 subtitle: 'ActionSheet subtitle', 64 message: 'message', 65 autoCancel: true, 66 confirm: { 67 defaultFocus: true, 68 value: 'Confirm button', 69 action: () => { 70 console.log('Get Alert Dialog handled') 71 } 72 }, 73 cancel: () => { 74 console.log('actionSheet canceled') 75 }, 76 alignment: DialogAlignment.Bottom, 77 offset: { dx: 0, dy: -10 }, 78 sheets: [ 79 { 80 title: 'apples', 81 action: () => { 82 console.log('apples') 83 } 84 }, 85 { 86 title: 'bananas', 87 action: () => { 88 console.log('bananas') 89 } 90 }, 91 { 92 title: 'pears', 93 action: () => { 94 console.log('pears') 95 } 96 } 97 ] 98 }) 99 }) 100 }.width('100%') 101 .height('100%') 102 } 103} 104``` 105 106 107
