通过自定义弹窗实现自定义样式的Toast

问题现象
HarmonyOS的Toast接口，不支持设定圆角样式。如何实现类似其他平台的Toast样式？

效果预览
点击放大

背景知识
不依赖UI组件的全局自定义弹出框(openCustomDialog)，适用于在相对应用复杂的场景来实现自定义弹出框，相较于CustomDialogController优势点在于页面解耦，支持动态刷新。
ArkUI提供轻量的UI元素复用机制@Builder，其内部UI结构固定，仅与使用方进行数据传递。可将重复使用的UI元素抽象成函数，在build函数中调用。
Text组件可以自定义展示文本框的UI样式，包括边框圆角、内边距等。
setTimeout接口支持设置一个定时器，该定时器在定时器到期后执行一个函数。
解决方案
如果需要实现类似其他平台的Toast样式，可借助自定义弹窗实现。

主要实现思路为，借助Text组件自定义类似其他平台Toast的UI样式，并封装为@Builder构建函数，将该函数传入ComponentContent创建弹窗对象，通过getUIContext开启该弹窗对象，开启后执行setTimeout，等待指定的时间后，执行关闭弹窗对象。详细步骤如下：

配置ToastContent组件属性并封装为@Builder构建函数。
@Component
struct ToastContent {
public text: string = '';
public clickText: string = '';
public clickListener = () => {
};
private textList: string[] = [];

aboutToAppear(): void {
if (this.clickText.length > 0) {
this.textList = this.text.split(this.clickText);
}
}

build() {
Column() {
if (this.clickText === '') {
Text(this.text).toastText();
} else {
Text() {
ForEach(this.textList, (item: string, num: number) => {
Span(item);
if (num < this.textList.length - 1) {
Span(this.clickText).fontColor(Color.Yellow);
}
});
}.onClick(this.clickListener).toastText();
}
}
.borderRadius(5)
.backgroundColor(Color.Black)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
.margin({ left: '5%', right: '5%' });
}
}

// 封装Toast的@Builder方法
@Builder
function buildText(params: Params) {
ToastContent({ text: params.text, clickText: params.clickText, clickListener: params.clickListener });
}

// 封装公共样式
@Extend(Text)
function toastText() {
.fontSize(20)
.fontColor(Color.White);
}
创建Toast类，并创建构造方法与Toast实例方法。
/**

• 封装全局蓝色浮动提示，支持点击
  */
  export class Toast {
  private toastParams: Params;

  constructor(text: string, time: number = 2000) {
  this.toastParams = new Params(text, time);
  }

  setClick(clickText: string, clickListener: () => void): Toast {
  this.toastParams.setClick(clickText, clickListener);
  return this;
  };

  async show() {
  let uiContext = AppStorage.get('currentUIContext') as UIContext;
  let click = this.toastParams.clickListener;
  let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), this.toastParams);
  uiContext.getPromptAction().openCustomDialog(contentNode, {
  showInSubWindow: this.toastParams.clickText === '' ? false : true,
  isModal: false,
  offset: { dx: 0, dy: '10%' }
  }).then(() => {
  setTimeout(() => {
  uiContext.getPromptAction().closeCustomDialog(contentNode);
  }, this.toastParams.time);
  });
  this.toastParams.clickListener = () => {
  click();
  uiContext.getPromptAction().closeCustomDialog(contentNode);
  };
  };
  }
  创建并弹出Toast，并且可以在Toast的setClick回调方法内实现点击Toast后的逻辑，如页面跳转。
  new Toast('点击Toast后屏幕将退出横屏，进入到竖屏状态', 3000).setClick('关闭自动添加', () => {
  this.windowClass.setPreferredOrientation(window.Orientation.PORTRAIT);
  this.pathStack.pushPathByName('DetailPage', null);
  }).show();
  完整示例参考如下：

Index.ets。
import { common } from '@kit.AbilityKit';
import { Toast } from './ToastContent';
import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
pathStack: NavPathStack = new NavPathStack();
private context = this.getUIContext().getHostContext() as common.UIAbilityContext;
private windowClass = (this.context as common.UIAbilityContext).windowStage.getMainWindowSync();

setOrientation(orientation: number) {
this.windowClass.setPreferredOrientation(orientation).then(() => {
}).catch(() => {
});
}

async aboutToAppear(): Promise<void> {
await this.windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE);
AppStorage.setOrCreate('currentUIContext', this.getUIContext());
}

