flutter - SingleChildScrollView仍然导致屏幕溢出

Question

我有一个使用以下代码构建的简单屏幕。我想一直将广告横幅保持在顶部，而其下方的Container()可以滚动。这就是我将SingleChildScrollView()放在下部容器中的原因。
但是它仍然在屏幕上溢出，并显示以下错误:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 162 pixels on the bottom.

屏幕如下所示:

body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            // colorFilter: ColorFilter.mode(Colors.white, BlendMode.color),
            image: AssetImage("assets/feathers_bg.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: Column(
          children: [
            AdmobBanner(
              //below is test id
              adUnitId: 'ca-app-pub-3940256099942544/6300978111',
              adSize: AdmobBannerSize.FULL_BANNER,
            ),
            Padding(
              padding: const EdgeInsets.all(40.0),
              child: SingleChildScrollView(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                  padding: EdgeInsets.all(10),
                  child: Column(
                    children: [
                      Image.network(_birdDetails.thumbnail.source),
                      SizedBox(height: 10,),
                      Container(
                        child: Column(
                          children: [
                            Text(
                              _birdName,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 20,
                                color: Colors.teal,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            Text(
                              _birdDetails.description,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 14,
                                fontStyle: FontStyle.italic,
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(height: 20,),
                      Container(
                        padding: EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          color: Colors.grey.shade300,
                          borderRadius: BorderRadius.all(Radius.circular(20)),
                        ),
                        child: Text(
                          _birdDetails.extract,
                          textAlign: TextAlign.justify,
                          style: TextStyle(
                            fontSize: 16
                          ),
                        ),
                      ),
                      SizedBox(height: 10,),
                      
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),

Answer 1

TL; DR版本。您的SingleChildScrollView需要展开(您可以将Expanded-> Padding-> SingleChildScrollView放入)。
您可以在official documentation中阅读更长的版本，本节描述了类似的情况:

One common reason for this to happen is that the Column has beenplaced in another Column (without using Expanded or Flexible aroundthe inner nested Column). When a Column lays out its non-flex children(those that have neither Expanded or Flexible around them), it givesthem unbounded constraints so that they can determine their owndimensions (passing unbounded constraints usually signals to the childthat it should shrink-wrap its contents). The solution in this case istypically to just wrap the inner column in an Expanded to indicatethat it should take the remaining space of the outer column, ratherthan being allowed to take any amount of room it desires.

这是您的代码的简化版本，可以轻松重现(例如粘贴并在 dartpad中运行):

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'SO Question : 64200763'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  StringBuffer birdDetails;
  var rng = new Random();
  @override
  initState(){
    super.initState();
    birdDetails = new StringBuffer();
    for(int i=0; i<4000; i++){
      birdDetails.write(String.fromCharCode(rng.nextInt(25) + 97));
      if(rng.nextBool() && rng.nextBool()) birdDetails.write(' ');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.green[400],
          borderRadius: BorderRadius.all(Radius.circular(20)),
        ),
        child: Column(
          children: [
            Container(
              height: 100, 
              width: double.maxFinite,
              color: Colors.yellow, 
              child: Text('Ad placeholder', textAlign: TextAlign.center)
            ),
            Expanded( 
              child: Padding(  // Here is your fix, place expanded above the SingleChildScrollView
              padding: const EdgeInsets.all(40.0),
                child: SingleChildScrollView(
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    padding: EdgeInsets.all(10),
                    child: Column(
                      children: [
                        Image.network('https://picsum.photos/id/1024/512/288'),
                        SizedBox(height: 10,),
                        Container(
                          child: Column(
                            children: [
                              Text(
                                'Bird name',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize: 20,
                                  color: Colors.teal,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Text(
                                'Bird (random) description',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize: 14,
                                  fontStyle: FontStyle.italic,
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 20,),
                        Container(
                          padding: EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            color: Colors.grey.shade300,
                            borderRadius: BorderRadius.all(Radius.circular(20)),
                          ),
                          child: Text(
                            birdDetails.toString(),
                            textAlign: TextAlign.justify,
                            style: TextStyle(
                              fontSize: 16
                            ),
                          ),
                        ),
                        SizedBox(height: 10,),       
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),

    );
  }
}

最终结果(根据您如何组织小部件，但没有溢出):

PS，在发布问题之前，我强烈建议剥离/替换一些用户可能拥有或可能不拥有的所有依赖项(如AdMob)，不必要的 Assets (如AssetImage)以及最后未在问题中定义的类结构的代码(例如birdDetails.thumbnail.source)。它可能会帮助您自己调试问题，如果不能解决，那么对于试图帮助您的人们来说，它会变得更容易；)。