HarmonyOS NEXT鸿蒙开发入门，列表选择弹窗 (ActionSheet)

1. 官方文档指南

1. 列表选择弹窗 (ActionSheet): https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-action-sheet-V5

2. 描述

定义列表弹窗并弹出

3. 使用说明

ActionSheet.show
static show(value: ActionSheetOptions)
static 修饰的方法，直接通过类名.方法的形式调用

1. 参数：

参数名	类型	必填	描述
value	ActionSheetOptions	是	配置列表选择弹窗的参数

2. ActionSheetOptions对象说明：

参数名	类型	必填	描述
title	Resource or string	是	弹窗标题。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
subtitle10+	ResourceStr	否	弹窗副标题。 元服务API： 从API version 11开始，该接口支持在元服务中使用
message	Resource orstring	是	弹窗内容。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
autoCancel	boolean	否	点击遮障层时，是否关闭弹窗。 默认值：true 值为true时，点击遮障层关闭弹窗，值为false时，点击遮障层不关闭弹窗。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
confirm	{ enabled10+?: boolean, defaultFocus10+?: boolean, style10+?: DialogButtonStyle, value: Resourceorstring, action: () => void }	否	确认Button的使能状态、默认焦点、按钮风格、文本内容和点击回调。在弹窗获焦且未进行tab键走焦时，该按钮默认响应Enter键，且多重弹窗可自动获焦连续响应。默认响应Enter键能力在defaultFocus为true时不生效。 enabled：点击Button是否响应，true表示Button可以响应，false表示Button不可以响应。 默认值：true defaultFocus：设置Button是否是默认焦点，true表示Button是默认焦点，false表示Button不是默认焦点。 默认值：false style：设置Button的风格样式。 默认值：DialogButtonStyle.DEFAULT value：Button文本内容。 action: Button选中时的回调。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
cancel	() => void	否	点击遮障层关闭dialog时的回调。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
alignment	DialogAlignment	否	弹窗在竖直方向上的对齐方式。 默认值：DialogAlignment.Bottom 元服务API： 从API version 11开始，该接口支持在元服务中使用。 说明： 若在UIExtension中设置showInSubWindow为true, 弹窗将基于UIExtension的宿主窗口对齐。
sheets	Array<SheetInfo>	是	设置选项内容，每个选择项支持设置图片、文本和选中的回调。 元服务API： 从API version 11开始，该接口支持在元服务中使用。

这里我只列举了常用的属性,更多使用方法请查看官方API文档

3. SheetInfo接口说明

参数名	类型	必填	描述
title	string or Resource	是	选项的文本内容。
icon	string or Resource	否	选项的图标，默认无图标显示。
action	()=>void	是	选项选中的回调。

4.代码实现过程

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct ActionSheetPage {
  build() {
    RelativeContainer() {
      Button('列表选择弹窗')
        .id('ActionSheetPageHelloWorld')
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .width('100%')

        .onClick(() => {
          ActionSheet.show({
            title: '温馨提示',
            message: 'ActionSheet列表弹框',
            autoCancel: false,
            alignment: DialogAlignment.Bottom,
            confirm: {
              value: '选择确认',
              action: () => {
                promptAction.showToast({
                  message: '选择确认'
                })
              }
            },
            sheets: [
              {
                title: '北京 \n',
                action: () => {
                  promptAction.showToast({
                    message: '北京'
                  })
                }
              },
              {
                title: '东京\n',
                action: () => {
                  promptAction.showToast({
                    message: '东京'
                  })
                }
              },
              {
                title: '巴黎\n',
                action: () => {
                  promptAction.showToast({
                    message: '巴黎'
                  })
                }
              }
              ,
              {
                title: '伦敦\n',
                action: () => {

                }
              }
              ,
              {
                title: '纽约\n',
                action: () => {

                }
              }
              ,
              {
                title: '悉尼\n',
                action: () => {

                }
              }
              ,
              {
                title: '莫斯科\n',
                action: () => {

                }
              },
              {
                title: '开罗\n',
                action: () => {

                }
              },
              {
                title: '柏林\n',
                action: () => {

                }
              }
              ,
              {
                title: '罗马\n',
                action: () => {

                }
              }
              ,
              {
                title: '雅典\n',
                action: () => {

                }
              }
              ,
              {
                title: '首尔\n',
                action: () => {

                }
              }
              ,
              {
                title: '曼谷\n',
                action: () => {

                }
              }
              ,
              {
                title: '新德里\n',
                action: () => {

                }
              }
              ,
              {
                title: '里约\n',
                action: () => {

                }
              }
              ,
              {
                title: '洛杉矶\n',
                action: () => {

                }
              },
              {
                title: '温哥华\n',
                action: () => {

                }
              },
              {
                title: '慕尼黑\n',
                action: () => {

                }
              }

            ]
          })
        })
    }
    .height('100%')
    .width('100%')
    .padding(10)
  }
}

5.运行效果