OpenHarmony应用开发-全局UI方法 弹窗/菜单

素年锦时静待君丶
发布于 2023-4-17 18:38
浏览
0收藏

版本:v3.2 Release

警告弹窗

显示警告弹窗组件,可设置文本内容与响应回调。

说明:

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

属性

名称

参数类型

参数描述

show

​AlertDialogParamWithConfirm​​​ | ​​AlertDialogParamWithButtons​

定义并显示AlertDialog组件。

AlertDialogParamWithConfirm对象说明

参数名

参数类型

必填

参数描述

title

​ResourceStr​

弹窗标题。

message

​ResourceStr​

弹窗内容。

autoCancel

boolean

点击遮障层时,是否关闭弹窗。

默认值:true

confirm

{

value: ​​ResourceStr​​,

fontColor?: ​​ResourceColor​​,

backgroundColor?:  ​​ResourceColor​​,

action: () => void

}

确认按钮的文本内容、文本色、按钮背景色和点击回调。

cancel

() => void

点击遮障层关闭dialog时的回调。

alignment

​DialogAlignment​

弹窗在竖直方向上的对齐方式。

默认值:DialogAlignment.Default

offset

​Offset​

弹窗相对alignment所在位置的偏移量。

gridCount

number

弹窗容器宽度所占用栅格数。

AlertDialogParamWithButtons对象说明

参数名

参数类型

必填

参数描述

title

​ResourceStr​

弹窗标题。

message

​ResourceStr​

弹窗内容。

autoCancel

boolean

点击遮障层时,是否关闭弹窗。

默认值:true

primaryButton

{

value: ​​ResourceStr​​,

fontColor?: ​​ResourceColor​​,

backgroundColor?: ​​ResourceColor​​,

action: () => void;

}

按钮的文本内容、文本色、按钮背景色和点击回调。

secondaryButton

{

value: ​​ResourceStr​​,

fontColor?: ​​ResourceColor​​,

backgroundColor?: ​​ResourceColor​​,

action: () => void;

}

按钮的文本内容、文本色、按钮背景色和点击回调。

cancel

() => void

点击遮障层关闭dialog时的回调。

alignment

​DialogAlignment​

弹窗在竖直方向上的对齐方式。

默认值:DialogAlignment.Default

offset

​Offset​

弹窗相对alignment所在位置的偏移量。

gridCount

number

弹窗容器宽度所占用栅格数。

DialogAlignment枚举说明

名称

描述

Top

垂直顶部对齐。

Center

垂直居中对齐。

Bottom

垂直底部对齐。

Default

默认对齐。

TopStart8+

左上对齐。

TopEnd8+

右上对齐。

CenterStart8+

左中对齐。

CenterEnd8+

右中对齐。

BottomStart8+

左下对齐。

BottomEnd8+

右下对齐。

示例

