【flutter】A RenderFlex overflowed by xxx pixels on the right

素颜马尾好姑娘i 2021-09-24 04:50 187阅读 0赞

flutter开发中经常会遇到如标题所示的错误，意思是控件超出了屏幕尺寸。表现为应用并没有闪退，只是UI显示会与预期不符。  
比如在Row中放置几张图片时，最后一张超出了屏幕宽度，会变成这样子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70]  
源代码：

import 'package:flutter/material.dart';
    
    void main() => runApp(MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Row demo")),
            body: Row(children: <Widget>[
              Image.asset(
                "graphyics/scenery6.jpg",
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              ),
              Image.asset(
                "graphyics/scenery6.jpg",
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              ),
              Image.asset(
                "graphyics/scenery6.jpg",
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              ),
            ]))));

只是简单的在Row中放置了3张图片，很明显，后面的图片超出了屏幕范围。

控制台显示报错如下：

`A RenderFlex overflowed by 189 pixels on the right.`

控制台提示内容如下：

The overflowing RenderFlex has an orientation of Axis.horizontal.
    The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
    
    Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
    This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

意思是我们使用的控件Row有一个水平的布局方向，但是内容已经超出了可显示的范围。  
建议我们使用有弹性的控件比如Expanded代替，或者使用可裁剪的控件ClipRect代替，还可以使用具体滚动属性的控件比如ListView代替。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70]: /images/20210923/e0e2832a043841f18b27f563936fd747.png