HarmonyOS 鸿蒙Next actionsheet弹框样式

//您好，您附件中的样式可以通过自定义弹窗实现，可参考demo @CustomDialog @Component struct CustomDialogExample { controller?: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ textValue: this.textValue }), autoCancel: false }) @State realKeyboardHeight: number = 0 @State offsetY: number = 0 @Link textValue: string windowHeight: number = 0 @State showFlag: Visibility = Visibility.Visible; @State isAutoCancel: boolean = false;

build() { Column {

Text(‘手机号找回’) .textAlign(TextAlign.Center) .width(“100%”) .height(30) .padding({ top:20, bottom:40 })

.border({ width: { left: 0, right: 0, top: 0, bottom: 3 }, color: {left:Color.White, right:Color.White, top: Color.White, bottom:Color.Gray}, style: { bottom: BorderStyle.Solid, } }) Text(‘邮箱找回’) .textAlign(TextAlign.Center) .width(“100%”) .height(30) .padding({ top:20, bottom:40 })

.border({ width: { left: 0, right: 0, top: 0, bottom: 10 }, color: {left:Color.White, right:Color.White, top: Color.White, bottom:Color.Gray}, style: { bottom: BorderStyle.Solid, } }) Text(‘取消’) .textAlign(TextAlign.Center) .width(“100%”) .height(70) .margin({top: 20})

} .width(“100%”) .offset({y: this.offsetY}) .backgroundColor(Color.White) .borderRadius({topLeft: 32, topRight: 32}) } }

@Entry @Component struct CustomDialogTest { @State message: string = ‘HelloWorld’; @State textValue: string = ‘’ @State isAutoCancel: boolean = true; // 是否允许点击遮障层退出 dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ textValue: $textValue, isAutoCancel: this.isAutoCancel }), alignment: DialogAlignment.Bottom, autoCancel: this.isAutoCancel, customStyle: true }) build() { RelativeContainer() { Text(this.message) .id(‘HelloWorld’) .fontSize(50) .fontWeight(FontWeight.Bold) .alignRules({ center: { anchor: ‘container’, align: VerticalAlign.Center }, middle: { anchor: ‘container’, align: HorizontalAlign.Center } }) .onClick(() => { this.dialogController.open() }) } .height(‘100%’) .width(‘100%’) } }