Flutter：如何解决“像素溢出的RenderFlex”错误？

时间：2019-03-20 13:02:57

标签： android dart flutter flutter-layout

我正在GridView应用中使用Flutter来显示图像及其标题。请检查以下代码。

import 'package:flutter/material.dart';

import '../common_ui/search_bar.dart';

class PurchaseProductsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PurchaseProductsUI();
  }
}

class PurchaseProductsUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _PurchaseProductUIState();
  }
}

class _PurchaseProductUIState extends State<PurchaseProductsUI> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Container(
          margin: EdgeInsets.all(20),
          child: SearchBar(),
        ),
        Container(
            margin: EdgeInsets.all(20),
            child: GridView.builder(
                physics: ScrollPhysics(), // to disable GridView's scrolling
                shrinkWrap: true,
                itemCount: 20,
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                      padding: EdgeInsets.all(5), child: _buildImageBoxes());
                })),
      ],
    );
  }

  Widget _buildImageBoxes() {
    return 
   Column(
      children: <Widget>[
        Container(
          child: Image.network("https://picsum.photos/200/300/?random"),
        ),
        Container(
          padding: EdgeInsets.all(10),
          child:  Text("Text"),        )
      ],
    );

  }
}

运行上面的代码时出现以下错误和用户界面

I/flutter ( 2743): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 2743): The following message was thrown during layout:
I/flutter ( 2743): A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 2743): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 2743): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 2743): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 2743): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 2743): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 2743): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 2743): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 2743): like a ListView.
I/flutter ( 2743): The specific RenderFlex in question is:
I/flutter ( 2743):   RenderFlex#4a1bb OVERFLOWING
I/flutter ( 2743):   creator: Column ← Padding ← Container ← RepaintBoundary-[<14>] ← IndexedSemantics ←
I/flutter ( 2743):   NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← SliverGrid ←
I/flutter ( 2743):   MediaQuery ← SliverPadding ← ShrinkWrappingViewport ← ⋯
I/flutter ( 2743):   parentData: offset=Offset(5.0, 5.0) (can use size)
I/flutter ( 2743):   constraints: BoxConstraints(w=150.0, h=150.0)
I/flutter ( 2743):   size: Size(150.0, 150.0)
I/flutter ( 2743):   direction: vertical
I/flutter ( 2743):   mainAxisAlignment: start
I/flutter ( 2743):   mainAxisSize: max
I/flutter ( 2743):   crossAxisAlignment: center
I/flutter ( 2743):   verticalDirection: down
I/flutter ( 2743): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 2743): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
Reloaded 0 of 446 libraries in 1,179ms.

下面是用户界面

enter image description here

我该如何解决？

4 个答案:

答案 0 :(得分：7)

Expanded → 计算空间

Expanded 或 Flexible 中的

Column 或 Row 小部件将使 Flutter 计算剩余空间并将该空间用于布局。

不在 Expanded 或 Flexible 中的小部件的布局与屏幕/约束空间无关。

为什么/这是如何工作的

Column 和 Row 分为两个主要阶段：

  1. 非Flexible 项
  2. Flexible 项（Expanded 和 Flexible 小部件）

第一阶段

Flutter 执行阶段 1 时没有考虑屏幕尺寸或任何其他限制。

Flutter 只是将所有非 flex-factor 项目大小加在一起。

总和对于屏幕或其他限制来说太大了吗？ → RenderFlex overflowed 例外。

第二阶段

带有 flex 构造函数参数的小部件是弹性因子项。

即Flexible 或 Expanded 小部件。 （Spacer 也是，但没有人使用它。）

在第 1 阶段之后，任何 flex-factor 小部件都会在考虑剩余空间的情况下进行布局。

主要区别非灵活和弹性因子布局阶段：

  • 非弹性布局 → 不管空间
  • flex-factor 布局 → 使用剩余空间

在 Column 或 Row 中，将小部件包装在 Expanded 或 Flexible 中，Flutter 将计算其布局的剩余空间。这将防止问题中出现 RenderFlex overflowed 异常，因为每个 Image 小部件都会根据空间限制调整自身大小。

但在第 1 阶段，没有空间限制。因此 Images 不会调整大小（和溢出）。

包裹在 Column 或 Row not 中的 Expanded 或 Flexible not 内的子小部件将以其固有尺寸布局，无论屏幕如何/约束空间。

之前

Space 400
  Column
    Image 150
    Image 150
    Image 150

非弹性图片总数：450。可用空间：400 → Overflowed

解决方案：使用第 2 阶段 → 使用计算空间

之后

将 Image 包裹在 flex 小部件 Expanded 中，可用高度计算，然后在 Expanded（作为约束）和 { 之间共享 {1}} 已调整大小以适应 Image 约束：

Expanded

Sum flex Expandeds：399。空间：400 → Space 400 Column Expanded 133 → Image ← Expanded 133 → Image ← Expanded 133 → Image ←

答案 1 :(得分：2)

尝试在_buildImageBoxes（）函数中使用扩展而不是容器

  Widget _buildImageBoxes() {
    return Column(
      children: <Widget>[
        Expanded(
          child: Image.network("https://picsum.photos/500/500/?random"),
        ),
        Container(
          padding: EdgeInsets.all(10),
          child: Text("Text"),
        )
      ],
    );
  }

答案 2 :(得分：0)

在您的fit方法中使用Image.network属性来减小图像的大小，因为它们更大并且从容器中溢出，或者您可以将Containers的{​​{ 1}}和height属性。

答案 3 :(得分：0)

小部件构建（BuildContext上下文）{

final _screenSize = MediaQuery.of(context).size;

return Container(
  height: _screenSize.height * 0.2,

我喜欢娱乐MediaQuery.of（context）

相关问题
最新问题