HarmonyOS应用开发-基础组件,弹窗原来是这样实现的。

系统自带弹窗

系统提供了告警弹窗、列表选择弹窗、日期/时间选择弹窗、文本滑动选择弹窗。也可以根据需求进行自定义弹窗。

警告弹窗

使用AlertDialog.show来显示警告弹窗:

  • 只有一个按钮的弹窗,使用confirm来进行设置按钮
  • 有两个按钮的弹窗,使用primaryButton、secondaryButton来进行设置按钮

示例代码:

typescript 复制代码
Button('自带弹框(只有确定按钮)')
  .margin({ top: 10 })
  .onClick(() => {
    AlertDialog.show({
      title: '提示',
      message: '请检查您的配置信息是否正确',
      autoCancel: true,
      // 设置弹框在底部
      alignment: DialogAlignment.Bottom,
      // 设置弹框底部向上移动60
      offset: { dx: 0, dy: -60 },
      gridCount: 3,

      confirm: {
        value: '确定',
        action: () => {
          promptAction.showToast({ message: '确定' })
        }
      },

      // 点击遮障层关闭dialog时的回调。
      cancel: () => {
        promptAction.showToast({ message: '取消' })
      }
    })
  })


Button('自带弹框(有确定、取消按钮)')
  .margin({ top: 10 })
  .onClick(() => {
    AlertDialog.show({
      title: '提示',
      message: '确定要删除该信息吗?',
      autoCancel: false,
      alignment: DialogAlignment.Center,
      gridCount: 4,

      primaryButton: {
        value: '确定',
        action: () => {
          promptAction.showToast({ message: '确定' })
        }
      },
      secondaryButton: {
        value: '取消',
        action: () => {
          promptAction.showToast({ message: '取消' })
        }
      },
    })
  })

实现效果:

列表选择弹窗

使用ActionSheet来实现列表选择弹窗,设置sheets,构建列表选项,可在每个列表选项中设置监听事件

示例代码:

typescript 复制代码
Button('列表选择弹框')
  .margin({ top: 10 })
  .onClick(() => {
    ActionSheet.show({
      title: '请选择',
      message: '选择你喜欢的水果',
      alignment: DialogAlignment.Bottom,
      offset: { dx: 0, dy: -10 },
  
      confirm: {
        value: 'Confirm button',
        action: () => {
          console.log('Get Alert Dialog handled')
        }
      },
      cancel: () => {
        console.log('actionSheet canceled')
      },

    // 构建列表选项,里边文字样式是否可以修改,待确定
    sheets: [
      {
        title: 'apples',
        action: () => {
          promptAction.showToast({ message: 'apples' })
          console.log('apples')
        }
      },
      {
        title: 'bananas',
        action: () => {
          promptAction.showToast({ message: 'bananas' })

          console.log('bananas')
        }
      },
      {
        title: 'pears',
        action: () => {
          promptAction.showToast({ message: 'pears' })
          console.log('pears')
        }
      }
    ]
  })
})																													

实现效果:

日期滑动选择器弹窗

使用DatePickerDialog实现日期滑动选择器弹窗,

  • selected指定默认显示的日期
  • lunar设置日期是否显示为农历
  • onAccept中监听事件

�示例代码:

typescript 复制代码
// 定义选择日期为当前日期
selectedDate: Date = new Date()
...


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

          promptAction.showToast({ message: JSON.stringify(value) })
        },
        onCancel: () => {
          console.info("DatePickerDialog:onCancel()")
        },
        onChange: (value: DatePickerResult) => {
          console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
        }
      })
    })

实现效果:

时间滑动选择器弹窗

使用TimePickerDialog实现时间滑动选择弹窗

  • useMilitaryTime设置是否24小时制
  • onAccept设置监听事件

示例代码:

typescript 复制代码
// 定义选择时间为当前时间
selectTime: Date = new Date()


