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中阅读较长的版本，本节介绍了类似的情况：

发生这种情况的一个常见原因是该列已被放置在另一列中（不使用周围的扩展或灵活内部嵌套列）。当专栏布置其非灵活子项时（那些既不展开也不灵活的对象），则可以他们不受限制，因此他们可以确定自己的尺寸（传递无限制的约束通常会向孩子发出信号它应该收缩包装其内容）。在这种情况下的解决方案是通常只将内部列包装在扩展中以表示它应该占用外部列的剩余空间，而不是而不是被允许占用其想要的任何空间。

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

g-autocomplete

最终结果（根据您组织小部件的方式，但没有溢出）：

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

SingleChildScrollView仍然导致屏幕溢出

1 个答案: