主页 / 问题 / 1111460
Accepted
cheerful_weasel
Asked:2020-04-17 05:25:27 +0000 UTC2020-04-17 05:25:27 +0000 UTC

如何从顶部找出正确的偏移量以在 iOS 中显示 firebase_admob 横幅？

  • 772

我正在使用 firebase_admob 插件进行颤动。一个令人不快的特性是，banner 不能像常规的 widget 一样嵌入到 widget 树中，banner 会叠加在整个应用程序的顶部。但是您可以将捕捉设置到顶部并沿 Y 轴偏移。

但是在这里我遇到了一个问题，我找不到合适的偏移量。在 android 中，一切似乎都很好，我只获得了 body 中第一个小部件的 Y 位置（在 Scaffold 中），这就是偏移量。但是在 iOS 中，您还需要从上面添加一个缩进到这个显示时钟的位置。

iPhone 8Plus 显示错误

正如您在屏幕截图中看到的那样，横幅将稍微适合 AppBar，但应严格位于其下方。

小部件的短代码如下：

  GlobalKey _widgetForAdsStickingKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _bannerAd = buildBannerAd()..load();
  }

  _getTopOffset() {
    final rBox =
        _widgetForAdsStickingKey.currentContext.findRenderObject() as RenderBox;
    final pos = rBox.localToGlobal(Offset.zero).dy;
    var offset = pos;
    if (Platform.isIOS) {
      offset = pos + MediaQuery.of(context).padding.top;
    }
    return offset;
  }

  BannerAd buildBannerAd() {
    return BannerAd(
        adUnitId: BannerAd.testAdUnitId,
        size: AdSize.banner,
        listener: (MobileAdEvent event) {
          if (event == MobileAdEvent.loaded) {
            setState(() {
              _add_is_loaded = true;
            });
            _bannerAd
              ..show(anchorType: AnchorType.top, anchorOffset: _getTopOffset());
          }
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Zeit verfolgen'),
      ),
      backgroundColor: backgroundColor,
      body: Center(
          key: _widgetForAdsStickingKey,
          child: SingleChildScrollView(
            child: Padding(
              ...

因此，在该方法中，_getTopOffset()我获取了 Center 小部件的 Y 位置，即 body 的根，并将从上方到 appbar 的缩进添加到此值。但是 iPhone 上的横幅与 appbar 有点重叠。

也许我错误地计算了从屏幕开始到应用程序区域开始的距离MediaQuery.of(context).padding.top？还是我没有考虑其他影响高度的参数？帮助如何正确计算横幅的偏移量，以使横幅不与 AppBar 重叠。

ios

2 个回答

  1. 如果你这样尝试（MediaQuery.of(context).size.height）：

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double appBarHeight = 50.0;

    double ad = screenHeight - (statusBarHeight + appBarHeight);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(appBarHeight),
          child: AppBar(
            title: Text("Test"),
          ),
        ),
      ),
    );
  }
}
    • 1
  2. Best Answer

    总的来说，搜索并没有带来任何积极的结果。

    首先，我发现MediaQuery.of(context).padding.top，在低于 11 的 iOS 版本上，它可能根本不起作用并返回 0（这就是为什么在我的真实设备上，广告卡在状态栏顶部的原因）。

    其次，根据我的经验，这个插件中横幅的偏移量 0 并不意味着真正的屏幕顶部！这很奇怪，但是为了使广告从靠近屏幕边缘（顶部）的上方显示，您需要将偏移量设置为 30。这可能有一些原因，但在我看来不知何故还不够（但是，iOS 13 上可能没有此类问题，我仍然没有检查，我有一个 ios 12 模拟器）。

    因此，我决定走另一条路，因为这种方法没有解决问题。我刚刚将广告锚点从 更改AnchorType.top为AnchorType.bottom。但是，我决定既然旧方法适用于 android，那么对于这个平台，我保留了旧版本的绑定。

    当从下方计算偏移高度时，我只是取屏幕高度并从中减去小部件的位置（广告应该在的高度），以及横幅的高度（幸运的是，它是固定的等于 50)。

    因此，代码仍然是旧的，只有两个更改：

    1. 在 buildBannerAd() 方法中我AnchorType.top改为Platform.isIOS ? AnchorType.bottom : AnchorType.top

    2. 在 _getTopOffset() 方法中，我只是简单地替换了 iOS 平台的偏移量计算线offset = MediaQuery.of(context).size.height - 50 - pos;

    GlobalKey _widgetForAdsStickingKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _bannerAd = buildBannerAd()..load();
  }

  _getTopOffset() {
    final rBox =
        _widgetForAdsStickingKey.currentContext.findRenderObject() as RenderBox;
    final pos = rBox.localToGlobal(Offset.zero).dy;
    var offset = pos;
    if (Platform.isIOS) {
      offset = MediaQuery.of(context).size.height - 50 - pos;
    }
    return offset;
  }

  BannerAd buildBannerAd() {
    return BannerAd(
        adUnitId: BannerAd.testAdUnitId,
        size: AdSize.banner,
        listener: (MobileAdEvent event) {
          if (event == MobileAdEvent.loaded) {
            setState(() {
              _add_is_loaded = true;
            });
            _bannerAd
              ..show(anchorType: Platform.isIOS ? AnchorType.bottom : AnchorType.top, anchorOffset: _getTopOffset());
          }
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Zeit verfolgen'),
      ),
      backgroundColor: backgroundColor,
      body: Center(
          key: _widgetForAdsStickingKey,
          child: SingleChildScrollView(
            child: Padding(
              ...
    • 1

相关问题