当前位置: 首页 > news >正文

全局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

弹窗内容。

autoCancelboolean

点击遮障层(弹窗之外的空白区域)时,是否关闭弹窗。

默认值:true。

confirm

{

value: string | Resource,

action: () => void

}

确认按钮的文本内容,文本颜色,按钮背景色以及点击回调。
cancel() => void点击遮障层关闭Dialog时的回调。
alignmentDialogAlignment弹窗在竖直方向上的对其方式。默认值:DialogAlignment.Default。
offset

{

dx: Length,

dy: Length

}

弹窗相对于alignment所在位置的偏移量。
sheetsArray<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、效果图

http://www.lryc.cn/news/327668.html

相关文章:

  • Memcached分布式内存对象数据库
  • 华为广告打包报错,问题思考
  • docker-compose mysql
  • PGAdmin 4:用于管理和维护PostgreSQL数据库的强大工具
  • 成都市酷客焕学新媒体科技有限公司:实现品牌的更大价值!
  • 探索数据库--------------mysql主从复制和读写分离
  • 【Hello,PyQt】控件拖拽
  • 荟萃分析R Meta-Analyses 3 Effect Sizes
  • 常用的8个应用和中间件的Docker运行示例
  • UnoCSS实现背景图片样式加载
  • vue前端工程化
  • 面向对象:继承
  • ES学习日记(一)-------单节点安装启动
  • 【管理咨询宝藏59】某大型汽车物流战略咨询报告
  • ArcGIS Pro横向水平图例
  • 线程创建的几种方式
  • Python教程:一文掌握Python多线程(很详细)
  • 华为防火墙配置指引超详细(包含安全配置部分)以USG6320为例
  • (含react-draggable库以及相关BUG如何解决)固定在左上方某盒子内(如按钮)添加可拖动功能,使用react hook语法实现
  • 选择最佳图像处理工具OpenCV、JAI、ImageJ、Thumbnailator和Graphics2D
  • 微信小程序版本更新检测
  • 【每日力扣】343. 整数拆分与63. 不同路径 II
  • 洛谷 Cut Ribbon
  • #AS,idea,maven,gradle
  • FPGA结构与片上资源
  • 【分布式】——分布式事务
  • 第6章:“让我们思考这个”的提示
  • 安卓Activity上滑关闭效果实现
  • 使用conda管理python环境
  • MR混合现实情景实训教学系统在军事演练课堂中的教学应用