HarmonyOS Next中可以提供动态布局实现的广告SDK的具体代码实现吗？

Question

如题：HarmonyOS Next中可以提供动态布局实现的广告SDK的具体代码实现吗？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

//首先，广告SDK创建@Builder自定义构建函数。
import { NodeController, BuilderNode, FrameNode } from '@kit.ArkUI';

// 广告SDK对外提供的广告组件节点的参数
class ADNodeParams {
  adImg: string = '';
  adText: string = '';
  adLink: string = '';

  constructor(adImg: string, adText: string, adLink: string) {
    this.adImg = adImg;
    this.adText = adText;
    this.adLink = adLink;
  }
}

// 广告SDK对外提供的广告组件节点的自定义构建函数
@Builder
function ADNodeBuilder(params: ADNodeParams) {
  //该广告节点示例，包含一个广告图片
  Stack() {
    Image($r(params.adImg))
      .objectFit(ImageFit.Contain)
      .height('100%')
      .width('100%')
  }.height('100%')
  .width('100%')
  .onClick(() => {
    // 跳转至对应的应用或页面
  })
}

// ...

//其次，广告SDK创建自定义广告节点控制器。ADNodeController类继承NodeController，用于绑定NodeContainer容器，它持有一个BuilderNode自定义节点，可以挂载原生组件。NodeController可通过BuilderNode持有的FrameNode将其挂载到NodeContainer上。
// entry\src\main\ets\pages\ADNodeController.ets
// ...
// 自定义广告节点控制器
class ADNodeController extends NodeController {
  private node: BuilderNode<[ADNodeParams]> | null = null;

  // 当NodeController绑定的NodeContainer挂载显示时，触发此回调
  // 可以加一个打点，记录标明广告被真实的显示出来的时间
  aboutToAppear(): void {
    console.info('ADController aboutToAppear');
  }

  // 当NodeController绑定的NodeContainer卸载消失时，触发此回调
  // 可以加一个打点，记录标明广告退出的时间
  aboutToDisappear(): void {
    console.info('ADController aboutToDisappear');
  }

  // 当NodeController实例绑定的NodeContainer创建的时候进行回调。回调方法将返回一个节点，将该节点挂载至NodeContainer。
  makeNode(uiContext: UIContext): FrameNode | null {
    this.node = new BuilderNode<[ADNodeParams]>(uiContext);
    this.node.build(new WrappedBuilder<[ADNodeParams]>(ADNodeBuilder),
      new ADNodeParams('app.media.al_pc', '点击跳转至官网', ''));
    return this.node.getFrameNode();
  }

  // 更新渲染节点
  update(params: ADNodeParams) {
    if (this.node != null) {
      console.info(`update params:${JSON.stringify(params)}`)
      this.node.update(params)
    }
  }
}
//应用界面展示广告。创建NodeController广告节点控制器实例，和应用页面广告NodeContainer布局空间进行绑定，完成广告的动态展示。
import { NodeController } from '@kit.ArkUI';
import { ADNodeController } from './ADNodeController';

@Entry
@Component
struct Index {
  @State isShow: boolean = true;
  private controller: NodeController | null = new ADNodeController();

  build() {
    Stack() {
      if (this.isShow) {
        NodeContainer(this.controller)
        Button('跳过')
          .onClick(() => {
            this.isShow = false;
          })
      } else {
        Text('应用首页')
      }
    }
    .alignContent(this.isShow ? Alignment.TopEnd : Alignment.TopStart)
    .width('100%')
    .height('100%')
  }

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。