index.uts 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import { BuilderNode } from "@kit.ArkUI"
  2. // 导入混编实现的声明式UI构建函数
  3. import { buildButton } from "./builder.ets"
  4. import { INativeButtonContext } from "../interface.uts"
  5. // 定义 buildButton 的参数类型
  6. interface NativeButtonOptions {
  7. text : string
  8. onClick : () => void
  9. }
  10. export class NativeButton {
  11. private $element : UniNativeViewElement;
  12. private builder : BuilderNode<[NativeButtonOptions]> | null = null
  13. // 初始化 buildButton 默认参数
  14. private params : NativeButtonOptions = {
  15. text: '',
  16. onClick: () => {
  17. this.$element.dispatchEvent(new UniNativeViewEvent("customClick", {}))
  18. }
  19. }
  20. constructor(element : UniNativeViewElement) {
  21. // 绑定 wrapBuilder 函数
  22. this.builder = element.bindHarmonyWrappedBuilder(wrapBuilder<[NativeButtonOptions]>(buildButton), this.params)
  23. this.$element = element
  24. // 绑定当前实例为自定义的controller,方便其他地方通过 element 获取使用
  25. this.$element.bindHarmonyController(this)
  26. }
  27. updateText(text : string) {
  28. this.params.text = text
  29. // 调用 builder update 函数来更新 UI
  30. this.builder?.update(this.params)
  31. }
  32. }
  33. class NativeButtonContext implements INativeButtonContext {
  34. private controller : NativeButton
  35. constructor(element : UniNativeViewElement) {
  36. // 获取自定义的 controller
  37. this.controller = element.getHarmonyController<NativeButton>()!
  38. }
  39. updateText(text : string) {
  40. // 调用 controller 来更新文字
  41. this.controller?.updateText(text)
  42. }
  43. }
  44. /**
  45. * 递归查询
  46. */
  47. function iterateElement(homeElement : UniElement) : UniNativeViewElement | null {
  48. if ("NATIVE-VIEW" == homeElement.nodeName) {
  49. return homeElement as UniNativeViewElement
  50. }
  51. for (const perChildEle of homeElement.children) {
  52. let findEle = iterateElement(perChildEle)
  53. if (findEle != null) {
  54. return findEle
  55. }
  56. }
  57. return null
  58. }
  59. export function createNativeButtonContext(id : string, ins : ComponentPublicInstance | null = null) : INativeButtonContext | null {
  60. if (ins == null) {
  61. const pages = getCurrentPages()
  62. if (pages.length > 0) {
  63. const page = pages[pages.length - 1]
  64. const rootViewElement = page.getElementById(id)
  65. if (rootViewElement != null) {
  66. /**
  67. * 找到了root节点,递归检索目标 native-view
  68. */
  69. const nativeViewElement = iterateElement(rootViewElement)
  70. if (nativeViewElement != null) {
  71. return new NativeButtonContext(nativeViewElement)
  72. }
  73. }
  74. }
  75. } else {
  76. /**
  77. * 尝试迭代遍历
  78. */
  79. if (ins.$el != null) {
  80. const nativeViewElement = iterateElement(ins.$el as UniElement)
  81. if (nativeViewElement != null) {
  82. return new NativeButtonContext(nativeViewElement)
  83. }
  84. }
  85. }
  86. return null
  87. }