// xxx.ets
@Entry
@Component
struct AlertDialogExample {
  build() {
    Column({ space: 5 }) {
      Button('one button dialog')
        .onClick(() => {
          AlertDialog.show(
            {
              title: 'title',
              message: 'text',
              autoCancel: true,
              alignment: DialogAlignment.Bottom,
              offset: { dx: 0, dy: -20 },
              gridCount: 3,
              confirm: {
                value: 'button',
                action: () => {
                  console.info('Button-clicking callback')
                }
              },
              cancel: () => {
                console.info('Closed callbacks')
              }
            }
          )
        })
        .backgroundColor(0x317aff)
      Button('two button dialog')
        .onClick(() => {
          AlertDialog.show(
            {
              title: 'title',
              message: 'text',
              autoCancel: true,
              alignment: DialogAlignment.Bottom,
              gridCount: 4,
              offset: { dx: 0, dy: -20 },
              primaryButton: {
                value: 'cancel',
                action: () => {
                  console.info('Callback when the first button is clicked')
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  console.info('Callback when the second button is clicked')
                }
              },
              cancel: () => {
                console.info('Closed callbacks')
              }
            }
          )
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

OpenHarmony应用开发-全局UI方法 弹窗/菜单-开源基础软件社区

列表选择弹窗

列表弹窗。

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

ActionSheet.show

show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } })

定义列表弹窗并弹出。

参数:

参数名

参数类型

必填

参数描述

title

​Resource​​ | string

弹窗标题。

message

​Resource​​ | string

弹窗内容。

autoCancel

boolean

点击遮障层时,是否关闭弹窗。

默认值:true

confirm

{

value: ​​ResourceStr​​,

action: () => void

}

确认按钮的文本内容和点击回调。

默认值:

value:按钮文本内容。

action: 按钮选中时的回调。

cancel

() => void

点击遮障层关闭dialog时的回调。

alignment

​DialogAlignment​

弹窗在竖直方向上的对齐方式。

默认值:DialogAlignment.Bottom

offset

{

dx: Length,

dy: Length

}

弹窗相对alignment所在位置的偏移量。{

dx: 0,

dy: 0

}

sheets

Array<SheetInfo>

设置选项内容,每个选择项支持设置图片、文本和选中的回调。

SheetInfo接口说明

参数名

参数类型

必填

参数描述

title

​ResourceStr​

选项的文本内容。

icon

​ResourceStr​

选项的图标,默认无图标显示。

action

()=>void

选项选中的回调。

示例

@Entry
@Component
struct ActionSheetExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('Click to Show ActionSheet')
        .onClick(() => {
          ActionSheet.show({
            title: 'ActionSheet title',
            message: 'message',
            autoCancel: true,
            confirm: {
              value: 'Confirm button',
              action: () => {
                console.log('Get Alert Dialog handled')
              }
            },
            cancel: () => {
              console.log('actionSheet canceled')
            },
            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%')
  }
}

OpenHarmony应用开发-全局UI方法 弹窗/菜单-开源基础软件社区

自定义弹窗

通过CustomDialogController类显示自定义弹窗。使用弹窗组件时,可优先考虑自定义弹窗,便于自定义弹窗的样式与内容。

说明:

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

接口

CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam})

参数:

参数名

参数类型

必填

参数描述

builder

CustomDialog

自定义弹窗内容构造器。

cancel

() => void

点击遮障层退出时的回调。

autoCancel

boolean

是否允许点击遮障层退出。

默认值:true

alignment

​DialogAlignment​

弹窗在竖直方向上的对齐方式。

默认值:DialogAlignment.Default

offset

​Offset​

弹窗相对alignment所在位置的偏移量。

customStyle

boolean

弹窗容器样式是否自定义。

默认值:false,弹窗容器的宽度根据栅格系统自适应,不跟随子节点;高度自适应子节点,最大为窗口高度的90%;圆角为24vp。

gridCount8+

number

弹窗宽度占​​栅格宽度​​的个数。

默认值为4,异常值按默认值处理,最大栅格数为系统最大栅格数。

CustomDialogController

导入对象

dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
    ts

说明:CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量,且在@Component struct内部定义时赋值才有效,具体用法可看下方示例。

open()

open(): void

显示自定义弹窗内容,若已显示,则不生效。

close

close(): void

关闭显示的自定义弹窗,若已关闭,则不生效。

示例

// xxx.ets
@CustomDialog
struct CustomDialogExample {
  @Link textValue: string
  @Link inputValue: string
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void

  build() {
    Column() {
      Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
      TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
        .onChange((value: string) => {
          this.textValue = value
        })
      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.inputValue = this.textValue
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
      textValue: $textValue,
      inputValue: $inputValue
    }),
    cancel: this.existApp,
    autoCancel: true,
    alignment: DialogAlignment.Default,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })

  aboutToDisappear() {
    delete this.dialogController,
    this.dialogController = undefined
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  existApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != undefined) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

OpenHarmony应用开发-全局UI方法 弹窗/菜单-开源基础软件社区

日期滑动选择器弹窗

根据指定的日期范围创建日期滑动选择器,展示在弹窗上。

说明:

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

DatePickerDialog.show

show(options?: DatePickerDialogOptions)

定义日期滑动选择器弹窗并弹出。

DatePickerDialogOptions参数:

参数名

参数类型

必填

默认值

参数描述

start

Date

Date(‘1970-1-1’)

设置选择器的起始日期。

end

Date

Date(‘2100-12-31’)

设置选择器的结束日期。

selected

Date

当前系统日期

设置当前选中的日期。

lunar

boolean

false

日期是否显示为农历。

onAccept

(value: ​​DatePickerResult​​) => void

-

点击弹窗中的“确定”按钮时触发该回调。

onCancel

() => void

-

点击弹窗中的“取消”按钮时触发该回调。

onChange

(value: ​​DatePickerResult​​) => void

-

滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。

示例

// xxx.ets
@Entry
@Component
struct DatePickerDialogExample {
  selectedDate: Date = new Date("2010-1-1")

  build() {
    Column() {
      Button("DatePickerDialog")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            onAccept: (value: DatePickerResult) => {
              // 通过Date的setFullYear方法设置按下确定按钮时的日期,这样当弹窗再次弹出时显示选中的是上一次确定的日期
              this.selectedDate.setFullYear(value.year, value.month, value.day)
              console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("DatePickerDialog:onCancel()")
            },
            onChange: (value: DatePickerResult) => {
              console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })

      Button("Lunar DatePickerDialog")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            lunar: true,
            onAccept: (value: DatePickerResult) => {
              this.selectedDate.setFullYear(value.year, value.month, value.day)
              console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("DatePickerDialog:onCancel()")
            },
            onChange: (value: DatePickerResult) => {
              console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })
    }.width('100%')
  }
}