Button("时间选择器")
    .margin({ top: 10 })
    .onClick(() => {
      TimePickerDialog.show({
        selected: this.selectTime,
        // 是否需要24小时制
        useMilitaryTime: true,
        onAccept: (value: TimePickerResult) => {
          this.selectTime.setHours(value.hour, value.minute)
          console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
          promptAction.showToast({ message: JSON.stringify(value) })
        },
        onCancel: () => {
          console.info("TimePickerDialog:onCancel()")
        },
        onChange: (value: TimePickerResult) => {
          console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
        }
      })
    })

实现效果:

文本滑动选择器弹窗

使用TextPickerDialog实现文本滑动选择器弹窗

  • range,设置文本选择器的选择范围。
  • selected,选中的index
  • onAccept,设置监听事件

代码示例:

typescript 复制代码
// 选中的
select: number = 2
// range,设置文本选择器的选择范围。
fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
  

Button("TextPickerDialog")
  .margin({ top: 10 })
  .onClick(() => {
    TextPickerDialog.show({
      // 设置文本选择器的选择范围。
      range: this.fruits,
      // 选中的
      selected: this.select,
      // 设置选择器中选项的高度。
      // defaultPickerItemHeight: 50,
      onAccept: (value: TextPickerResult) => {
        // 设置select为按下确定按钮时候的选中项index,这样当弹窗再次弹出时显示选中的是上一次确定的选项
        this.select = value.index
        console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))

        promptAction.showToast({ message: JSON.stringify(value) })
      },
      onCancel: () => {
        console.info("TextPickerDialog:onCancel()")
      },
      onChange: (value: TextPickerResult) => {
        console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
      }
    })
  })

实现效果:

自定义弹窗

自定义MyCustomDialog实现自定义弹框

  • 在MyCustomDialog上设置@CustomDialog
  • 在MyCustomDialog中设置弹窗中要显示的内容,设置Button事件
  • 在MyCustomDialog中设置变量CustomDialogController
  • 在页面中使用MyCustomDialog,设置CustomDialogController
typescript 复制代码
import promptAction from '@ohos.promptAction';

@CustomDialog
struct MyCustomDialog {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  title: string = 'title'
  message: string = 'message'

  build() {
    Column() {
      Text(this.title)
        .fontSize(20)
        .width("90%")
        .margin({ top: 10 })

      Text(this.message)
        .fontSize(16)
        .width("90%")
        .margin({ top: 10, bottom: 10 })

      Divider().opacity(0.6).margin({ left: 5, right: 5 })

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Row() {
          Button('取消')
            .backgroundColor(0xffffff).fontColor(Color.Black)
            .width('50%')
            .onClick(() => {
              this.controller.close()
              this.cancel()
            })


          Divider().vertical(true).height(22).opacity(0.6).margin({ left: 5, right: 5 })


          Button('确定')
            .width('50%')
            .backgroundColor(0xffffff).fontColor(Color.Black)
            .onClick(() => {
              this.controller.close();
              this.confirm()
            })
        }
      }.margin({ top: 5, bottom: 5 })
    }
  }
}


@Entry
@Component
struct MyDialogPage {
  
  dialogController: CustomDialogController = new CustomDialogController({
    builder: MyCustomDialog({
      cancel: this.onCancel,
      confirm: this.onAccept,
      title: '提示',
      message: 'hello world,wmding'
    }),
    // 可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示
    alignment: DialogAlignment.Center,
    // 点击遮障层退出时的回调
    cancel: this.onExistApp,
    autoCancel: true,
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = undefined // 将dialogController置空
  }

  onExistApp() {
    promptAction.showToast({ message: '取消' })
  }

  onCancel() {
    promptAction.showToast({ message: '取消' })
  }

  onAccept() {
    promptAction.showToast({ message: '确定' })
  }

  build() {
    Column() {
      Button('弹框').onClick(() => {
        if (this.dialogController != undefined) {
          this.dialogController.open()
        }
      })
    }.width('100%')
  }
}

实现效果:

相关推荐
Random_index1 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室4 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu76 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr05759 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟46416 小时前
初识ArkUI
harmonyos
SameX16 小时前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠17 小时前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤1 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*1 天前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
howard20051 天前
鸿蒙实战:页面跳转传参
harmonyos·跳转·router·传参