Question

根据Flutter文档Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children.，我最接近使其正常工作：

return Stack(
  children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      //width: Device.screenWidth,
      //height: Device.screenHeight,
      child: Column(
        children: <Widget>[(view[1])],
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width * .50,
      height: MediaQuery.of(context).size.width * .50,
      child: Column(
        children: <Widget>[(view[0])],
      ),
    ),
  ],
);


I/flutter (12292): The following message was thrown during layout:
I/flutter (12292): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter (12292): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (12292): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (12292): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

不明白为什么MediaQuery或Device不能防止溢出？在Android手机或平板电脑上，第一个容器始终溢出81个像素；现在没有iPhone或iPad可以测试。根据我从其他帖子中读到的内容，只需将其包装在SingleChildScrollView中即可纠正带有黄色和黑色的溢出，但是当我尝试这样做时，我会得到

child: SingleChildScrollView(
        child: Column(
          children: <Widget>[(view[1])],
        ),
      ),

I/flutter (12292): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (12292): The following assertion was thrown during performLayout():
I/flutter (12292): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (12292): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (12292): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (12292): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (12292): space in the vertical direction.
I/flutter (12292): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
.
.
.
I/flutter (12292):   crossAxisAlignment: center
I/flutter (12292):   verticalDirection: down
I/flutter (12292): This RenderObject had the following child:
I/flutter (12292):   RenderAndroidView#e356e NEEDS-LAYOUT NEEDS-PAINT

根据我所看到的错误，对Expanded，ClipRect和其他小部件进行了其他几次尝试，但这使没有图像的情况更加糟糕。我是否缺少简单的东西，还是应该尝试以其他方式解决此问题？

编辑：根据Amsakanna，最近的尝试是在下面，但是仍然溢出了81个像素，从而在上面的第一个代码块中产生了相同的错误消息。

return Stack(
  children: <Widget>[
    SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[view[1])],
        ),
      ),
    ),

I/flutter ( 1144): The following message was thrown during layout:
I/flutter ( 1144): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter ( 1144): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 1144): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 1144): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

试图在扩展内容以适合视口部分中的here中使用SingleChildScrollView内部的IntrinsicHeight，但它也会溢出（81像素），并显示类似的错误消息。

Answer 1

我的方法...

return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Container(
        color: Colors.indigo[200],
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Image.file(_image),
            ),
          ],
        ),
      ),
    );

Answer 2

使用 SingleChildScrollView() 包裹容器，并使用 MediaQuery 为容器指定高度和宽度。我可以使用这种方式实现结果。这样，屏幕就不会溢出任何像素。

return Scaffold(
  body: SingleChildScrollView(
    child: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: , //child 
    ),
  ),
);

Answer 3

您通过将其包装在SingleChildScrollView中来正确地完成了操作。

每当将诸如“ Expanded”之类的flex小部件放置在Column中时，就会发生第二个错误。如果您没有在第一列中放置任何展开的小部件，则可能是Camera小部件在执行此操作。

尝试通过将其包装在Container或SizedBox中来为您的Camera小部件赋予一定的大小。

Answer 4

SizedBox.expand为我做了。这是一个显示图像的示例，以使图像高度与父图像高度匹配，并且容器在未使用的空间中绘制黑色背景：

  SizedBox.expand(
    child: Container(
      color: Colors.black,
      child: Image (
        fit: BoxFit.fitHeight,
        image: AssetImage('assets/myimage.png'),
      ),
    ),
  );

Answer 5

如果你想让一个容器的高度和它的孩子一样高，你可以使用这种方法。

     Card(
           
            child: Flexible(
              child: Container(
                
                child: Column(
                  children: [
                    Container(
                      height: 30,
                      width: double.infinity,
                      color: Theme.of(context).primaryColor,
                        child: Align(
                              alignment: Alignment.centerLeft,
                              child: Container(
                                  margin: EdgeInsets.only(left: 5),
                                  child: Text('Presupuesto Por Profesional',style: 
                  TextStyle(color: Colors.white, fontSize: 16,fontWeight: 
                FontWeight.bold)),
                              )
                        )
                ),
                    ProfessionalTableView(reportData.presupuestos)
                  ],
                ),
              ),
            )
          ),

我的 ProfessionalTableView 是一个数据表，它的长度取决于我传递给它的列表的大小。所以卡片大小也取决于我在列表中的项目。我用 Container 包裹父 Flexible 并且它工作。

Flutter-如何让带孩子的容器占据整个屏幕

5 个答案: