Question

我正在制作一个Flutter应用并设法显示AdMob横幅广告，但该广告与我应用主屏幕的底部重叠：

通过关注this article，我设法正确显示应用程序屏幕的底部，但牺牲了persistentFooterButtons，我认为这不是一个理想的解决方案。

我正在考虑将Scaffold对象和固定高度区域放入Center对象包含的列中，类似于以下内容：

  @override
  Widget build(BuildContext context) {

    return new Center(
      child: new Column (
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new Expanded (
              child:  _getScaffold(),
          ),
          new Expanded (
              child: new Container(height: 50.0,)
          )
        ],
      ),
    );
  }

但是通过这种方式，我得到了例外情况“一个RenderFlex溢出底部的228像素”：

任何人都可以告诉我如何构建这样的布局？我希望我的脚手架的每个组件都能正确显示，固定高度的虚拟页脚可以与Admob的横幅广告重叠。

非常欢迎任何帮助。

麦

Answer 1

如果我理解您的问题，我认为您希望在使用FAB时从底部展示您的广告。我认为在这里使用Stack小部件是一个很好的解决方案，我匆匆创建了这个例子，但应该足以告诉你我的意思了：

class AdBar extends StatefulWidget {
  @override
  _AdBarState createState() => new _AdBarState();
}

class _AdBarState extends State<AdBar> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(),
        body: new ListView(
          children: new List.generate(50, (int index) {
            return new Text("widgets$index");
          }),
        ),
        persistentFooterButtons:

        <Widget>[
          new Stack(
            children: <Widget>[
              new Container (
                color: Colors.transparent,
                child: new Material(
                  color: Colors.cyanAccent,
                  child: new InkWell(
                    onTap: () {

                    },
                    child: new Container(
                      //color: Colors.cyanAccent,
                      width: MediaQuery
                          .of(context)
                          .size
                          .width * 0.90,
                      height: MediaQuery
                          .of(context)
                          .size
                          .height * 0.25,
                    ),
                  ),),),
              new Positioned(
                  right: 0.0,
                  child: new FloatingActionButton(
                      onPressed: () {}, child: new Icon(Icons.fastfood)))
            ],
          )
        ]

    );
  }
}

Answer 2

最后我明白了：

@override
Widget build(BuildContext context) {

 return new Center(
   child: new Column (
     crossAxisAlignment: CrossAxisAlignment.stretch,
     mainAxisSize: MainAxisSize.min,
     children: <Widget>[
       new Expanded (
          child: _getScaffold(),
       ),
       new Container(height: 50.0,
            child: new Placeholder(color:Colors.blue))
      ],
    ),
  );
 }

这里的扩展仅适用于Scaffold，但对于虚拟页脚，只需要一个固定高度的容器。现在我可以显示Scaffold对象提供的所有内容。

Flutter的布局构建有时会让我感到困惑......

Answer 3

我们还可以在支架下添加一些技巧，例如bottomNavigationBar

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

这将使浮动按钮向上。

颤振：横幅广告重叠主屏幕

3 个答案: