HarmonyOS 手势滑动登录UI实现

参考示例：

import promptAction from '@ohos.promptAction'

let customDialogId: number = 0;
let sliderValue = 0;

@Builder
function customDialogBuilder() {
  Column() {
    Row({ space: 20 }) {
      Text('安全验证')
        .fontSize(26)
        .width('80%')
        .height(60)
        .textAlign(TextAlign.Center)
        .lineHeight(60)
      Image($r('app.media.startIcon'))
        .width(26)
        .height(26)
        .onClick(() => {
          promptAction.closeCustomDialog(customDialogId)
        })
    }
    .margin({ bottom: 16 })

    Stack() {
      Text("请滑到最右端")
        .fontSize(20)
        .onClick(() => {
          promptAction.closeCustomDialog(customDialogId)
        })
      Slider({ style: SliderStyle.InSet, value: sliderValue })
        .trackColor('rgba(40,40,40,0.5)')
        .selectedColor('rgba(200,200,200,1)')
        .trackThickness(66)
        .blockStyle({ type: SliderBlockType.IMAGE, image: $r('app.media.startIcon') })
        .onChange((value: number, mode: SliderChangeMode) => {
          if (value == 100) {
            promptAction.closeCustomDialog(customDialogId)
          }
        })
    }
    .height(90)
    .width('80%')
  }.height(220).padding(5)
}

@Entry
@Component
struct Index {
  @State message: string = '获取验证码'

  build() {
    Row() {
      Column() {
        Button(this.message)
          .fontSize(50)
          .padding(16)
          .onClick(() => {
            promptAction.openCustomDialog({
              builder: customDialogBuilder.bind(this)
            }).then((dialogId: number) => {
              customDialogId = dialogId
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}