【学习笔记】HarmonyOS 鸿蒙Next 自定义一个全局调用的toast函数组件

【学习笔记】HarmonyOS 鸿蒙Next 自定义一个全局调用的toast函数组件

使用方式

import引入

import { showToast } from '../../../components/Loading';

传入字符转2s后自动消失

showToast(err || '登录失败,请重试')

不自动消失

const toast = showToast({
      message: '登陆中...',
      duration: 0,
    })
// 手动关闭
toast.hide()

关闭所有

import { clearToast } from '../../../components/Loading';
clearToast()

全部代码如下

import { ComponentContent, PromptAction, promptAction, window } from "@kit.ArkUI"
import { JSON } from "@kit.ArkTS";
import { ObjectAssign } from "../utils/common";

export enum TypeEnum {
  LOADING = 'loading',
  TEXT = 'text'
}

export enum ToastAlignment {
  CENTER = 0,
  TOP = 1,
  BOTTOM = 2
}

interface ToastModel {
  message?: string
  type?: TypeEnum
  duration?: number
  alignment?: ToastAlignment
}

@Builder
function loadingBuilder(params: ToastModel) {
  Column() {
    if (params.type === TypeEnum.LOADING) {
      LoadingProgress()
        .color(Color.White)
        .width(50)
        .margin({ bottom: 5 })
    }
    Text(params.message)
      .fontColor(Color.White)
      .fontSize(16)
      .constraintSize({ maxWidth: '75%' })
      .maxLines(params.type === TypeEnum.LOADING ? 1 : null)
      .textOverflow({ overflow: params.type === TypeEnum.LOADING ? TextOverflow.Ellipsis : TextOverflow.None })
  }
  .padding(params.type === TypeEnum.LOADING ? {
    top: 10,
    bottom: 15,
    left: 25,
    right: 25
  } : {
    top: 8,
    bottom: 8,
    left: 10,
    right: 10
  })
  .offset({
    y: params.alignment === ToastAlignment.CENTER ? '0' : params.alignment === ToastAlignment.TOP ? '-30%' : '30%'
  })
  .backgroundColor('rgba(0,0,0,0.8)')
  .borderRadius(5)
  .clip(true)
}

let dialogIds: Array<ComponentContent<ESObject> | null] = []

class toast {
  loading: ComponentContent<ESObject> | null = null
  promptAction: PromptAction | null = null;

  show(params: ToastModel) {
    window.getLastWindow(getContext()).then(windowClass => {
      const uiContext = windowClass.getUIContext()
      this.loading = new ComponentContent(uiContext, wrapBuilder(loadingBuilder), params);
      this.promptAction = uiContext.getPromptAction()
      this.promptAction.openCustomDialog(this.loading,
        {
          alignment: DialogAlignment.Center,
          isModal: true,
          autoCancel: false
        }
      )
      dialogIds.push(this.loading)
    })

    if (params.duration !== 0) {
      const timer = setTimeout(() => {
        clearTimeout(timer)
        this.hide()
      }, params.duration)
    }

    return this
  }

  hide() {
    this.promptAction?.closeCustomDialog(this.loading)
      .then(() => {
        this.loading?.dispose()
      })
    dialogIds = dialogIds.filter(item => item !== this.loading)
  }

  clear() {
    try {
      for (let index = 0; index < dialogIds.length; index++) {
        const dialog: ESObject = dialogIds[index];
        this.promptAction?.closeCustomDialog(dialog)
      }
      dialogIds = []
    } catch (err) {
      return
    }
  }
}

const newToast = new toast()

/**
 * Toast 轻提示
 * @param params = string 入参为字符串则是提示文本
 * params = ToastModel
 * @param message 提示文本
 * @param type 提示类型 TypeEnum.LOADING 带有加载图标 TypeEnum.TEXT 纯文本
 * @param duration 显示时长 0表示不主动关闭
 */
export const showToast = (params?: ToastModel | string): toast => {
  let newParams: ToastModel = {
    message: 'loading...',
    type: TypeEnum.LOADING,
    duration: 2000,
    alignment: ToastAlignment.CENTER
  }
  if (typeof params === 'string') {
    newParams.message = params
    newParams.type = TypeEnum.TEXT
  } else if (params) {
    newParams = ObjectAssign(newParams as ESObject, params)
  }
  return newToast.show(newParams)
}

/**
 * 关闭所有提示弹窗
 */
export const clearToast = (): void => newToast.clear()