HarmonyOS鸿蒙Next中如何设置Toast居中显示并设置圆角和背景

HarmonyOS鸿蒙Next中如何设置Toast居中显示并设置圆角和背景 看了下Toast API 目前没法设置圆角

3 回复

"目前toast不支持自定义样式，可以考虑使用promptAction.openCustomDialog。（支持与页面解耦，支持自定义圆角、字体大小、颜色、背景等） demo如下： import { BusinessError } from ‘@ohos.base’; import { ComponentContent } from “@ohos.arkui.node”; class Params { text: string = “” constructor(text: string) { this.text = text; } } @Builder function buildText(params: Params) { Column() { Text(params.text).fontSize(50).fontWeight(FontWeight.Bold).margin({ bottom: 36 }) }.backgroundColor(’#FFF0F0F0’).borderRadius(25) } @Entry @Component struct CustomDialog { @State message: string = “弹窗弹窗” build() { Row() { Column() { Button(“click me”).onClick(() => { let uiContext = this.getUIContext(); let promptAction = uiContext.getPromptAction(); let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); try { promptAction.openCustomDialog(contentNode); } catch (error) { let message = (error as BusinessError).message; let code = (error as BusinessError).code; console.error(OpenCustomDialog args error code is ${code}, message is ${message}); } ; }) }.width(‘100%’).height(‘100%’) }.height(‘100%’) } } 参考: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12 感谢您的建议。目前已经收到类似需求场景，已经反馈给研发，后续应该会不断优化相应组件的使用。如有计划，会立刻告知。

更多关于HarmonyOS鸿蒙Next中如何设置Toast居中显示并设置圆角和背景的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，设置Toast居中显示并设置圆角和背景可以通过以下步骤实现：

  1. 创建自定义Toast布局：首先，在resources/base/layout目录下创建一个新的布局文件，例如custom_toast.xml。在这个布局文件中，定义一个<Text>组件用于显示Toast内容，并为其设置圆角和背景。
<Text
    id="toast_text"
    width="match_content"
    height="match_content"
    background_element="$graphic:toast_background"
    corner_radius="10vp"
    text_color="#FFFFFF"
    text_size="16fp"
    padding="10vp"
    layout_gravity="center"/>
  1. 定义背景资源：在resources/base/graphic目录下创建一个新的图形资源文件，例如toast_background.xml。在这个文件中，定义一个<shape>元素，设置背景颜色和圆角。
<shape>
    <solid color="#333333"/>
    <corners radius="10vp"/>
</shape>
  1. 加载自定义布局并显示Toast：在代码中，使用LayoutScatter加载自定义布局，并设置Toast的显示位置和样式。
import UIAbility from '@ohos.app.ability.UIAbility';
import LayoutScatter from '@ohos.layoutScatter';
import Toast from '@ohos.toast';

export default class EntryAbility extends UIAbility {
    onCreate() {
        let toastLayout = LayoutScatter.create(this.context, $r('app.layout.custom_toast'));
        let toastText = toastLayout.findComponentById($r('app.id.toast_text'));
        toastText.text = "这是自定义Toast";

        let toast = new Toast.ShowOptions();
        toast.layout = toastLayout;
        toast.gravity = Gravity.CENTER;
        Toast.show(this.context, toast);
    }
}

通过以上步骤，你可以在HarmonyOS鸿蒙Next中实现Toast的居中显示，并设置圆角和背景。

在HarmonyOS鸿蒙Next中，可以通过自定义Toast组件来实现居中显示、圆角和背景设置。首先，创建一个自定义布局文件，设置圆角和背景；然后，使用Toast的setView方法加载自定义布局；最后，通过setGravity方法设置Toast居中显示。代码示例如下：

// 创建自定义布局
View toastView = LayoutInflater.from(context).inflate(R.layout.custom_toast, null);

// 设置Toast
Toast toast = new Toast(context);
toast.setView(toastView);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.setDuration(Toast.LENGTH_SHORT);
toast.show();

在布局文件中定义圆角和背景：

<LinearLayout
    android:id="@+id/custom_toast_layout"
    android:background="@drawable/toast_background"
    android:padding="16dp">
    <TextView
        android:id="@+id/toast_message"
        android:textColor="#FFFFFF"
        android:textSize="16sp"/>
</LinearLayout>

toast_background.xml定义圆角和背景：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#333333"/>
    <corners android:radius="8dp"/>
</shape>

通过以上步骤，即可实现Toast居中显示并设置圆角和背景。

回到顶部