跟着cc一起学鸿蒙开发19-弹窗与菜单

@Entry@Componentstruct AlertDemo {  @State count: number = 0  build() {    Column() {      Text(`当前数量：${this.count}`).fontSize(20).margin(20)      Button('删除一项')        .onClick(() => {          AlertDialog.show({            title: '确认删除',            subtitle: '此操作不可恢复',            // API 11+ 支持副标题            message: '删除后数据将无法找回，确定吗？',            autoCancel: true,                      // 点遮罩/返回键能否关闭            alignment: DialogAlignment.Center,            primaryButton: {              value: '取消',              action: () => {                console.log('用户取消了')              }            },            secondaryButton: {              value: '删除',              fontColor: '#E8380D',               // 危险操作标红              action: () => {                this.count += 1                console.log('用户确认删除')              }            }          })        })    }    .width('100%')    .height('100%')    .justifyContent(FlexAlign.Center)  }}

// 更短的"确定"弹窗AlertDialog.show({  message: '保存成功',  confirm: {    value: '好的',    action: () => {}  }})

AlertDialog.show({  title: '退出编辑',  message: '有内容未保存',  autoCancel: true,  primaryButton: { value: '继续编辑', action: () => {} },  secondaryButton: { value: '仍要退出', action: () => {} },  onWillDismiss: (action: DismissDialogAction) => {    // reason 可能是：PRESS_BACK（系统返回）/ TOUCH_OUTSIDE（点遮罩）/ CLOSE_BUTTON / ENTER    if(action.reason === DismissReason.PRESS_BACK) {      // 想拦就拦：不调 action.dismiss() 就不关；想放行就调一下      action.dismiss()    }  }})

Button('分享')  .onClick(() => {    ActionSheet.show({      title: '分享到',      message: '选择分享方式',      autoCancel: true,      confirm: {        value: '取消',        action: () => {}      },      cancel: () => {        console.log('用户点了取消/遮罩')      },      sheets: [        {          title: '微信好友',          action: () => { console.log('分享到微信') }        },        {          title: '朋友圈',          action: () => { console.log('分享到朋友圈') }        },        {          title: '复制链接',          action: () => { console.log('已复制') }        }      ]    })  })

// 1）先写弹窗组件，@CustomDialog 装饰@CustomDialogstruct TipDialog {  // 控制器由框架自动注入，弹窗里声明即可，关闭时直接用  controller?: CustomDialogController  build() {    Column() {      Text('这是一个自定义弹窗')        .fontSize(20)        .margin({ bottom: 16 })      Button('关闭')        .onClick(() => {          this.controller?.close()   // 关弹窗        })    }    .padding(24)    .backgroundColor(Color.White)    .borderRadius(12)  }}// 2）页面里 new 一个 Controller，挂上 builder@Entry@Componentstruct CustomDemo {  // ★ Controller 是普通属性，不要加 @State（官方不推荐放 @State）  dialogController: CustomDialogController = new CustomDialogController({    builder: TipDialog(),         // 指向上面的弹窗组件    alignment: DialogAlignment.Center,    autoCancel: true,             // 点遮罩关闭    maskColor: 'rgba(0,0,0,0.4)',  // 遮罩颜色    offset: { dx: 0, dy: 0 }  })  build() {    Column() {      Button('打开弹窗')        .onClick(() => {          this.dialogController.open()   // 开弹窗        })    }    .width('100%')    .height('100%')    .justifyContent(FlexAlign.Center)  }}

@CustomDialogstruct TipDialog {  controller?: CustomDialogController  msg: string = ''   // 接页面传进来的值（普通属性，由 builder 传入）  build() {    Column() {      Text(this.msg).fontSize(18).margin({ bottom: 16 })      Button('关闭').onClick(() => this.controller?.close())    }    .padding(24)  }}@Entry@Componentstruct CustomDemo2 {  @State tip: string = '你有一条新消息'  dialogController!: CustomDialogController  aboutToAppear() {    // 关键：在 aboutToAppear 里用最新状态重建 controller 的 builder    this.dialogController = new CustomDialogController({      builder: TipDialog({ msg: this.tip }),      alignment: DialogAlignment.Center    })  }  build() {    Column() {      Button('打开弹窗').onClick(() => this.dialogController.open())    }    .width('100%').height('100%').justifyContent(FlexAlign.Center)  }}

@CustomDialogstruct InputDialog {  controller?: CustomDialogController  @State text: string = ''  onConfirm?: (value: string) => void   // 回调属性  build() {    Column() {      TextInput({ placeholder: '请输入', text: this.text })        .onChange((v) => { this.text = v })      Button('确定')        .margin({ top: 12 })        .onClick(() => {          this.onConfirm?.(this.text)   // 把结果抛回页面          this.controller?.close()        })    }    .padding(24)  }}@Entry@Componentstruct PageA {  @State result: string = ''  dialogController!: CustomDialogController  aboutToAppear() {    this.dialogController = new CustomDialogController({      builder: InputDialog({        onConfirm: (v: string) => { this.result = v }   // 接回结果      })    })  }  build() {    Column() {      Text(`结果：${this.result}`).fontSize(18).margin(16)      Button('输入点东西').onClick(() => this.dialogController.open())    }    .width('100%').height('100%').justifyContent(FlexAlign.Center)  }}

@CustomDialogstruct LinkDialog {  controller?: CustomDialogController  value: string = ''                  // 普通属性收初始值  onChange?: (v: string) => void      // 回调：把每次变化抛回页面  build() {    Column() {      TextInput({ text: this.value })        .onChange((v) => {          this.value = v          this.onChange?.(v)           // 本地显示 + 实时通知页面        })      Button('关闭').onClick(() => this.controller?.close())    }    .padding(24)  }}// 页面@Entry@Componentstruct PageB {  @State name: string = 'cc'  dialogController: CustomDialogController = new CustomDialogController({    builder: LinkDialog({      value: this.name,                              // 初始值      onChange: (v: string) => { this.name = v }     // 弹窗里改 → 页面 name 实时同步    })  })  build() {    Column() {      Text(`结果：${this.name}`).fontSize(18).margin(16)      Button('输入点东西').onClick(() => this.dialogController.open())    }    .width('100%').height('100%').justifyContent(FlexAlign.Center)  }}

this.dialogController = new CustomDialogController({  builder: MyDialog(),  alignment: DialogAlignment.Bottom,   // 贴底部（做底部抽屉/选择器常用）  offset: { dx: 0, dy: 0 },  customStyle: true,                    // true = 去掉默认卡片白底，自己完全控制布局  gridCount: 4,                         // 弹窗宽度占几格（默认按栅格）  maskColor: 'rgba(0,0,0,0.3)'})

@Entry@Componentstruct PopupDemo {  @State showTip: boolean = false  build() {    Column() {      Button('点我')        .onClick(() => { this.showTip = !this.showTip })        // 第一个参数是"是否显示"，true 就冒出来        .bindPopup(this.showTip, {          message: '这是一条气泡提示',     // 纯文字气泡          placement: Placement.Bottom,    // 相对于按钮的位置          showInSubWindow: false,          onStateChange: (e) => {            // e.isVisible 变化时回调，可同步本组件的 showTip 状态            if (!e.isVisible) { this.showTip = false }          }        })    }    .width('100%').height('100%').justifyContent(FlexAlign.Center)  }}

@BuilderpopupBuilder() {  Column() {    Text('自定义气泡').fontSize(14)    Button('知道了').onClick(() => { this.showTip = false })  }  .padding(12)  .backgroundColor(Color.White)  .borderRadius(8)}// 使用.bindPopup(this.showTip, {  builder: this.popupBuilder,  placement: Placement.Top,  mask: true,                  // 是否带遮罩  onStateChange: (e) => { if (!e.isVisible) this.showTip = false }})

@Entry@Componentstruct MenuDemo {  @State showMenu: boolean = false  build() {    Column() {      Button('⋯')        .bindMenu(          this.showMenu,          [            { value: '复制', action: () => { console.log('复制') } },            { value: '转发', action: () => { console.log('转发') } },            {              value: '删除',              action: () => { console.log('删除') }            }          ],          {                                   // ③ MenuOptions 对象（不是裸回调）            onDisappear: () => { this.showMenu = false }  // 菜单消失时把状态重置回 false          }        )        .onClick(() => { this.showMenu = true })   // 点按钮=显示    }    .width('100%').height('100%').justifyContent(FlexAlign.Center)  }}

@Entry@Componentstruct ContextMenuDemo {  @Builder  ctxMenuBuilder() {    Menu() {      MenuItem({ startIcon: $r('app.media.startIcon'), content: '复制', labelInfo: 'Ctrl+C' })        .onClick(() => { console.log('复制') })      MenuItem({ content: '粘贴' })        .onClick(() => { console.log('粘贴') })      // 分组      MenuItemGroup({ header: '更多' }) {        MenuItem({ content: '转发' }).onClick(() => {})        MenuItem({ content: '收藏' }).onClick(() => {})      }    }  }  build() {    Column() {      Text('长按我试试')        .fontSize(20)        .padding(20)        .bindContextMenu(          this.ctxMenuBuilder,        // ① content：直接传 @Builder（不是 boolean）          ResponseType.LongPress,     // ② responseType：长按触发（也可 ResponseType.RightClick 右键）          {          }        )    }    .width('100%').height('100%').justifyContent(FlexAlign.Center)  }}

// 日期选择DatePickerDialog.show({  start: new Date('2000-01-01'),  end: new Date('2100-12-31'),  selected: new Date(),  onAccept: (value: DatePickerResult) => {    console.log(`选了：${value.year}-${value.month+1}-${value.day}`)  },  onCancel: () => {},  onChange: (value: DatePickerResult) => {}})// 时间选择TimePickerDialog.show({  selected: new Date(),  onAccept: (value: TimePickerResult) => {    console.log(`选了：${value.hour}:${value.minute}`)  },  onCancel: () => {}})// 文本选择（比如选城市）TextPickerDialog.show({  range: ['北京', '上海', '广州', '深圳'],  selected: 0,  onAccept: (value: TextPickerResult) => {    console.log(`选了：${value.value}`)  },  onCancel: () => {}})