列表选择弹窗 (ActionSheet)

列表弹窗。

说明：

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

本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。

ActionSheetOptions对象说明

系统能力： SystemCapability.ArkUI.ArkUI.Full

SheetInfo对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

LevelMode¹⁵⁺

type LevelMode = LevelMode

弹窗的显示层级。

原子化服务API： 从API version 15开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

ImmersiveMode¹⁵⁺

type ImmersiveMode = ImmersiveMode

弹窗的蒙层效果。

原子化服务API： 从API version 15开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

DismissDialogAction¹²⁺

Dialog关闭的信息。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

ActionSheetButtonOptions¹⁸⁺对象说明

原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

ActionSheetOffset¹⁸⁺对象说明

原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

ActionSheet

show^(deprecated)

static show(value: ActionSheetOptions)

定义列表弹窗并弹出。

说明：

从API version 18开始废弃，建议使用UIContext中的showActionSheet替代。

从API version 10开始，可以通过使用UIContext中的showActionSheet来明确UI的执行上下文。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

示例

说明：

直接使用ActionSheet可能导致实例不明确的问题，建议使用getUIContext获取UIContext实例，并使用showActionSheet调用绑定实例的ActionSheet.show()。

示例1（弹出列表选择弹窗）

该示例通过点击按钮弹窗列表选择弹窗。

// xxx.ets
@Entry
@Component
struct ActionSheetExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('Click to Show ActionSheet')
        .onClick(() => {
          this.getUIContext().showActionSheet({
            title: 'ActionSheet title',
            subtitle: 'ActionSheet subtitle',
            message: 'message',
            autoCancel: true,
            confirm: {
              defaultFocus: true,
              value: 'Confirm button',
              action: () => {
                console.log('Get Alert Dialog handled');
              }
            },
            cancel: () => {
              console.log('actionSheet canceled');
            },
            onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
              console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
              console.log("dialog onWillDismiss");
              if (dismissDialogAction.reason === DismissReason.PRESS_BACK) {
                dismissDialogAction.dismiss();
              }
              if (dismissDialogAction.reason === DismissReason.TOUCH_OUTSIDE) {
                dismissDialogAction.dismiss();
              }
            },
            alignment: DialogAlignment.Bottom,
            offset: { dx: 0, dy: -10 },
            sheets: [
              {
                title: 'apples',
                action: () => {
                  console.log('apples');
                }
              },
              {
                title: 'bananas',
                action: () => {
                  console.log('bananas');
                }
              },
              {
                title: 'pears',
                action: () => {
                  console.log('pears');
                }
              }
            ]
          })
        })
    }.width('100%')
    .height('100%')
  }
}

示例2（可在主窗外弹出的弹窗）

在2in1设备上设置showInSubWindow为true时，可以弹出在主窗外显示的弹窗。

// xxx.ets
@Entry
@Component
struct ActionSheetExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('Click to Show ActionSheet')
        .onClick(() => {
          this.getUIContext().showActionSheet({
            title: 'ActionSheet title',
            subtitle: 'ActionSheet subtitle',
            message: 'message',
            autoCancel: true,
            showInSubWindow: true,
            isModal: true,
            confirm: {
              defaultFocus: true,
              value: 'Confirm button',
              action: () => {
                console.log('Get Alert Dialog handled');
              }
            },
            cancel: () => {
              console.log('actionSheet canceled');
            },
            onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
              console.info("reason=" + JSON.stringify(dismissDialogAction.reason));
              console.log("dialog onWillDismiss");
              if (dismissDialogAction.reason === DismissReason.PRESS_BACK) {
                dismissDialogAction.dismiss();
              }
              if (dismissDialogAction.reason === DismissReason.TOUCH_OUTSIDE) {
                dismissDialogAction.dismiss();
              }
            },
            alignment: DialogAlignment.Center,
            offset: { dx: 0, dy: -10 },
            sheets: [
              {
                title: 'apples',
                action: () => {
                  console.log('apples');
                }
              },
              {
                title: 'bananas',
                action: () => {
                  console.log('bananas');
                }
              },
              {
                title: 'pears',
                action: () => {
                  console.log('pears');
                }
              }
            ]
          })
        })
    }.width('100%')
    .height('100%')
  }
}

示例3（设置弹窗的动画）

该示例通过配置transition实现弹窗的显示和消失动画。

// xxx.ets
@Entry
@Component
struct ActionSheetExample {
  build() {
    Column({ space: 5 }) {
      Button('ActionSheet Set Duration')
        .onClick(() => {
          this.getUIContext().showActionSheet({
            title: 'ActionSheet 1',
            message: 'Set Animation Duration open 3 second, close 100 ms',
            autoCancel: true,
            alignment: DialogAlignment.Top,
            transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY
              .animation({ duration: 3000, curve: Curve.Sharp })
              .combine(TransitionEffect.scale({ x: 1.5, y: 1.5 }).animation({ duration: 3000, curve: Curve.Sharp })),
              TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth })
                .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }).animation({ duration: 100, curve: Curve.Smooth }))),
            offset: { dx: 0, dy: -20 },
            confirm: {
              value: 'button',
              action: () => {
                console.info('Button-clicking callback');
              }
            },
            cancel: () => {
              console.info('Closed callbacks');
            },
            sheets: [
              {
                title: 'apples',
                action: () => {
                  console.log('apples');
                }
              },
              {
                title: 'bananas',
                action: () => {
                  console.log('bananas');
                }
              },
              {
                title: 'pears',
                action: () => {
                  console.log('pears');
                }
              }
            ]
          })
        }).backgroundColor(0x317aff).height("88px")
    }.width('100%').margin({ top: 5 })
  }
}

