鸿蒙Next如何实现自定义toast

在鸿蒙Next开发中，如何实现自定义样式的Toast提示？官方文档提供的默认Toast样式比较单一，如果想修改背景颜色、文字大小、显示位置或添加图标等，应该通过哪些API或方法来实现？能否提供具体的代码示例？

2 回复

鸿蒙Next里自定义Toast？简单！用ToastDialog组件，想怎么玩就怎么玩——改文字、调背景、加动画，甚至塞个图标进去。记住：别让用户等太久，不然Toast就糊了（物理意义和用户体验双重含义）！代码三行起步，创意无限，祝你Toast烤得香喷喷～

更多关于鸿蒙Next如何实现自定义toast的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，自定义Toast可以通过UIExtensionComponent和UIExtensionAbility来实现。以下是具体步骤和示例代码：

1. 创建UIExtensionAbility

在module.json5中注册UIExtensionAbility：

{
  "module": {
    "abilities": [
      {
        "name": "CustomToastAbility",
        "type": "uiExtension",
        "srcEntry": "./ets/CustomToastAbility",
        "exported": true,
        "metadata": [
          {
            "name": "ohos.extension.ui",
            "resource": "$profile:extension_config"
          }
        ]
      }
    ]
  }
}

创建resources/base/profile/extension_config.json：

{
  "name": "CustomToast",
  "icon": "$media:icon",
  "label": "$string:extension_label",
  "description": "$string:extension_description",
  "type": "decorator",
  "readPermission": "",
  "writePermission": "",
  "extensionWindowStyle": {
    "navigationBarHidden": true
  }
}

2. 实现UIExtensionAbility

在ets/CustomToastAbility/CustomToastAbility.ts中：

import { UIExtensionContentSession, Want } from '@kit.ArkUI';

export default class CustomToastAbility extends UIExtensionAbility {
  onSessionCreate(want: Want, session: UIExtensionContentSession) {
    session.loadContent('pages/ToastPage', (err, data) => {
      if (err) {
        console.error('Load content failed.');
        return;
      }
      console.info('Load content successfully.');
    });
  }
}

3. 创建自定义Toast UI

在ets/CustomToastAbility/pages/ToastPage.ets中：

@Entry
@Component
struct ToastPage {
  @State message: string = 'Hello Toast!'

  build() {
    Column() {
      Text(this.message)
        .fontSize(16)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height('80vp')
    .backgroundColor('#CC000000')
    .borderRadius(8)
    .justifyContent(FlexAlign.Center)
  }
}

4. 调用自定义Toast

在需要显示Toast的页面中：

import { UIExtensionContentSession, Want } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private session: UIExtensionContentSession | null = null;

  // 显示Toast
  showCustomToast() {
    let want: Want = {
      bundleName: 'com.example.app',
      abilityName: 'CustomToastAbility',
      parameters: {
        'message': '自定义Toast内容'
      }
    };

    UIExtensionContentSession.create(this.context, want)
      .then((session) => {
        this.session = session;
        // 设置显示时长后自动关闭
        setTimeout(() => {
          this.closeToast();
        }, 2000);
      });
  }

  // 关闭Toast
  closeToast() {
    if (this.session) {
      this.session.close();
      this.session = null;
    }
  }

  build() {
    Column() {
      Button('显示Toast')
        .onClick(() => {
          this.showCustomToast();
        })
    }
  }
}

关键特性：

  • 自定义样式：通过修改ToastPage的布局和样式实现
  • 参数传递：通过Want的parameters传递显示内容
  • 自动关闭：使用setTimeout控制显示时长
  • 窗口样式：通过extensionWindowStyle配置无导航栏

这种方式比系统默认Toast更灵活，可以完全自定义显示内容和样式。

回到顶部