文章/答案/技术大牛

发布

社区首页 >问答首页 >如何让带孩子的容器占据整个屏幕

问如何让带孩子的容器占据整个屏幕
EN

Stack Overflow用户

提问于 2019-03-04 17:19:09

回答 7查看 77.2K关注 0票数 24

根据颤振文档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或设备不能防止溢出吗？第一个容器总是在安卓手机或平板电脑上溢出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

通过扩展、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.

尝试使用IntrinsicHeight inside，如在展开内容中找到的这里，以适应viewport部分，但它也溢出了类似的错误消息( 81像素)。

dart

flutter

flutter-layout

回答 7

Stack Overflow用户

发布于 2019-06-09 04:35:38

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

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

票数 47

Stack Overflow用户

发布于 2020-02-14 02:30:11

我的方法..。

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

票数 8

Stack Overflow用户

发布于 2020-01-06 12:22:51

它对我有用..。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54988368

复制

相似问题

问如何让带孩子的容器占据整个屏幕
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让带孩子的容器占据整个屏幕EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让带孩子的容器占据整个屏幕
EN