示例4（设置弹窗的样式）

该示例定义了ActionSheet的样式，如宽度、高度、背景色、阴影等。

// xxx.ets
@Entry
@Component
struct ActionSheetExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Button('Click to Show ActionSheet')
        .onClick(() => {
          this.getUIContext().showActionSheet({
            title: 'ActionSheet title',
            subtitle: 'ActionSheet subtitle',
            message: 'message',
            autoCancel: true,
            width: 300,
            height: 350,
            cornerRadius: 20,
            borderWidth: 1,
            borderStyle: BorderStyle.Solid, //使用borderStyle属性，需要和borderWidth属性一起使用
            borderColor: Color.Blue, //使用borderColor属性，需要和borderWidth属性一起使用
            backgroundColor: Color.White,
            shadow: ({
              radius: 20,
              color: Color.Grey,
              offsetX: 50,
              offsetY: 0
            }),
            confirm: {
              defaultFocus: true,
              value: 'Confirm button',
              action: () => {
                console.log('Get Alert Dialog handled');
              }
            },
            cancel: () => {
              console.log('actionSheet canceled');
            },
            onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
              console.info("reason=" + JSON.stringify(dismissDialogAction.reason));
              console.log("dialog onWillDismiss");
              if (dismissDialogAction.reason === DismissReason.PRESS_BACK) {
                dismissDialogAction.dismiss();
              }
              if (dismissDialogAction.reason === DismissReason.TOUCH_OUTSIDE) {
                dismissDialogAction.dismiss();
              }
            },
            alignment: DialogAlignment.Bottom,
            offset: { dx: 0, dy: -10 },
            sheets: [
              {
                title: 'apples',
                action: () => {
                  console.log('apples');
                }
              },
              {
                title: 'bananas',
                action: () => {
                  console.log('bananas');
                }
              },
              {
                title: 'pears',
                action: () => {
                  console.log('pears');
                }
              }
            ]
          })
        })
    }.width('100%')
  }
}

示例5（悬停态弹窗）

该示例展示了在折叠屏悬停态下设置dialog布局区域的效果。

// xxx.ets
@Entry
@Component
struct ActionSheetExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('Click to Show ActionSheet')
        .onClick(() => {
          this.getUIContext().showActionSheet({
            title: 'ActionSheet title',
            subtitle: 'ActionSheet subtitle',
            message: 'message',
            autoCancel: true,
            confirm: {
              defaultFocus: true,
              value: 'Confirm button',
              action: () => {
                console.log('Get Alert Dialog handled');
              }
            },
            cancel: () => {
              console.log('actionSheet canceled');
            },
            onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
              console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
              console.log("dialog onWillDismiss")
              if (dismissDialogAction.reason === DismissReason.PRESS_BACK) {
                dismissDialogAction.dismiss();
              }
              if (dismissDialogAction.reason === DismissReason.TOUCH_OUTSIDE) {
                dismissDialogAction.dismiss();
              }
            },
            alignment: DialogAlignment.Bottom,
            offset: { dx: 0, dy: -10 },
            enableHoverMode: true,
            hoverModeArea: HoverModeAreaType.TOP_SCREEN,
            sheets: [
              {
                title: 'apples',
                action: () => {
                  console.log('apples');
                }
              },
              {
                title: 'bananas',
                action: () => {
                  console.log('bananas');
                }
              },
              {
                title: 'pears',
                action: () => {
                  console.log('pears');
                }
              }
            ]
          })
        })
    }.width('100%')
    .height('100%')
  }
}

示例6（弹窗生命周期）

该示例展示了弹窗生命周期的相关接口的使用方法。

// xxx.ets
@Entry
@Component
struct Example1 {
  @State log:string = 'Log information:';
  flag: boolean = false;

  build() {
    Column({ space: 5 }) {
      Button('ActionSheet')
        .onClick(() => {
          ActionSheet.show({
            title: 'ActionSheet',
            message: 'message',
            autoCancel: true,
            alignment: DialogAlignment.Bottom,
            offset: { dx: 0, dy: -20 },
            confirm: {
              value: 'button',
              action: () => {
                console.info('ActionSheet Button-clicking callback')
              }
            },
            cancel: () => {
              console.info('ActionSheet Closed callbacks')
            },
            sheets: [
              {
                title: 'apples',
                action: () => {
                  console.log('ActionSheet apples')
                }
              },
              {
                title: 'bananas',
                action: () => {
                  console.log('ActionSheet bananas')
                }
              },
              {
                title: 'pears',
                action: () => {
                  console.log('ActionSheet pears')
                }
              }
            ],
            onDidAppear: () => {
              this.log += '# onDidAppear'
              console.info("ActionSheet,is onDidAppear!")
            },
            onDidDisappear: () => {
              this.log += '# onDidDisappear'
              console.info("ActionSheet,is onDidDisappear!")
            },
            onWillAppear: () => {
              this.log = 'Log information:onWillAppear'
              console.info("ActionSheet,is onWillAppear!")
            },
            onWillDisappear: () => {
              this.log += '# onWillDisappear'
              console.info("ActionSheet,is onWillDisappear!")
            }
          })
        }).backgroundColor(0x317aff).height("88px")
      Text(this.log).fontSize(30).margin({ top: 200 })
    }.width('100%').margin({ top: 5 })
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙图像AI分析错误码

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙弹出框 (Dialog)

harmony 鸿蒙DialogV2