菜单

原生广告

💡Tips

原生广告采用纯 Widget 方式集成，通过 McNativeAdView 组件实现完全自定义布局

所有子组件均可自由组合和排列，充分适配您的 UI 风格

原生广告不支持程序化方式，请使用 Widget 方式集成（即自渲染方式）

1. 创建原生广告视图

使用 McNativeAdView 组件构建原生广告，通过 child 参数组合子组件来自定义广告布局。

dart 复制代码

final McNativeAdViewController nativeAdController = McNativeAdViewController();

Widget buildNativeAd() {
  return McNativeAdView(
    adUnitId: "your mediation unit id",
    listener: McNativeAdListener(
      onAdLoadedCallback: (McAd ad) {
        // 原生广告加载成功回调
      },
      onAdLoadFailedCallback: (String adUnitId, McError error) {
        // 原生广告加载失败回调
      },
      onAdClickedCallback: (McAd ad) {
        // 原生广告点击回调
      },
      onAdDisplayedCallback: (McAd ad) {
        // 原生广告展示成功回调
      },
      onAdRevenuePaidCallback: (McAd ad) {
        // 原生广告收益回调
      },
    ),
    controller: nativeAdController,
    width: double.infinity,
    height: 300,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 广告标题
        McNativeAdTitleView(
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 4),
        // 广告主名称
        McNativeAdAdvertiserView(),
        SizedBox(height: 8),
        // 广告正文
        McNativeAdBodyView(),
        SizedBox(height: 8),
        // 广告媒体视图（图片 / 视频）
        McNativeAdMediaView(width: double.infinity, height: 200),
        SizedBox(height: 8),
        Row(
          children: [
            // 广告图标
            McNativeAdIconView(width: 48, height: 48),
            SizedBox(width: 8),
            Expanded(
              // 行动号召按钮
              child: McNativeAdCallToActionView(
                style: ButtonStyle(
                  backgroundColor: WidgetStatePropertyAll(Colors.blue),
                  foregroundColor: WidgetStatePropertyAll(Colors.white),
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            // 广告评分
            McNativeAdStarRatingView(size: 12, color: Colors.amber),
            Spacer(),
            // 广告选项（AdChoices 等）
            McNativeAdOptionsView(width: 20, height: 20),
          ],
        ),
      ],
    ),
  );
}

💡 Tips

McNativeAdView 在挂载到 Widget 树时会自动加载广告。

width 和 height 参数定义广告容器的尺寸。

child 中的子组件顺序和布局完全由开发者控制。

2. 原生广告子组件

McNativeAdView 提供以下子组件，可根据需要自由组合：

组件	说明	主要参数
`McNativeAdTitleView`	广告标题文本	`style`（TextStyle）
`McNativeAdAdvertiserView`	广告主名称	—
`McNativeAdBodyView`	广告正文描述	—
`McNativeAdMediaView`	媒体内容（图片或视频）	`width`、`height`
`McNativeAdIconView`	广告图标	`width`、`height`
`McNativeAdOptionsView`	广告选项视图（如 AdChoices）	`width`、`height`
`McNativeAdCallToActionView`	行动号召按钮	`style`（ButtonStyle）
`McNativeAdStarRatingView`	星级评分	`size`、`color`

McNativeAd 数据字段

加载成功后，McNativeAd 对象包含以下可用字段：

字段	类型	说明
`title`	String?	广告标题
`advertiser`	String?	广告主名称
`body`	String?	广告正文
`callToAction`	String?	行动号召文案
`starRating`	double?	星级评分
`mediaContentAspectRatio`	double?	媒体内容宽高比
`isIconImageAvailable`	bool	是否包含图标图片
`isOptionsViewAvailable`	bool	是否包含选项视图
`isMediaViewAvailable`	bool	是否包含媒体视图

💡 Tips

并非所有广告平台都会返回全部字段，建议在展示前做空值判断。

可通过 isIconImageAvailable、isOptionsViewAvailable、isMediaViewAvailable 判断对应组件是否有内容可展示，按需隐藏空组件。

3. 加载与刷新

McNativeAdView 在首次挂载时会自动触发广告加载。如需手动刷新广告，可通过 McNativeAdViewController 控制：

dart 复制代码

final McNativeAdViewController nativeAdController = McNativeAdViewController();

// 手动刷新原生广告
nativeAdController.loadAd();

💡 Tips

手动调用 loadAd() 会触发新一轮广告请求，加载完成后自动更新视图内容。

建议避免频繁调用 loadAd()，以免影响广告填充率和用户体验。

4. 回调说明

McNativeAdListener 提供以下回调方法：

回调	触发时机	参数
`onAdLoadedCallback`	原生广告加载成功	`McAd`
`onAdLoadFailedCallback`	原生广告加载失败	`String` adUnitId, `McError`
`onAdClickedCallback`	用户点击广告	`McAd`
`onAdDisplayedCallback`	广告成功展示	`McAd`
`onAdRevenuePaidCallback`	广告产生收益	`McAd`
`onAdHiddenCallback`	原生广告关闭	`McAd`

dart 复制代码

McNativeAdListener(
  onAdLoadedCallback: (McAd ad) {
    // 广告加载成功，可读取 ad 中的字段展示自定义 UI
  },
  onAdLoadFailedCallback: (String adUnitId, McError error) {
    // 加载失败，可根据 error 信息进行重试或降级处理
    print("错误码: ${error.code}, 错误信息: ${error.message}");
  },
  onAdClickedCallback: (McAd ad) {
    // 用户点击了广告
  },
  onAdDisplayedCallback: (McAd ad) {
    // 广告已成功展示在屏幕上
  },
  onAdRevenuePaidCallback: (McAd ad) {
    // 广告产生收益，可用于收益追踪
  },
  onAdHiddenCallback: (McAd ad) {
    // 原生广告关闭回调
  },
)

上一个

激励视频广告

下一个

横幅广告

最近修改: 2026-06-25Powered by

大纲