构建会议发布页鸿蒙示例代码

鸿蒙场景化示例代码技术工程师
发布于 2025-3-4 19:57
438浏览
0收藏

本文原创发布在华为开发者社区

介绍

本示例是使用ArkTS编写的会议发布UI页面,该页面提供了会议内容和人员的填写功能,方便开发者后续进行进一步开发。

构建会议发布页源码链接

效果预览

构建会议发布页鸿蒙示例代码-鸿蒙开发者社区

使用说明

打开页面,展示会议发布页面,用户可以根据需求填入信息。

实现思路

  1. 该页面通过DatePickerDialog实现日期选择功能。
DatePickerDialog.show({
  selected: new Date(this.meetingFormData.selectedDate),
  onDateAccept: (value: Date) => {
    let date: string
    let y: number = value.getFullYear()
    let m: number = value.getMonth() + 1
    m = m < 10 ? Number('0' + m) : m
    let d: number = value.getDate()
    d = d < 10 ? Number('0' + d) : d
    date = y + '-' + m + '-' + d
    this.meetingFormData.selectedDate = date
    console.info('DatePickerDialog:onDateAccept()' + value.toString())
  },
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  1. 通过foreach和checkbox实现通知多选功能。。
ForEach(this.meetingFormData.messages, (item: MessageRemindItem) => {
  Row() {
    Checkbox({ name: item.name })
      .select(item.checked)
      .shape(CheckBoxShape.CIRCLE)
      .onChange((value: boolean) => {
        item.checked = value
      })
    if (item.name) {
      Text(item.name)
        .margin({ left: 10 })
        .fontSize('16vp')
        .fontColor(Color.Grey)
    }
  }.alignItems(VerticalAlign.Center)
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

分类
收藏
回复
举报


回复
    相关推荐