鸿蒙 arkTs 下拉筛选，在空间下方

@Entry
@Component
struct FilterOptionPage {

  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,

    }),
    customStyle: true, //自定义样式，去掉边距 圆角等
    offset: { dx: 0, dy: 60 }, //控制位置
    alignment: DialogAlignment.Top, // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示
  })
  @State message: string = 'Hello World'

  onCancel() {
    console.info('取消回调')
  }

  onAccept() {
    console.info('确认回调')
  }





  @State listArr: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 89, 89, 55, 22, 15, 16, 36, 45, 85, 777, 888, 999]
  @State showOne:boolean = false;
  build() {
    Row() {
      Flex() {
        Column() {
          Row() {
            Text("option1")
              .backgroundColor(Color.White)
              .backgroundColor(Color.Brown)
              .textAlign(TextAlign.Center)
              .width('33%')
              .height(60)
              .onClick(() => {
                this.showOne=!this.showOne
              })
            Text("option2")
              .backgroundColor(Color.White)
              .backgroundColor(Color.Red)
              .textAlign(TextAlign.Center)
              .width('33%')
              .height(60).onClick(()=>{
              this.dialogController.open()
            })
          Text("option2")
              .backgroundColor(Color.White)
              .backgroundColor(Color.Blue)
              .textAlign(TextAlign.Center)
              .width('33%')
              .height(60)
          }.height(60).width('100%')

          List({ space: 10 }) {
            ForEach(this.listArr, (item, index) => {
              ListItem() {
                Text(item + "")
              }.height(30)
            })
          }.height('100%')

        }
        .height('100%')
      }

      Column() {
        Column(){

        }.backgroundColor(Color.Orange).visibility(this.showOne?Visibility.Visible:Visibility.Hidden).height(400).width('100%')
      }.position({ y: 60 }).backgroundColor(0xA6000000).visibility(this.showOne?Visibility.Visible:Visibility.Hidden).height('100%').
      width('100%').
      animation({duration:2000})

    }
  }
}

@CustomDialog
export struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void

  aboutToAppear(){
    console.log("CustomDialogExample  aboutToAppear----")
  }


  build() {
    Column() {
      Text('内容').margin(10)
        .fontSize(20)
      Flex({
        justifyContent: FlexAlign.SpaceAround
      }) {

      }
      .margin({
      }).width('100%').height(300).backgroundColor(Color.Orange)
    }.width('100%')
  }
}