Harmony 打印吐司弹窗

打印

console.info("在控制台打印log")

hilog.info(0, "Tag", `${message}`)

处理 info 还有其它级别对应的方法

吐司

import { promptAction } from '@kit.ArkUI';

promptAction.showToast({
  message: "弹出一个吐司"
})
// 另外可设置 duration bottom（设置与底部的距离） textColor 等

  @State isShowPopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.isShowPopup = !this.isShowPopup
        })
      Text("这是一个 Popup 绑定的组件")
        .bindPopup(this.isShowPopup, { // 绑定一个组件
          message: 'This is a popup with PopupOptions',
          onWillDismiss: () => { // 当消失时执行
            this.isShowPopup = false // 重置控制变量
          }
        })
    }
  }

弹窗

名称	使用场景
AlertDialog	通常用来展示用户当前需要或必须关注的信息或操作。如用户操作一个敏感行为时响应一个二次确认的弹窗。
ActionSheet	当需要用户关注或确认的信息存在列表选择时使用。
CustomDialog	当用户需要自定义弹窗内的组件和内容时使用。
Popup	用于为指定的组件做信息提示。如点击一个问号图标弹出一段气泡提示。
Menu/ContextMenu	用于给指定的组件绑定用户可执行的操作，如长按图标展示操作选项等。

AlertDialog 示例：

      Button("弹窗 AlertDialog")
        .onClick(() => {
          // 在点击事件里弹窗
		  
          AlertDialog.show(
            {
              title: '这是title',
              // subtitle: 'subtitle',
              message: '这是text 这是text 这是text',
              autoCancel: true, // 点击外部取消
              alignment: DialogAlignment.Center,
              gridCount: 3, // 可控制弹窗宽度
              // offset: { dx: 0, dy: -20 },
              cancel: () => { // 点击外部取消 和 返回键取消 的回调
                promptAction.showToast({
                  message: "弹窗取消"
                })
              },
              primaryButton: {
                value: '取消',
                // style: DialogButtonStyle.DEFAULT,
                fontColor: Color.Gray,
                action: () => {
                  promptAction.showToast({
                    message: "取消 is clicked"
                  })
                }
              },
              secondaryButton: {
                // enabled: true,
                // defaultFocus: true,
                // style: DialogButtonStyle.HIGHLIGHT,
                value: '确定',
                action: () => {
                  promptAction.showToast({
                    message: "确定 is clicked"
                  })
                }
              }
            }
          )

        })

CustomDialog 示例：

// 定义
@CustomDialog
export struct MyCustomDialog {
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomDialog({}),
  })

  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 20, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(Color.White).fontColor(Color.Black)
        Button('确定')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(Color.White).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }.backgroundColor(Color.White)
  }
}

// 使用
@Component
struct MyComponent {
  dialogController = new CustomDialogController({
    builder: MyCustomDialog({
      cancel: () => {
        promptAction.showToast({
          message: "cancel"
        })
      },
      confirm: () => {
        promptAction.showToast({
          message: "confirm"
        })
      },
    }),
    // gridCount 等其它属性 更默认弹窗差不多
    gridCount: 3,
    backgroundColor: Color.Gray,
    cancel: () => {
      promptAction.showToast({
        message: "cancel"
      })
    },
  })

  build() {
    Button("自定义弹窗 CustomDialog")
        .onClick(() => {
          this.dialogController.open()
        })
  }
}

不依赖 UI 组件的弹窗

Harmony 打印 吐司 弹窗

打印

吐司

Popup

弹窗

Harmony 打印吐司弹窗