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: ActionSheetOptions) 16 17定义列表弹窗并弹出。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 描述 | 24| ------ | ------------------------------------------------- | ---- | ------------------------ | 25| value | [ActionSheetOptions](#actionsheetoptions对象说明) | 是 | 配置列表选择弹窗的参数。 | 26 27## ActionSheetOptions对象说明 28 29| 名称 | 类型 | 必填 | 说明 | 30| ---------- | -------------------------- | ------- | ----------------------------- | 31| title | [Resource](ts-types.md#resource) \| string | 是 | 弹窗标题。 | 32| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | 33| message | [Resource](ts-types.md#resource) \| string | 是 | 弹窗内容。 | 34| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true<br>值为true时，点击遮障层关闭弹窗，值为false时，点击遮障层不关闭弹窗。 | 35| 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/>} | 否 | 确认Button的使能状态、默认焦点、按钮风格、文本内容和点击回调。<br>enabled：点击Button是否响应，true表示Button可以响应，false表示Button不可以响应。<br />默认值：true。<br />defaultFocus：设置Button是否是默认焦点，true表示Button是默认焦点，false表示button不是默认焦点。<br />默认值：false。<br />style：设置Button的风格样式。<br />默认值：DialogButtonStyle.DEFAULT。<br/>value：Button文本内容。<br/>action: Button选中时的回调。 | 36| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | 37| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Bottom | 38| offset | {<br/>dx: [Length](ts-types.md#length),<br/>dy: [Length](ts-types.md#length)<br/>} | 否 | 弹窗相对alignment所在位置的偏移量。<br/>默认值：<br/>1.alignment设置为Top、TopStart、TopEnd时默认值为{dx: 0,dy: "40vp"} <br/>2.alignment设置为其他时默认值为{dx: 0,dy: "-40vp"} | 39| sheets | Array<[SheetInfo](#sheetinfo接口说明)> | 是 | 设置选项内容，每个选择项支持设置图片、文本和选中的回调。 | 40| maskRect<sup>10+</sup> | [Rectangle](ts-methods-alert-dialog-box.md#rectangle8类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。<br/>默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | 41 42## SheetInfo接口说明 43 44| 参数名 | 参数类型 | 必填 | 参数描述 | 45| ------ | ------------------------------------------------------------ | ---- | ----------------- | 46| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 选项的文本内容。 | 47| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选项的图标，默认无图标显示。 | 48| action | ()=>void | 是 | 选项选中的回调。 | 49 50## DialogButtonStyle<sup>10+</sup>枚举说明 51 52| 名称 | 描述 | 53| --------- | --------------------------------- | 54| DEFAULT | 白底蓝字（深色主题：白底=黑底）。 | 55| HIGHLIGHT | 蓝底白字。 | 56 57 58## 示例 59 60 61```ts 62@Entry 63@Component 64struct ActionSheetExample { 65 build() { 66 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 67 Button('Click to Show ActionSheet') 68 .onClick(() => { 69 ActionSheet.show({ 70 title: 'ActionSheet title', 71 subtitle: 'ActionSheet subtitle', 72 message: 'message', 73 autoCancel: true, 74 confirm: { 75 defaultFocus: true, 76 value: 'Confirm button', 77 action: () => { 78 console.log('Get Alert Dialog handled') 79 } 80 }, 81 cancel: () => { 82 console.log('actionSheet canceled') 83 }, 84 alignment: DialogAlignment.Bottom, 85 offset: { dx: 0, dy: -10 }, 86 sheets: [ 87 { 88 title: 'apples', 89 action: () => { 90 console.log('apples') 91 } 92 }, 93 { 94 title: 'bananas', 95 action: () => { 96 console.log('bananas') 97 } 98 }, 99 { 100 title: 'pears', 101 action: () => { 102 console.log('pears') 103 } 104 } 105 ] 106 }) 107 }) 108 }.width('100%') 109 .height('100%') 110 } 111} 112``` 113 114 115
