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%')
  }
}

实现效果:

相关推荐
SuperHeroWu71 小时前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
sanzk6 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna10 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析11 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg66811 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人12 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人12 小时前
使用 Flutter 绘制一个棋盘
harmonyos
lqj_本人15 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
青瓷看世界16 小时前
华为HarmonyOS打造开放、合规的广告生态 - 插屏广告
华为·harmonyos·广告投放
青瓷看世界16 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力2-管理AR会话
华为·ar·harmonyos·虚拟现实