我们继续《HarmonyOS 5.0.0 或以上实战内容》系列——

🧩 Step 1：封装 Toast 组件 GlobalToast.ets

// components/GlobalToast.ets
@Component
export struct GlobalToast {
  @State visible: boolean = false;
  @State message: string = '';

  show(msg: string) {
    this.message = msg;
    this.visible = true;

    setTimeout(() => {
      this.visible = false;
    }, 2000); // 自动2秒后消失
  }

  build() {
    if (!this.visible) return;

    Column() {
      Text(this.message)
        .fontSize(16)
        .padding({ top: 10, bottom: 10, left: 20, right: 20 })
        .backgroundColor('#000000AA')
        .fontColor('#FFFFFF')
        .borderRadius(20)
    }
    .align(Alignment.Center)
    .position({ x: '50%', y: '85%' })
    .translate({ x: -0.5, y: 0 }, Percent)
  }
}

🧩 Step 2：构建 Toast 管理器 toastManager.ts

// common/toastManager.ts
import GlobalToast from '../components/GlobalToast';

let toastRef: GlobalToast | null = null;

export function registerToast(ref: GlobalToast) {
  toastRef = ref;
}

export function showToast(msg: string) {
  toastRef?.show(msg);
}

🧩 Step 3：在首页挂载 Toast 并注册

// pages/home/home.ets
import { registerToast, showToast } from '../../common/toastManager';
import GlobalToast from '../../components/GlobalToast';

@Entry
@Component
struct HomePage {
  @State toastInstance: GlobalToast = new GlobalToast();

  aboutToAppear() {
    registerToast(this.toastInstance);
  }

  build() {
    Column() {
      Button("显示 Toast").onClick(() => {
        showToast("操作成功！");
      })

      this.toastInstance.build()
    }
  }
}

✅ 效果预览

点击按钮后，全局统一风格的 Toast 从底部浮现，2 秒后自动消失。

⚠️ 易错点总结

🧠 拓展建议

• 增加 toast 类型：success/warning/error；

• 支持不同位置展示（顶部、中部、底部）；

• 自定义停留时间和样式统一入口。