build() {
Navigation(this.pathStack) {
RelativeContainer() {
Column() {
Text('我的记录')
.fontSize(50)
.width('100%')
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
Button('保存')
.onClick(() => {
new Toast('点击Toast后屏幕将退出横屏，进入到竖屏状态', 3000).setClick('关闭自动添加', () => {
this.windowClass.setPreferredOrientation(window.Orientation.PORTRAIT);
this.pathStack.pushPathByName('DetailPage', null);
}).show();
})
.backgroundColor(Color.Blue)
.fontColor(Color.White)
}
.alignRules({
center: { anchor: 'container', align: VerticalAlign.Center },
middle: { anchor: 'container', align: HorizontalAlign.Center }
})
}
.width('100%')
}
.mode(NavigationMode.Stack)
.height('100%')
.width('100%')
.height('100%')
.hideTitleBar(true)
}
}
https://pastebin.com/nwKPmmLF
https://pastebin.com/DwxhFWzG
https://pastebin.com/Jtg4RcM0
https://pastebin.com/7BvUaREN
https://pastebin.com/LGejrMwK
https://pastebin.com/V0qPwT9h
https://pastebin.com/tQzSevWd
https://pastebin.com/qncxPzug
https://pastebin.com/QNF651jK
https://pastebin.com/t3ZuR3CR
https://pastebin.com/H2PDqsEW
https://pastebin.com/Z7Wc9nic
https://pastebin.com/ECKtGAaJ
https://pastebin.com/EwXrd6qT
https://pastebin.com/HgYXSSrk
https://pastebin.com/uK3jyvu5
https://pastebin.com/vHzZdj9J
https://pastebin.com/sAMfi1Pz
https://pastebin.com/kVhLAgHT
https://pastebin.com/nkBEKJz4
https://pastebin.com/GrAvgxVg
https://pastebin.com/Umn0eUXt
https://pastebin.com/ut2dn5iH
https://pastebin.com/NgPFqHpy
https://pastebin.com/7e62WCL1
https://pastebin.com/wDM3tM66
https://pastebin.com/pwUhGKDv
https://pastebin.com/YvwB4xBj
https://pastebin.com/mzAxKZES
https://pastebin.com/NpnmdKf1
https://pastebin.com/C1FBURkc
https://pastebin.com/y0KsuZgB
https://pastebin.com/g7nDScSb
https://pastebin.com/7mDcGwtR
https://pastebin.com/3xV61sHt
https://pastebin.com/iQakPefn
https://pastebin.com/0CWW1Xta
https://pastebin.com/90zmcK10
https://pastebin.com/6CH0bCbh
https://pastebin.com/b6zdrzYw
https://pastebin.com/414XDcCa
https://pastebin.com/Mf0rTkWN
https://pastebin.com/gT4iprCN
https://pastebin.com/qeDfQegQ
https://pastebin.com/1e4vRx0y
https://pastebin.com/kGZUceQg
https://pastebin.com/9ustBt9n
https://pastebin.com/N4kwVZns
https://pastebin.com/qkBjMdA7
https://pastebin.com/w6XX4ciC
https://pastebin.com/54cBU8ze
https://pastebin.com/1mnAuUDZ
https://pastebin.com/VsgcjvTE
https://pastebin.com/wP31PyVb
https://pastebin.com/XPBk0zv8
https://pastebin.com/QRE1qguw
https://pastebin.com/iQpMss7p
https://pastebin.com/kKCXTdF9
https://pastebin.com/EwBniqXp
https://pastebin.com/A7LEwGq8
https://pastebin.com/XtXPS80z
https://pastebin.com/ghHSfqUZ
https://pastebin.com/pEH2u4Mj
https://pastebin.com/GiE2VShc
https://pastebin.com/NmfaPSX3
https://pastebin.com/fBfZs9d9
https://pastebin.com/CcHrZqng
https://pastebin.com/DcALJUNr
https://pastebin.com/hvGqEU4c
https://pastebin.com/HSf8h6BJ
https://pastebin.com/SCNykcCB
https://pastebin.com/RAnMDpBN
https://pastebin.com/0bbYFAG1
https://pastebin.com/6LjMvDuD
https://pastebin.com/u8dUE6wL
https://pastebin.com/8jVE6YLs
https://pastebin.com/xv6kzZyF
https://pastebin.com/L5WMJb5t
https://pastebin.com/sbe7FFD4
https://pastebin.com/aU4YUWDr
https://pastebin.com/3Z1YFmFW
https://pastebin.com/XvqqwSxq
https://pastebin.com/mJX0WRsc
https://pastebin.com/SGkjCXRB
https://pastebin.com/zv8zAxMd
https://pastebin.com/4bRTkCkm
https://pastebin.com/5s9JtWfS
https://pastebin.com/4VVU6Cxg
https://pastebin.com/TewUpi9F
https://pastebin.com/LKZwmBSi
https://pastebin.com/mu27p7w7
https://pastebin.com/JtiF4S2E
https://pastebin.com/xpeq692Q
https://pastebin.com/ypMqWqLC
https://pastebin.com/NrF7S04d
https://pastebin.com/j3riqEAh
https://pastebin.com/6iWCgpuJ
https://pastebin.com/s6KVgTgr
https://pastebin.com/1760APmp
https://pastebin.com/T6LTqjHK
https://pastebin.com/ttGrUAd7
https://pastebin.com/0PQTrPXK
https://pastebin.com/ZtmvtT35
https://pastebin.com/8TjBbUcR
https://pastebin.com/bYCv91Zb
https://pastebin.com/fpZrFF5w
https://pastebin.com/nrXWRsTd
https://pastebin.com/p4UWmpHz
https://pastebin.com/FUkFJhvg
https://pastebin.com/iBPFDUJ3
https://pastebin.com/ET0iD33D
https://pastebin.com/iwPwXsca
https://pastebin.com/8mmzg8p6
https://pastebin.com/8342WqK5
https://pastebin.com/pwYYMgbq
https://pastebin.com/cRgWPHH1
https://pastebin.com/rzyEfV9J
https://pastebin.com/kkAZWims
https://pastebin.com/fQn41cHZ
https://pastebin.com/fJ8vJ8be
https://pastebin.com/SzcAwdbu
https://pastebin.com/pCWkDayj
https://pastebin.com/L9pkse7j
https://pastebin.com/FxKwn5ng
https://pastebin.com/vFCLDqaV
https://pastebin.com/NRnYdnNH
https://pastebin.com/2ER3wSYv
https://pastebin.com/Q3YCRgG6
https://pastebin.com/YFaNTgNN
https://pastebin.com/9n9shZLu
https://pastebin.com/PBbWWUgX
https://pastebin.com/2R5pKJLh
https://pastebin.com/k2yY9ULe
https://pastebin.com/CJph4hrD
https://pastebin.com/6EwGM5CL
https://pastebin.com/DELYFAem
https://pastebin.com/Ggv8dLaa
https://pastebin.com/vM0r7xLq
https://pastebin.com/nbPGG85J
https://pastebin.com/ZVvYnFre
https://pastebin.com/LjJ9AwB9
https://pastebin.com/6hq2KXML
https://pastebin.com/pugZBcNi
https://pastebin.com/pmPvrW9q
https://pastebin.com/fhueU8S6
https://pastebin.com/kQazy17K
https://pastebin.com/VfTbduXf
https://pastebin.com/pXjYSwfd
https://pastebin.com/hUUnksFb
https://pastebin.com/AGnzrkpi
https://pastebin.com/s9jXdQ2e
https://pastebin.com/tkNdPSWm
https://pastebin.com/buGSwi0Q
https://pastebin.com/iqyy4wdi
https://pastebin.com/RiGF4W7H
https://pastebin.com/pxNKyFmV
https://pastebin.com/WwXY1ryk
https://pastebin.com/dNHDcvEE
https://pastebin.com/dstyKVbw
https://pastebin.com/recG0Tg4
https://pastebin.com/Bu8wxzkr
https://pastebin.com/FuZgbtXf
https://pastebin.com/56Ze2VPk
https://pastebin.com/qYG0243R
https://pastebin.com/AZ8iKJWf
https://pastebin.com/hNwShQks
https://pastebin.com/P8iaLhZF
https://pastebin.com/Dm05MGfE
https://pastebin.com/zamDMZgY
https://pastebin.com/7iyftr84
https://pastebin.com/0NssQJ78
https://pastebin.com/kdxr8s0Z
https://pastebin.com/awjDqW6h
https://pastebin.com/GWgZwDB6
https://pastebin.com/riTJWSts
https://pastebin.com/6dmkXAhN
https://pastebin.com/XZLHY1iX
https://pastebin.com/my97aREv
https://pastebin.com/H09exPyA
https://pastebin.com/Jjw8R1hF
https://pastebin.com/hm4qKthR
https://pastebin.com/G9uVUmcV
https://pastebin.com/Z4ZGXCbg
https://pastebin.com/zttcE8aT
https://pastebin.com/ieWfnuEy
https://pastebin.com/EnmdLmjw
https://pastebin.com/q7Nj4JEA
https://pastebin.com/cCnrQ8ft
https://pastebin.com/zt89NyCc
https://pastebin.com/cV5KJRUN
https://pastebin.com/e4pzjDm2
https://pastebin.com/rGb2fsmp
https://pastebin.com/q8ikYfF0
https://pastebin.com/y9e0KRNW
https://pastebin.com/r3qCSEu5
https://pastebin.com/H37KdV5m
https://pastebin.com/SREPy9Lr
https://pastebin.com/25JSeDYG
https://pastebin.com/j2a0BJdf
https://pastebin.com/pGbzGr3L
https://pastebin.com/1WJkKeyt
https://pastebin.com/DPDXbJ9L
https://pastebin.com/4gGEvFSt
https://pastebin.com/L0HCPVB0
https://pastebin.com/0eQjwvaY
https://pastebin.com/rzSNBFS8
https://pastebin.com/NWi9hui6
https://pastebin.com/xPjT5mxu
https://pastebin.com/e5neTg7h
https://pastebin.com/TZnwGHx4
https://pastebin.com/Tb98uyxA
https://pastebin.com/DPcVtW6C
https://pastebin.com/zZ7bNVBg
https://pastebin.com/yVQXZ1T1