1# 列表选择弹窗 (ActionSheet) 2 3列表弹窗。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../js-apis-arkui-UIContext.md#uicontext)说明。 10> 11> 从API version 10开始，可以通过使用[UIContext](../js-apis-arkui-UIContext.md#uicontext)中的[showActionSheet](../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: [Resource](ts-types.md#resource) \| string,<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: number \| string \| [Resource](ts-types.md#resource),<br/>dy: number \| string \| [Resource](ts-types.md#resource)<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%' } <br/>**说明：**<br/>showInSubWindow为true时，maskRect不生效。| 41| showInSubWindow<sup>11+</sup> | boolean | 否 | 某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。<br/>默认值：false，弹窗显示在应用内，而非独立子窗口。<br/>**说明**：showInSubWindow为true的弹窗无法触发显示另一个showInSubWindow为true的弹窗。 | 42| isModal<sup>11+</sup> | boolean | 否 | 弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层。<br/>默认值：true，此时弹窗有蒙层。 | 43| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 弹窗背板颜色。<br/>默认值：Color.Transparent | 44| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-appendix-enums.md#blurstyle9) | 否 | 弹窗背板模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK | 45 46## SheetInfo接口说明 47 48| 参数名 | 参数类型 | 必填 | 参数描述 | 49| ------ | ------------------------------------------------------------ | ---- | ----------------- | 50| title | string \| [Resource](ts-types.md#resource) | 是 | 选项的文本内容。 | 51| icon | string \| [Resource](ts-types.md#resource) | 否 | 选项的图标，默认无图标显示。 | 52| action | ()=>void | 是 | 选项选中的回调。 | 53 54## DialogButtonStyle<sup>10+</sup>枚举说明 55 56| 名称 | 描述 | 57| --------- | --------------------------------- | 58| DEFAULT | 白底蓝字（深色主题：白底=黑底）。 | 59| HIGHLIGHT | 蓝底白字。 | 60 61## 示例 62 63### 示例1 64 65```ts 66@Entry 67@Component 68struct ActionSheetExample { 69 build() { 70 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 71 Button('Click to Show ActionSheet') 72 .onClick(() => { 73 ActionSheet.show({ 74 title: 'ActionSheet title', 75 subtitle: 'ActionSheet subtitle', 76 message: 'message', 77 autoCancel: true, 78 confirm: { 79 defaultFocus: true, 80 value: 'Confirm button', 81 action: () => { 82 console.log('Get Alert Dialog handled') 83 } 84 }, 85 cancel: () => { 86 console.log('actionSheet canceled') 87 }, 88 alignment: DialogAlignment.Bottom, 89 offset: { dx: 0, dy: -10 }, 90 sheets: [ 91 { 92 title: 'apples', 93 action: () => { 94 console.log('apples') 95 } 96 }, 97 { 98 title: 'bananas', 99 action: () => { 100 console.log('bananas') 101 } 102 }, 103 { 104 title: 'pears', 105 action: () => { 106 console.log('pears') 107 } 108 } 109 ] 110 }) 111 }) 112 }.width('100%') 113 .height('100%') 114 } 115} 116``` 117 118 119 120### 示例2 121 122```ts 123@Entry 124@Component 125struct ActionSheetExample { 126 build() { 127 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 128 Button('Click to Show ActionSheet') 129 .onClick(() => { 130 ActionSheet.show({ 131 title: 'ActionSheet title', 132 subtitle: 'ActionSheet subtitle', 133 message: 'message', 134 autoCancel: true, 135 showInSubWindow: true, 136 isModal: true, 137 confirm: { 138 defaultFocus: true, 139 value: 'Confirm button', 140 action: () => { 141 console.log('Get Alert Dialog handled') 142 } 143 }, 144 cancel: () => { 145 console.log('actionSheet canceled') 146 }, 147 alignment: DialogAlignment.Center, 148 offset: { dx: 0, dy: -10 }, 149 sheets: [ 150 { 151 title: 'apples', 152 action: () => { 153 console.log('apples') 154 } 155 }, 156 { 157 title: 'bananas', 158 action: () => { 159 console.log('bananas') 160 } 161 }, 162 { 163 title: 'pears', 164 action: () => { 165 console.log('pears') 166 } 167 } 168 ] 169 }) 170 }) 171 }.width('100%') 172 .height('100%') 173 } 174} 175``` 176 177 178
