鸿蒙HarmonyOS开发生日选择弹框

鸿蒙HarmonyOS开发生日选择弹框

生日选择弹框和城市选择弹框差不多，都是通过观察上一个数据变化来设置自己的数据

一、思路：

一个弹框上建三个compoent，一个年，一个月，一个日。日的数据是根据年和月进行变化的

二、效果图：

三、视频效果：

四、关键源码如下：

// 联系：893151960
@Component
export struct FirstLevelComponent {
  @State labelList: string[] = [];
  @Consume selectFirstIndex: number;
  @Consume currentFirst: string;
  @Consume dataSource: string[];

  aboutToAppear() {
    for (let i = 0; i < this.dataSource.length; i++) {
      this.labelList.push(this.dataSource[i])
      if (this.dataSource[i] === this.currentFirst) {
        this.selectFirstIndex = i;
      }
    }
    this.currentFirst = this.dataSource[this.selectFirstIndex]
  }

  build() {
    Column() {
      Column() {
        if (this.labelList.length === 0) {
          Text('暂无数据').fontSize(20)
        } else {
          TextPicker({ range: this.labelList, selected: this.selectFirstIndex })
            .onChange((value: string|string[], index: number|number[]) => {
              if (typeof index === 'number') {
                this.selectFirstIndex = index
                this.currentFirst = this.dataSource[index]
              }

            })
            .selectedTextStyle({
              color:$r('app.color.color_main')
            })
            .canLoop(false)
        }
      }
      .backgroundColor(Color.White)
      .border({ color: '#e2e2e2', width: { right: 0.5 }
      })
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}

/**
 * @author ：congge
 * @date : 2024-01-24 11:45
 * @desc : 生日选择专用弹框
 **/
@CustomDialog
export default struct BirthdayPickerDialog {
  @Provide currentFirst: string = '';
  @Provide currentSecond: string = '';
  @Provide currentThree: string = '';
  @Provide selectFirstIndex: number = 0;
  //注意; 这位置很可能和数组的位置对不上的，因为它的起点是以为左边选中开始的
  @Provide selectSecondIndex: number = 0;
  controller: CustomDialogController
  title: string = '选择生日' //弹窗的提示文本
  @Provide dataSource: string[] = CommonConstants.YEAR
  @Provide secondOnlyDataSource: string[] = CommonConstants.MONTH

  resultCallback?:(arg0:string,arg1:string,arg2:string) => void

  aboutToAppear() {
    this.currentFirst = this.dataSource[0];
    this.currentSecond = this.secondOnlyDataSource[0];
  }

  build() {
    Column() {
      Text(this.title)
        .fontSize(20)
        .textAlign(TextAlign.Center)
        .margin({ top: 10, bottom: 10 });
      Row() {
        FirstLevelComponent().width('33%');
        // 手动给线
        Divider()
          .vertical(true)
          .color($r('app.color.color_e2'))
          .width(0.5)
        SecondOnlyLevelComponent().width('33%');
        Divider()
          .vertical(true)
          .color($r('app.color.color_e2'))
          .width(0.5)
        DayLevelComponent().width('33%');
      }.height('40%')

      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        Button($r('app.string.cancel'), { type: ButtonType.Normal })
          .onClick(() => {
            this.controller?.close()
          })
          .backgroundColor(0xffffff)
          .fontColor(Color.Black)
          .layoutWeight(1)
          .height('100%')
        Divider()
          .vertical(true)
          .strokeWidth(1)
          .color('#F1F3F5')
          .opacity(1)
          .height('100%')
        Button($r('app.string.sure'), { type: ButtonType.Normal })
          .onClick(() => {
            this.controller?.close()
            this.resultCallback?.(this.currentFirst,this.currentSecond,this.currentThree)
          })
          .backgroundColor(0xffffff)
          .fontColor($r('app.color.color_main'))
          .layoutWeight(1)
          .height('100%')
      }.height(50)
    }
  }
}

五、完整项目demo结构图：

有需要完整源码demo可私信我