鸿蒙移动端常用UI——alert自定义弹窗、时间选择器、文本选择

alert自定义弹窗效果图

image.png

文本滑动选择器效果图

image.png

日期选择器

image.png

时间选择器

image.png

全部代码

import { BSButton, BSText, BSTextInput } from '../../../components/BSUI'
import { AppBarWidget } from './AppBarWidget'

@Entry
@Component
struct AlertPickerPage {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController = new CustomDialogController({
    builder: BaseInputTextAlert({
      cancel: this.onCancel,
      confirm: this.onAccept,
      textValue: $textValue,
      inputValue: $inputValue
    }),
    //点击遮障层退出时的回调。
    cancel: this.existApp,
    //是否允许点击遮障层退出。
    autoCancel: false,
    customStyle: true,
    //弹窗在竖直方向上的对齐方式。
    alignment:DialogAlignment.Center
  });
  @State select: number = 2
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
  selectedDate: Date = new Date("2010-1-1")
  private selectTime: Date = new Date('2020-12-25T08:30:00')

  aboutToDisappear() {
    delete this.dialogController,
    this.dialogController = undefined
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  existApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column({space:12}) {
      AppBarWidget({title:'AlertPickerPage'});
      BSButton({title:'自定义弹窗'})
        .height(44)
        .onClick(() => {
          if (this.dialogController != undefined) {
            this.dialogController.open()
          }
        });

      //全局UI方法——文本滑动选择器
      BSButton({title:'文本滑动选择器'})
        .height(40)
        .onClick(() => {
          TextPickerDialog.show({
            range: this.fruits,
            selected: this.select,
            onAccept: (value: TextPickerResult) => {
              // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
              this.select = value.index
              console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TextPickerDialog:onCancel()")
            },
            onChange: (value: TextPickerResult) => {
              console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        }).margin({bottom:20})
      BSButton({title:'日期'})
        .height(40)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            onAccept: (value: DatePickerResult) => {
              // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
              this.selectedDate.setFullYear(value.year, value.month, value.day)
              console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("DatePickerDialog:onCancel()")
            },
            onChange: (value: DatePickerResult) => {
              console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        }).margin({bottom:20})

      BSButton({title:'时间选择器'})
        .height(40)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.selectTime,
            useMilitaryTime: true,
            onAccept: (value: TimePickerResult) => {
              this.selectTime.setHours(value.hour, value.minute)
              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()")
            },
            onChange: (value: TimePickerResult) => {
              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        }).margin({bottom:20})

    }.width('100%').margin({ top: 5 })
  }
}

@CustomDialog
struct BaseInputTextAlert {
  @Link textValue: string
  @Link inputValue: string
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void

  build() {
    Column() {
      Blank(20)
      BSText({title:'请输入姓名',fontColor:'#333333',fontSize:15})
      Blank(12)
      BSTextInput({
        text:this.textValue,
        placeholder:'请输入姓名...',
        onChange:(value: string)=>{
          this.textValue = value
        }
      }).height(40).width('90%')
      Blank(12)
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        BSButton({title:'取消',bgColor:Color.White,fontColor:Color.Black})
          .height(50)
          .onClick(()=>{
            this.controller.close()
            this.cancel()
          })
          .clip(true).borderRadius({bottomLeft:8})
        Divider().vertical(true).strokeWidth(2).height(40)
        BSButton({title:'确认',bgColor:Color.Red,fontColor:Color.White})
          .height(50)
          .onClick(() => {
            this.inputValue = this.textValue
            this.controller.close()
            this.confirm()
          })
          .clip(true).borderRadius({bottomRight:8})
      }
    }.backgroundColor(Color.White).borderRadius(8).margin(20)
  }
}

ps:
1、BS开头的API是为了方便开发和维护，对鸿蒙UI做了一层简单的封装，并且会陆续进行更新.
2、基于API Version9版本.
3、如果您觉得我的内容对您有帮助，欢迎点赞哦！👍谢谢啦～