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

quhf5bfb  于 2023-05-29  发布在  Flutter
关注(0)|答案(8)|浏览(323)

根据Flutter docs 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或设备不能防止溢出?第一个Container在Android手机或平板电脑上总是溢出81像素;现在没有iPhone或iPad可供测试。根据我从其他帖子中读到的内容,黄色和黑色溢出只是通过在SingleChildScrollView中 Package 来纠正,但当我试图这样做时,我得到了

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.

尝试在SingleChildScrollView中使用IntrinsicHeight,在Expanding content to fit the viewport部分中发现here,但它也溢出(81像素),并显示类似的错误消息。

ykejflvf

ykejflvf1#

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

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

5sxhfpxr2#

我的方法...

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),
            ),
          ],
        ),
      ),
    );
rwqw0loc

rwqw0loc3#

对我很有效。

return Scaffold(
              appBar: AppBar(
                title: Text("chatEasy"),
                backgroundColor: Color.fromRGBO(102, 108, 218, 1),
              ),
              body: Container(
                child: Column(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        child: Image(
                          image: AssetImage("images/baseScreen.png"),
                          fit: BoxFit.fitHeight,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          }
        }
62o28rlo

62o28rlo4#

使用SingleChildScrollView() Package 容器,并使用MediaQuery给予容器的高度和宽度。我可以用这种方法来实现结果。这样,屏幕不会溢出任何像素。

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

b4wnujal5#

你把它 Package 在一个SingleChildScrollView中,这是正确的。
第二个错误发生在当你有一个像'Expanded'这样的flex小部件被放置在一个Column中时。如果您没有在第一个Column中放置任何展开的小部件,那么可能是Camera小部件在执行此操作。

尝试通过将相机小部件 Package 在Container或SizedBox中来为相机小部件提供确定的大小

cpjpxq1n

cpjpxq1n6#

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

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是一个dataTable,它的长度取决于我传递给它的列表的大小。所以卡片的大小也取决于我在列表中的项目。我用Flexible Package 父Container,它就可以工作了。

uplii1fm

uplii1fm7#

SizedBox.expand Package Container并在SizedBox中添加颜色。

dsf9zpds

dsf9zpds8#

将您的内容 Package 在定位.填充

Positioned.fill(
      child: Visibility(
        child: Container(
          color: Colors.black54,
          child: Center(child: PRLoader(),))
        ),
    )

相关问题