HarmonyOS 鸿蒙Next 自定义taost样式，白色文字，黑色半透明背景，文字上下padding20

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义taost样式，白色文字，黑色半透明背景，文字上下padding20

promptAction.showToast({
  message: '\n' + message + '\n',
  duration: 3000,
  textColor: Color.White,
  alignment: Alignment.Center,
  backgroundColor: $r('app.color.maskDark'),
  backgroundBlurStyle: BlurStyle.NONE
})
展示出来并非黑色透明背景，而是白色
Harmonyos Next教程
3 回复

当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。

经过测试，以下代码可以实现黑色透明背景。

promptAction.showToast({
  message: '测试内容一个三',
  duration: 3000,
  textColor: Color.White,
  alignment: Alignment.Center,
  backgroundColor: "#70000000",
  backgroundBlurStyle: BlurStyle.NONE,
})

更多关于HarmonyOS 鸿蒙Next 自定义taost样式，白色文字，黑色半透明背景，文字上下padding20的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


promptAction.showDialog不支持自定义样式。

可以使用CustomDialogController，通过customStyle设置自定义样式，参考文档如下：

[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-methods-custom-dialog-box-V13?catalogVersion=V13](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-methods-custom-dialog-box-V13?catalogVersion=V13)

在HarmonyOS 鸿蒙Next中，自定义Toast样式可以通过XML布局文件和JavaScript代码实现。以下是一个简单的实现方法，用于创建具有白色文字、黑色半透明背景以及文字上下padding为20的Toast。

首先，在resources/base/layout目录下创建一个新的XML布局文件，例如custom_toast.xml，内容如下：

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:orientation="vertical"
    ohos:padding="20vp"
    ohos:background_element="#80000000"> <!-- 黑色半透明背景 -->

    <Text
        ohos:id="$+id:toast_text"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text_color="#FFFFFF"
        ohos:text_size="16fp"
        ohos:padding_top="20vp"
        ohos:padding_bottom="20vp"/>
</DirectionalLayout>

然后，在JavaScript代码中加载并显示这个自定义Toast：

import prompt from '@ohos.prompt';
import bundle from '@ohos.bundle';

function showCustomToast() {
    let context = this.$context;
    let layout = bundle.getLayoutInflater().inflate(context, resource.getId(module, 0x7f040000), null); // 0x7f040000是custom_toast.xml的资源ID
    let toast = new ohos.ui.Toast(context);
    toast.setView(layout);
    toast.show();
}

注意，上述JavaScript代码中的resource.getId部分需要根据实际资源ID进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部