✅ Dialog 自定义弹窗

@State isDialogOpen: boolean = false

// 弹窗内容
if (this.isDialogOpen) {
  Dialog({
    alignment: Alignment.Center, // 弹窗位置
    offset: { x: 0, y: 0 }, // 偏移位置
    customStyle: true, // 是否使用自定义样式（否则为系统样式）
    maskColor: 'rgba(0, 0, 0, 0.5)', // 遮罩层颜色
    autoCancel: true, // 点击遮罩是否关闭
    onCancel: () => { this.isDialogOpen = false } // 关闭时触发
  }) {
    Column()
      .width(280)
      .padding(20)
      .backgroundColor('#FFFFFF')
      .borderRadius(12) {
        Text('自定义弹窗')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .margin({ bottom: 12 })
        Text('这是自定义弹窗内容')
          .fontSize(14)
          .margin({ bottom: 20 })
        Button('关闭')
          .type(ButtonType.Normal)
          .onClick(() => { this.isDialogOpen = false })
      }
  }
}

// 打开按钮
Button('打开 Dialog').onClick(() => {
  this.isDialogOpen = true
})

✅ Popup 弹出层（悬浮浮层）

@State isPopupVisible: boolean = false

Popup({
  show: this.isPopupVisible,
  placement: Placement.Bottom, // 出现位置（Top、Bottom、Left、Right）
  mask: true, // 是否显示遮罩
  maskColor: 'rgba(0, 0, 0, 0.3)', // 遮罩颜色
  onStateChange: (val) => { this.isPopupVisible = val }, // 弹窗开关状态
  popupColor: '#FFFFFF', // 内容背景颜色
}) {
  Text('这是一个底部弹出层')
    .padding(20)
    .width('100%')
    .backgroundColor('#FFFFFF')
    .borderRadius(10)
}

// 控制按钮
Button('显示 Popup').onClick(() => {
  this.isPopupVisible = true
})

✅ AlertDialog 系统样式提示框

@State showAlert: boolean = false

if (this.showAlert) {
  AlertDialog.show({
    title: '提示标题',
    message: '这是提示内容，支持自动换行展示。',
    confirm: {
      value: '确定',
      action: () => {
        console.log('点击确定')
        this.showAlert = false
      }
    },
    cancel: {
      value: '取消',
      action: () => {
        console.log('点击取消')
        this.showAlert = false
      }
    },
    alignment: DialogAlignment.Center, // 弹窗对齐方式
    offset: { x: 0, y: 0 },
    autoCancel: true, // 是否允许点击遮罩关闭
    maskColor: 'rgba(0,0,0,0.5)',
  })
}

// 触发按钮
Button('显示 AlertDialog').onClick(() => {
  this.showAlert = true
})

✅ Toast 轻提示

// 显示文字提示
Toast.show({
  message: '操作成功', // 提示文字
  duration: 2000, // 显示时长（毫秒）
  alignment: Alignment.Bottom, // 显示位置
  offset: { x: 0, y: -50 }, // 偏移量（一般用于向上偏移）
  textStyle: {
    fontSize: 14,
    fontColor: '#FFFFFF'
  },
  backgroundColor: 'rgba(0, 0, 0, 0.8)', // 背景颜色
  borderRadius: 8
})

✅ ActionSheet 操作面板（底部弹出）

@State showSheet: boolean = false

if (this.showSheet) {
  ActionSheet.show({
    title: '请选择操作',
    message: '支持多个选项操作',
    confirm: {
      value: '取消',
      action: () => {
        console.log('点击取消')
        this.showSheet = false
      }
    },
    actions: [
      {
        value: '编辑',
        action: () => {
          console.log('点击编辑')
          this.showSheet = false
        }
      },
      {
        value: '删除',
        action: () => {
          console.log('点击删除')
          this.showSheet = false
        },
        isDestructive: true // 标记为危险操作（红色显示）
      }
    ],
    autoCancel: true,
    maskColor: 'rgba(0, 0, 0, 0.4)',
  })
}

// 控制按钮
Button('打开 ActionSheet').onClick(() => {
  this.showSheet = true
})