时间滑动选择器弹窗

以24小时的时间区间创建时间滑动选择器,展示在弹窗上。

说明:

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

TimePickerDialog.show

show(options?: TimePickerDialogOptions)

定义时间滑动选择器弹窗并弹出。

TimePickerDialogOptions参数:

参数名

参数类型

必填

参数描述

selected

Date

设置当前选中的时间。

默认值:当前系统时间

useMilitaryTime

boolean

展示时间是否为24小时制,默认为12小时制。

默认值:false

onAccept

(value: ​​TimePickerResult​​) => void

点击弹窗中的“确定”按钮时触发该回调。

onCancel

() => void

点击弹窗中的“取消”按钮时触发该回调。

onChange

(value: ​​TimePickerResult​​) => void

滑动弹窗中的选择器使当前选中时间改变时触发该回调。

示例

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2020-12-25T08:30:00')

  build() {
    Column() {
      Button("TimePickerDialog 12小时制")
        .margin(20)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.selectTime,
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间,这样当弹窗再次弹出时显示选中的为上一次确定的时间
              this.selectTime.setHours(value.hour, value.minute)
              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()")
            },
            onChange: (value: TimePickerResult) => {
              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })
      Button("TimePickerDialog 24小时制")
        .margin(20)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.selectTime,
            useMilitaryTime: true,
            onAccept: (value: TimePickerResult) => {
              this.selectTime.setHours(value.hour, value.minute)
              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()")
            },
            onChange: (value: TimePickerResult) => {
              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })
    }.width('100%')
  }
}

文本滑动选择器弹窗

根据指定的选择范围创建文本选择器,展示在弹窗上。

说明:

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

TextPickerDialog.show

show(options?: TextPickerDialogOptions)

定义文本滑动选择器弹窗并弹出。

TextPickerDialogOptions参数:

参数名

参数类型

必填

参数描述

range

string[] | ​​Resource​

设置文本选择器的选择范围。

selected

number

设置选中项的索引值。

默认值:0

value

string

设置选中项的文本内容。当设置了selected参数时,该参数不生效。如果设置的value值不在range范围内,则默认取range第一个元素。

defaultPickerItemHeight

number | string

设置选择器中选项的高度。

onAccept

(value: ​​TextPickerResult​​) => void

点击弹窗中的“确定”按钮时触发该回调。

onCancel

() => void

点击弹窗中的“取消”按钮时触发该回调。

onChange

(value: ​​TextPickerResult​​) => void

滑动弹窗中的选择器使当前选中项改变时触发该回调。

TextPickerResult对象说明

名称

类型

描述

value

string

选中项的文本内容。

index

number

选中项在选择范围数组中的索引值。

示例

// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
  @State select: number = 2
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']

  build() {
    Column() {
      Button("TextPickerDialog")
        .margin(20)
        .onClick(() => {
          TextPickerDialog.show({
            range: this.fruits,
            selected: this.select,
            onAccept: (value: TextPickerResult) => {
              // 设置select为按下确定按钮时候的选中项index,这样当弹窗再次弹出时显示选中的是上一次确定的选项
              this.select = value.index
              console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TextPickerDialog:onCancel()")
            },
            onChange: (value: TextPickerResult) => {
              console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })
    }.width('100%')
  }
}

菜单

在页面范围内关闭通过​​bindContextMenu​​属性绑定的菜单。

说明:

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

ContextMenu.close

方法

描述

close(): void

可以通过该方法在页面范围内关闭通过​​bindContextMenu​​给组件绑定的菜单。

示例

// xxx.ets
@Entry
@Component
struct Index {
  @Builder MenuBuilder() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('Test ContextMenu1')
      Divider().strokeWidth(2).margin(5).color(Color.Black)
      Button('Test ContextMenu2')
      Divider().strokeWidth(2).margin(5).color(Color.Black)
      Button('Test ContextMenu3')
    }
    .width(200)
    .height(160)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Column() {
        Text("Test ContextMenu")
          .fontSize(20)
          .width('100%')
          .height(500)
          .backgroundColor(0xAFEEEE)
          .textAlign(TextAlign.Center)
      }
      .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
      .onDragStart(()=>{
        // 拖拽时关闭菜单
        ContextMenu.close()
      })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发-全局UI方法 弹窗/菜单-开源基础软件社区



文章转载自:​​https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md/​

已于2023-4-17 18:38:51修改
收藏
回复
举报
回复
    相关推荐