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

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

介绍

本示例是使用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())
  },
})

2. 通过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)
})