---
metadata:
  - name: generator
    content: Diplodoc Platform v5.52.0
alternate:
  - https://ads.yandex.com/helpcenter/en/easy/integration/flutter/formats/banner.md
  - https://ads.yandex.com/helpcenter/ru/easy/integration/flutter/formats/banner.md
  - https://ads.yandex.com/helpcenter/zh/easy/integration/flutter/formats/banner.md
  - href: zh/easy/integration/flutter/formats/banner.md
    type: text/markdown
    title: Markdown version
  - href: ../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/zh/llms.txt

# 横幅广告

## 横幅广告类型

Yandex Mobile Ads SDK 包含两种横幅广告类型：

#|
||

**横幅广告**

|

**描述**

|

**使用场景**

||
||

粘性横幅广告

|

固定在屏幕边缘并显示在其他元素之上的横幅广告。此类横幅广告不受屏幕滚动影响。

|

如果您希望横幅广告保持“固定效果”，即保持位置不变，即使用户滚动浏览屏幕也始终显示在内容上方。

||
||

内嵌横幅广告

|

嵌入应用中（例如，嵌入内容或列表中）的横幅广告，如同用户界面元素一样呈现。

|

横幅广告应成为页面内容的一部分，例如出现在动态消息中、帖子之间或作为列表项显示。

||
|#

所有类型的横幅广告都会每隔 60 秒自动更新一次广告创意。

{% note tip %}

要设置自定义自动更新周期，请联系您的专属经理。

{% endnote %}

从代码角度来看，这些横幅广告仅在尺寸设置方式上有所不同。例如：

{% list tabs %}

- 粘性横幅广告

    ```C#
    BannerAdSize.sticky({required int width})
    ```

- 内嵌横幅广告

    ```C#
    BannerAdSize.inline({required int width, required int maxHeight})
    ```

{% endlist %}


#|
||

**实体**

|

**描述**

||
||

`BannerAdSize`

|

横幅广告高度：

- **不得**超过屏幕高度的 15%。

- 必须至少为 50 **dp/pt** (**Android/iOS**)。

所有横幅广告尺寸必须以 **dp** 为单位指定。

||
||

`adUnitId`

|

使用：

- **开发模式**，用于配合[演示广告单元](https://ads.yandex.com/helpcenter/zh/easy/integration/flutter/testing.md#blocks)使用。

- **生产模式**，用于配合 `R-M-XXXXXX-Y` 使用（实际 ID 请在 Yandex Advertising Network 界面查询）。`R-M-XXXXXX-Y` 是您实际广告单元 ID 的模板，将用于接收各种广告创意。

||
|#

<!-- source: zh/easy/_includes/notes-flutter-easy-guide.md -->
{% note info %}

[演示项目](https://ads.yandex.com/helpcenter/zh/easy/integration/flutter/testing.md#demo)中提供了展示所有格式类型运作原理的示例。

{% endnote %}
<!-- endsource: zh/easy/_includes/notes-flutter-easy-guide.md -->

## 创建横幅广告示例

```C#
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:yandex_mobileads/mobile_ads.dart';

class BannerPage extends StatefulWidget {
  const BannerPage({super.key});

  @override
  State<BannerPage> createState() => _BannerPageState();
}

class _BannerPageState extends State<BannerPage> {
  static const _tag = 'Banner';
  static const _adUnitId = 'demo-banner-yandex';

  BannerAd? _banner;
  bool _adLoaded = false;
  String _status = 'Loading...';

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (_banner == null) {
      _createBanner();
    }
  }

  @override
  void dispose() {
    _banner?.destroy();
    super.dispose();
  }

  void _createBanner() {
    final size = MediaQuery.of(context).size;

    _banner = BannerAd(
      adUnitId: _adUnitId,
      adSize: BannerAdSize.inline(
        width: size.width.round(),
        maxHeight: (size.height / 3).round(),
      ),
      adRequest: const AdRequest(),
      onAdLoaded: () {
        debugPrint('[$_tag] onAdLoaded');
        if (mounted) setState(() { _adLoaded = true; _status = 'Loaded'; });
      },
      onAdFailedToLoad: (error) {
        debugPrint('[$_tag] onAdFailedToLoad: ${error.description}');
        if (mounted) setState(() => _status = 'Error: ${error.description}');
      },
      onAdClicked: () => debugPrint('[$_tag] onAdClicked'),
      onLeftApplication: () => debugPrint('[$_tag] onLeftApplication'),
      onReturnedToApplication: () => debugPrint('[$_tag] onReturnedToApplication'),
      onImpression: (ImpressionData impressionData) => debugPrint('[$_tag] onAdImpression: $impressionData'),
      onAdClose: () => debugPrint('[$_tag] onAdClose'),
    );

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Banner')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(_status),
          ),
          const Spacer(),
          if (_banner != null)
            SizedBox(
              width: double.infinity,
              child: AdWidget(bannerAd: _banner!),
            ),
        ],
      ),
    );
  }
}

```

## 检查集成

<!-- source: zh/easy/_includes/notes-flutter-easy-guide.md -->
创建并运行您的项目。您可以通过在 **Android Studio** 的 **Logcat** 中搜索 `YandexAds` 关键字来检查集成是否成功：
<!-- endsource: zh/easy/_includes/notes-flutter-easy-guide.md -->

```
[Integration] Ad type Banner was integrated successfully
```