列布局中的底部小部件溢出？答案

【问题标题】：Bottom Widget overflow in Column layout?列布局中的底部小部件溢出？
【发布时间】：2020-08-02 13:01:23
【问题描述】：

我正在尝试使用 admob_flutter 包显示广告：https://pub.dev/packages/admob_flutter，它基本上允许我像任何其他小部件一样显示广告。

按照文档，我在列布局中添加了一个小部件，如下所示（仅相关代码）：

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(fileName),
          backgroundColor: Colors.teal,
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: (){
              },
            ),
          ],
        ),
        body: Container(
          padding: EdgeInsets.all(5.0),
          child: Column(
            children: <Widget>[
              TextField(
                ...
              ),
              AdmobBanner(
                adUnitId: 'ca-app-pub-39402560999XXXXXX/XXXXXXXXX',
                adSize: AdmobBannerSize.BANNER,
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomAppBar(...)

根据文档，这就是我所要做的，但我得到一个溢出错误，如下面的屏幕截图所示：

我尝试将这些包装在 Expanded() 和 Flexible() 中，但这并没有解决我的问题？

我在这里做错了什么？

【问题讨论】：

您是否尝试过将您的widgets 包裹在scrollable view 中？

标签： flutter dart flutter-layout

【解决方案1】：

您应该将Widgets 包裹在Scrollable Widget 中，以便在内容超出设备屏幕大小时可以滚动它们。我将您的小部件包装在 SingleChildScrollView 中，请查看下面的演示：

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(fileName),
          backgroundColor: Colors.teal,
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: (){
              },
            ),
          ],
        ),
        body: SingleChildScrollView( // new line
          child: Container(
          padding: EdgeInsets.all(5.0),
          child: Column(
            children: <Widget>[
              TextField(
                ...
              ),
              AdmobBanner(
                adUnitId: 'ca-app-pub-39402560999XXXXXX/XXXXXXXXX',
                adSize: AdmobBannerSize.BANNER,
              ),
            ],
          ),
        ),
        )
        bottomNavigationBar: BottomAppBar(...)

【讨论】：

【解决方案2】：

只需将Column 更改为Listview

【讨论】：

请更新您的答案以解释它的作用并帮助解决问题中的问题，以便您的回答对 OP 和其他有类似问题的用户都有帮助。跨度>

【解决方案3】：

如果您想要动态内容代替 Column，您可以使用 ListView、SingleChildScrollView 或 ListView.builder

   body: Container(
      padding: EdgeInsets.all(5.0),
      child: Column(..),),

【讨论】：