全局UI方法-弹窗二-列表选择弹窗(ActionSheet)

1、描述

定义列表弹窗

2、接口

ActionSheet.show(value:{

title: string | Resource,

message: string | Resource,

autoCancel?: boolean,

confrim?: {value: string | Resource, action: () => void },

cancel?: () => void,

alignment?: DialogAlignment,

offset?: {dx: Length, dy: Length } ,

sheets: Array<SheetInfo>

})

3、参数

名称 类型 必填 说明
title string | Resource 弹窗标题。
message string | Resource 弹窗内容。
autoCancel boolean 点击遮障层(弹窗之外的空白区域)时,是否关闭弹窗。 默认值:true。
confirm { value: string | Resource, action: () => void } 确认按钮的文本内容,文本颜色,按钮背景色以及点击回调。
cancel () => void 点击遮障层关闭Dialog时的回调。
alignment DialogAlignment 弹窗在竖直方向上的对其方式。默认值:DialogAlignment.Default。
offset { dx: Length, dy: Length } 弹窗相对于alignment所在位置的偏移量。
sheets Array<sheetInfo> 设置选项内容,每个选择项支持设置图片、文本和选中的回调。

4、sheetInfo对象说明:

5、示例

复制代码
@Entry
@Component
struct ActionSheetPage {
  @State message: string = '定义列表弹窗'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .width("96%")
          .margin({ top: 12 })

        Button("ActionSheet.show")
          .width("96%")
          .fontSize(20)
          .margin({ top: 12 })
          .onClick(() => {
            ActionSheet.show({
              title: "ActionSheet",
              message: "定义列表弹窗",
              autoCancel: true,
              confirm: { value: "确认", action: () => {
                console.info("ActionSheetPage click confirm");
              } },
              cancel: () => {
                console.info("ActionSheetPage autoCancel is true click cancel");
              },
              alignment: DialogAlignment.Bottom,
              offset: { dx: 0, dy: -20 },
              sheets: [{
                title: 'Android',
                action: () => {
                  console.log('Android')
                }
              },
                {
                  title: 'Java',
                  action: () => {
                    console.log('Java')
                  }
                },
                {
                  title: 'IOS',
                  action: () => {
                    console.log('IOS')
                  }
                },
                {
                  title: 'Python',
                  action: () => {
                    console.log('Python')
                  }
                },
                {
                  title: 'Vue',
                  action: () => {
                    console.log('Vue')
                  }
                },
                {
                  title: 'ArkTS',
                  action: () => {
                    console.log('ArkTS')
                  }
                }
              ]
            })
          })

      }
      .width('100%')
      .height("100%")
    }
    .height('100%')
  }
}

6、效果图

相关推荐
SuperHeroWu713 小时前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
Georgewu13 小时前
【HarmonyOS】ArkUI-X 跨平台框架入门详解(一)
harmonyos
SuperHeroWu713 小时前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
Georgewu13 小时前
【HarmonyOS】ArkUI-X一套代码跑多端的跨平台方案概念详解
harmonyos
ins_lizhiming17 小时前
【人工智能】华为昇腾NPU-Vllm Ascend部署及镜像制作
人工智能·pytorch·华为·语言模型·自然语言处理
zhanshuo17 小时前
HarmonyOS NEXT 智能场景识别实战:让设备主动思考的关键技术揭秘
harmonyos
zhanshuo21 小时前
HarmonyOS分布式能力全解析:手机一放下,音箱自动响起!
harmonyos
zhanshuo21 小时前
基于HarmonyOS的智能灯光控制系统设计:从定时触发到动作联动全流程实战
harmonyos
weixin_541299941 天前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
Georgewu1 天前
【HarmonyOS】元服务概念详解
harmonyos