@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%') } }
鸿蒙 arkTs 下拉筛选,在空间下方
最新推荐文章于 2024-05-17 06:24:57 发布