Question

我的横幅广告设置得井井有条，并且与底部导航栏重叠

我想在底部导航栏下方显示广告，

有什么方法可以在底部导航栏下方添加边距？

我已经在home.dart（主页）中实现了广告

import 'package:provider/provider.dart';
import '../../ui/widgets/bottom_nav_bar.dart';
import '../../core/utils/theme.dart';
import 'search_page.dart';
import 'category.dart';
import 'main_page.dart';
import 'settings.dart';
import 'package:flutter/material.dart';
import 'package:firebase_admob/firebase_admob.dart';
import 'for_you.dart';

const String AD_MOB_APP_ID = 'ca-app-pub-3940256099942544~3347511713';
const String AD_MOB_TEST_DEVICE = 'DEC3010B2445165B43EB949F5D97D0F8 - run ad then check device logs for value';
const String AD_MOB_AD_ID = 'ca-app-pub-3940256099942544/6300978111';

class HomePage extends StatefulWidget {


  @override
  _HomePageState createState() => _HomePageState();
}


class _HomePageState extends State<HomePage> {

BannerAd _bannerAd;

  static final MobileAdTargetingInfo targetingInfo = new MobileAdTargetingInfo(
    testDevices: <String>[AD_MOB_TEST_DEVICE],
  );

  BannerAd createBannerAd() {
    return new BannerAd(
      adUnitId: AD_MOB_AD_ID,
      size: AdSize.banner,
      targetingInfo: targetingInfo,
    );
  }

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _selectedIndex = 0;
  final PageController _pageController = PageController();




  @override
  void initState() {
    super.initState();


  }



  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }


  @override
  Widget build(BuildContext context) {
    final stateData = Provider.of<ThemeNotifier>(context);
    final ThemeData state = stateData.getTheme();


FirebaseAdMob.instance.initialize(appId: AD_MOB_APP_ID);
    _bannerAd = createBannerAd()..load()..show();
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        centerTitle: false,
        backgroundColor: state.primaryColor,
        elevation: 0,
        title: Text(
          'RevWalls',
          style: state.textTheme.headline,
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.search,
              color: state.textTheme.body1.color,
            ),
            onPressed: () => showSearch(
                context: context, delegate: WallpaperSearch(themeData: state)),
          )
        ],
      ),
      body: Container(
        color: state.primaryColor,
        child: PageView(
          controller: _pageController,
          physics: BouncingScrollPhysics(),
          onPageChanged: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          children: <Widget>[
            MainBody(),
            Category(),
            ForYou(),
            SettingsPage(),
          ],
        ),
      ),



      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _selectedIndex,
        unselectedColor: state.textTheme.body1.color,
        onItemSelected: (index) {
          _pageController.jumpToPage(index);
        },
        selectedColor: state.accentColor,
        backgroundColor: state.primaryColor,
        showElevation: false,
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.category),
            title: Text('Subreddits'),
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.phone_android),
            title: Text('Exact Fit'),
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );
  }

  Widget oldBody(ThemeData state) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            backgroundColor: state.primaryColor,
            elevation: 4,
            title: Text(
              'reWalls',
              style: state.textTheme.headline,
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search, color: state.accentColor),
                onPressed: () {
                  showSearch(
                      context: context,
                      delegate: WallpaperSearch(themeData: state));
                },
              )
            ],
            floating: true,
            pinned: _selectedIndex == 0 ? false : true,
            snap: false,
            centerTitle: false,
          ),
        ];
      },
      body: Container(
        color: state.primaryColor,
        child: PageView(
          controller: _pageController,
          onPageChanged: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          children: <Widget>[
            MainBody(),
            Category(),
            ForYou(),
            SettingsPage(),
          ],
        ),
      ),
    );
  }
}

这是底部导航栏-

library bottom_navy_bar;

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class BottomNavyBar extends StatelessWidget {

  final int selectedIndex;
  final double iconSize;
  final Color backgroundColor, selectedColor, unselectedColor;
  final bool showElevation;
  final Duration animationDuration;
  final List<BottomNavyBarItem> items;
  final ValueChanged<int> onItemSelected;

  BottomNavyBar(
      {Key key,
      this.selectedIndex = 0,
      this.showElevation = true,
      this.iconSize = 20,
      this.backgroundColor,
      this.selectedColor,
      this.unselectedColor,
      this.animationDuration = const Duration(milliseconds: 250),
      @required this.items,
      @required this.onItemSelected}) {
    assert(items != null);
    assert(items.length >= 2 && items.length <= 5);
    assert(onItemSelected != null);
  }


  Widget _buildItem(BottomNavyBarItem item, bool isSelected) {



    return AnimatedContainer(
      width: isSelected ? 120 : 50,
      height: double.maxFinite,
      duration: animationDuration,
      decoration: BoxDecoration(
        color: isSelected ? selectedColor.withOpacity(0.2) : backgroundColor,
        borderRadius: BorderRadius.all(Radius.circular(100.0)),
      ),
      alignment: Alignment.center,
      child: ListView(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 8),
                child: IconTheme(
                  data: IconThemeData(
                      size: iconSize,
                      color: isSelected ? selectedColor : unselectedColor),
                  child: item.icon,
                ),
              ),
              isSelected
                  ? DefaultTextStyle.merge(
                      style: TextStyle(
                          fontSize: 16,
                          color: selectedColor,
                          fontWeight: FontWeight.bold),
                      child: item.title,
                    )
                  : SizedBox.shrink()
            ],
          )
        ],
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return Container(
      color: backgroundColor,
      child: Container(
        width: double.infinity,
        height: 55,
        padding: EdgeInsets.all(8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: items.map((item) {
            var index = items.indexOf(item);
            return GestureDetector(
              onTap: () {
                onItemSelected(index);
              },
              child: _buildItem(item, selectedIndex == index),
            );
          }).toList(),
        ),
      ),
    );
  }
}

class BottomNavyBarItem {
  final Icon icon;
  final Text title;

  BottomNavyBarItem({
    @required this.icon,
    @required this.title,
  }) {
    assert(icon != null);
    assert(title != null);
  }
}

请帮助

Answer 1

将此添加到您的脚手架

bottomNavigationBar: Container(
    height: 50.0,
    color: Colors.white,
),

Answer 2

您可以为此使用MediaQuery.of（context）。将整个代码包装在一个高度为Container的容器中：MediaQuery.of（context）.size.height-60。（广告的高度）

Column(
    children: [
                 Container(
                     height: MediaQuery.of(context).size.height - 60,
                     child: HomePage(),
                    ),
                 BannerAd(),
              ]
);

Answer 3

找到了自己的答案

我们可以使用它在容器中设置边距以及其他高度，宽度

此代码将为底部导航栏的底部增加边距，根据我的需要，我想在导航栏下方显示广告，从而解决了我的问题

margin: const EdgeInsets.only(bottom: 50)

Answer 4

像这样添加 builder 即可解决问题

var paddingBottom = 60.0;
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
//
return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'World General info',
    //theme: ThemeData(primarySwatch: Colors.cyan,),
    theme: ThemeData(
      primaryColor: Colors.cyan,
      accentColor: Colors.green,
      textTheme: TextTheme(bodyText2: TextStyle(color: Colors.purple)),
    ),
    home: MyHomePage(title: 'World General Info'),
    builder: (BuildContext context, Widget child) {
      return new Padding(
        child: child,
        padding:  EdgeInsets.only(bottom: paddingBottom),
      );
    }
    );
}
}

广告与底部导航重叠，颤抖

4 个答案: